The <apex: inlineEditSupport> is another most used component on the VF page that provides inline editing support to the container components. We have to put the component inside the <apex: form> component to use this component.
The <apex: inlineEditSupport> component can only be a descendant of one of the following components:
<apex: repeat>
<apex: form>
<apex: outputField>
<apex: pageBlock>
<apex: pageBlockSection>
<apex: pageBlockTable>
<apex: dataList>
<apex: dataTable>
The <apex: inlineEditSupport> component has the following attributes on the VF page:
1. changedStyleClass
The changedStyleClass is a string-type attribute used for specifying the name of the style class that will be applied to this component when the field's content has changed.
<apex: inlineEditSupport changedStyleClass= "className"></apex: inlineEditSupport>
2. disabled
The disabled is a Boolean type attribute that is used for specifying whether inline editing is enabled or not. By default, its value is set to true.
Syntax
<apex: inlineEditSupport disabled="false" changedStyleClass= "className"></apex: inlineEditSupport>
3. event
The event is a string-type attribute used for specifying the name of the standard DOM event. The specified DOM event is responsible for triggering inline editing on a field.
Syntax
<apex: inlineEditSupport event="onchange" changedStyleClass= "className"></apex: inlineEditSupport>
4. hideOnEdit
The hideOnEdit is an Object-type attribute, i.e., a comma-separated list of button Ids we need to hide when inline editing is activated.
Syntax
<apex: inlineEditSupport hideOnEdit= "btn1, btn2, btn3, …."></apex: inlineEditSupport>
5. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax
AD
<apex: inlineEditSupport id= "editId"></apex: inlineEditSupport>
6. rendered
The rendered is a Boolean-type attribute used to specify whether this component is rendered on the page. The boolean value true is set as a default value for this attribute.
Syntax
<apex: inlineEditSupport rendered= "false"></apex: inlineEditSupport>
7. resetFunction
The resetFunction is a string-type attribute used for specifying the JavaScript function that can be called when values are reset.
AD
Syntax
<apex: inlineEditSupport resetFunction= "functionName"></apex: inlineEditSupport>
8. showOnEdit
The showOnEdit is an Object-type attribute, i.e., a comma-separated list of button IDs which we need to show when inline editing is activated.
Syntax
<apex: inlineEditSupport showonEdit= "btn1, btn2, btn3, …"></apex: inlineEditSupport>
Let's take an example to understand how we can use this component on the VF page:
ApexInlineEditSupportExample.vfp
<!-- apex page that shows the use of the inlineEditSupport component-->
<apex:page standardController="Account">
<!-- user form -->.
<apex: form >
<!-- apex:pageBlock with inlineEdit mode -->
<apex:pageBlock mode="inlineEdit">
<!-- use apex:pageBlockButtons for creating Edit, Save and Cancel buttons-->
<apex:pageBlockButtons >
<apex:commandButton action="{!edit}" id="btnEdit" value="Edit Record"/>
<apex:commandButton action="{!save}" id="btnSave" value="Save Record"/>
<apex:commandButton onclick="resetInlineEdit()" id="btnCancel" value="Cancel"/>
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:outputField value="{!account.Name}">
<apex:inlineEditSupport showOnEdit="btnSave, btnCancel"
hideOnEdit="btnEdit" event="ondblclick"
changedStyleClass="changeClass" resetFunction="resetInlineEdit"/>
</apex:outputField>
<apex:outputField value="{!account.ParentId}"/>
<apex:outputField value="{!account.Phone}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex: form>
</apex: page>
