Visualforce pages 21.0 and above support inline editing. Inline editing lets users
quickly edit field values, right on a record’s detail page. Editable cells display a pencil icon () when you hover over the cell, while non-editable
cells display a lock icon (
).
The <apex:detail> component has an attribute that activates inline editing, while the <apex:inlineEditSupport> component provides inline editing functionality to several container components.
<apex:page standardController="Account"> <apex:detail subject="{!account.Id}" relatedList="false" /> </apex:page>
<apex:page standardController="Account"> <apex:detail subject="{!account.Id}" relatedList="false" inlineEdit="true"/> </apex:page>
<apex:page standardController="Account" recordSetVar="records" id="thePage"> <apex:form id="theForm"> <apex:pageBlock id="thePageBlock"> <apex:pageBlockTable value="{!records}" var="record" id="thePageBlockTable"> <apex:column > <apex:outputField value="{!record.Name}" id="AccountNameDOM" /> <apex:facet name="header">Name</apex:facet> </apex:column> <apex:column > <apex:outputField value="{!record.Type}" id="AccountTypeDOM" /> <apex:facet name="header">Type</apex:facet> </apex:column> <apex:column > <apex:outputField value="{!record.Industry}" id="AccountIndustryDOM" /> <apex:facet name="header">Industry</apex:facet> </apex:column> <apex:inlineEditSupport event="ondblClick" showOnEdit="saveButton,cancelButton" hideOnEdit="editButton" /> </apex:pageBlockTable> <apex:pageBlockButtons > <apex:commandButton value="Edit" action="{!save}" id="editButton" /> <apex:commandButton value="Save" action="{!save}" id="saveButton" /> <apex:commandButton value="Cancel" action="{!cancel}" id="cancelButton" /> </apex:pageBlockButtons> </apex:pageBlock> </apex:form> </apex:page>
The following are cases when inline editing isn’t supported.
Pages must include the controlling field for a dependent picklist. Failing to include the controlling field on the page causes a runtime error when the page displays.
<apex:page standardController="Account"> <apex:form> <!-- Don't mix a standard input field... --> <apex:inputField value="{!account.Controlling__c}"/> <apex:outputField value="{!account.Dependent__c}"> <!-- ...with an inline-edit enabled dependent field --> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> </apex:form> </apex:page>
<apex:form> <!-- other form elements ... --> <apex:outputPanel id="locationPicker"> <apex:outputField value="{!Location.country}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> <apex:outputField value="{!Location.state}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> <apex:outputField value="{!Location.city}"> <apex:inlineEditSupport event="ondblClick" /> </apex:outputField> </apex:outputPanel> <!-- ... --> <apex:commandButton value="Refresh Picklists" reRender="locationPicker" /> </apex:form>