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:



4 comments

  1. 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. 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. Hi Jarod.. I am afraid you would have to do seperate code for each field to get this inline edit feature..

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

    ReplyDelete