Component in Visualforce Page

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

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

7. resetFunction

The resetFunction is a string-type attribute used for specifying the JavaScript function that can be called when values are reset.

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>

Output