Friday, June 1, 2012

apex:inlineEditSupport Tag in Visualforce page


This tag provides inline editing support to <apex:outputField> and various container components. In order to support inline editing, this must also be within an <apex:form> tag. This support for dataList, dataTable, outpoutField, repeats within this tags etc.
    As given below example of Visualforce page having inlineEditSupport. We are populating the Account records with column Name, Type and Industry also https://c.ap1.visual.force.com/apex/inlineEditing?id=00190000004bEBe
   We can edit the any field on double click on the field.

VF Page code:
<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>

No comments:

Post a Comment