How to do Inline Edit in custom Salesforce Visualforce Page?

Hello guys,

We all know that we can edit the value of a field by going to the Edit Page, edit it and Save it using the Save button. But Salesforce also provides an effective way of editing the value of a field. We can use to edit content in field. To create that in our Custom Visualforce Pages we have to write code for that. Let see one example on INLINE EDIT -

Visualforce Page :

<apex:page controller="InlineEditInVFController">
        <apex:pageBlock title="Account Information" >
            <apex:pageBlockTable value="{!acc}" var="a" title="Results" >
                <apex:inlineEditSupport showOnEdit="update, cancelButton" hideOnEdit="editButton" event="ondblclick" changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"></apex:inlineEditSupport>
                <apex:column headerValue="Name">
                    <apex:outputfield value="{!}"/>
                <apex:column headerValue="id">
                    <apex:outputfield value="{!}"/>
        <apex:commandButton id="update" action="{!quickUpdat}"value="UpdateRecord"></apex:commandButton>

Apex Class:

public class InlineEditInVFController {
    public List <Account> acc {get;set;}
    public InlineEditInVFController(){
        acc= Database.query('select Name,id from Account Limit 10');
    public PageReference quickUpdat(){
            update acc;
            return ApexPages.CurrentPage();
        catch(Exception e) {
            return null;


Happy Coding.

Popular Salesforce Blogs