Inline Edit in a custom Visualforce UI


 Inline Edit

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     besides that provides an efficient of editing a value of a field from the detail page of a record OR from List View of records which is       very efficient for users and less time consuming. Just by double clicking on the Field Value a popup will open where we can edit the       value and save it. But Salesforce provides that inBuilt only in their Standard Pages. To create that in our Custom Visualforce Pages we   have to write code for that. Here is a small example of using INLINE EDIT in Visualforce Pages..


Visualforce Page
   <!– VisualForce Page Responsible for Entry of Customer Records –>
  <apex:page controller=”CustomerEntryPageController”>
      <apex:pageBlock title=”Customer Information” >
         <apex:pageMessages />
         <!– Display Save and Cancel Button –>
         <apex:pageBlockButtons >
            <apex:commandButton value=”Save” id=”saveButton” action=”{!savingCustomerRecord}”/>
         <!– A PageBlockSection for Entry and Display Customer Values –>
         <apex:pageBlockSection title=”Information” columns=”2″>
            <apex:outputField value=”{!customerObj.Name}”/>
            <apex:outputField value=”{!customerObj.Address__c}”>
               <apex:inlineEditSupport showOnEdit=”saveButton” event=”ondblclick”/>

Apex Class

*@purpose : Apex Controller responsible for Entry of Customer Records
*@author :  Souvik
public with sharing  class CustomerEntryPageController {
    public Customer__c customerObj{get;set;}
    String customerId{get;set;}
    public String message{get;set;}
    *@purpose : Constructor to fetch current Customer Record and its Action
   public CustomerEntryPageController () {
      message = ”;
      // Fetching the Current Customer Id
      customerId = System.currentPageReference().getParameters().get(‘Id’);
       if(cutomerId != NULL){
         customerObj = [SELECT Id,Name,Address__c FROM Customer__c WHERE id=:customerId];
    *@purpose : Method for Saving the Customer Object Record
*@param : None
*@return : PageReference to Standard Salesforce Record Detail Page
   public PageReference savingCustomerRecord(){
         upsert customerObj;
         PageReference nextpage= new PageReference(‘/’;
           return nextpage;
      catch(Exception e){
            message=’Data Base error during saving…’;
ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, message));
return null;
Print Friendly, PDF & Email
This entry was posted in Development and tagged , . Bookmark the permalink.