Inline Editing in Visualforce

4:02 AM

Update: Inline Editing is now available and supported out of the box. Click here to know more



You might be aware that inline editing is not supported in Visualforce as of now.
I tried to create a Visualforce Page and wrote a custom logic to Mimic the Inline Editing Functionality. Not a 100% mimic though, but to some extent a decent one...
Step 1:
Create an Apex Class named "inlineediting" and paste the code below....

public class inlineediting {

public Boolean readonly;
public boolean editmode;
public inlineediting(ApexPages.StandardController controller)
{
readonly=true;
editmode=false;
}
public boolean getreadonlymode(){return readonly;}

public void setreadonlymode(Boolean readonly)
{
this.readonly= readonly;
}
public boolean geteditmode(){return editmode;}

public void seteditmode(Boolean editmode)
{
this.editmode= editmode;
}
public void inlineedit()
{
system.debug('entered here');
readonly = false;
editmode = true;
}   

}


Step 2:
Create a Visualforce Page with the following code...


<apex:page standardcontroller="Account" extensions="inlineediting" showheader="false">
<apex:form >
<apex:pageBlock >
<apex:outputPanel id="outpanel">
<apex:pageblocksection columns="1">
<apex:pageblocksectionItem >
<apex:outputlabel value="Account Name" for="Accname" rendered="{!readonlymode}">
<apex:actionSupport event="ondblclick" action="{!inlineedit}" rerender="outpanel"/>
</apex:outputlabel>
<apex:outputtext value="{!Account.Name}" rendered="{!readonlymode}" id="Accname">

</apex:outputtext>
</apex:pageblocksectionItem>          


<apex:inputfield value="{!Account.Name}" rendered="{!editmode}"/>

</apex:pageblocksection>    
</apex:outputPanel>
</apex:pageBlock>
</apex:form>         
</apex:page>



Name the Visualforce Page as "Inlineediting" (for example)
Step 3:
Go to the URL bar and type the following
https://na5.salesforce.com/apex/inlineediting?id=0017000000ZUYGv

Note:- The bold part denotes your salesforce.com instance and a valid AccountId in your Instance.

Also, you will have to double click on the "Account Name" label to see the functionality.


You could then customize the code as per your needs...

Screenshots:



Share This Story

Tags: ,

4 comments

  1. davidNovember 24, 2009 at 2:53 PM

    Interesting approach. Ryan Marples demonstrated an interesting way to hand it with rerenders as well:

    http://blog.sforce.com/sforce/2009/04/an-approach-to-inplace-editing-with-visualforce.html

    ReplyDelete
  2. Jarrod and BrittniApril 23, 2010 at 8:16 AM

    I love this approach. Do you have to do separate code for each field you want to inline edit? It would be nice to just do it for the entire page.

    ReplyDelete
  3. Edwin RaymondApril 27, 2010 at 10:11 PM

    Hi Jarod.. I am afraid you would have to do seperate code for each field to get this inline edit feature..

    ReplyDelete
  4. UnknownAugust 16, 2020 at 7:56 AM

    How about Inline editing for the entire pageBlock table using a custome Object?
    Can you please share the code for that?

    ReplyDelete