Inline Editing in Visualforce page

Inline editing in Visualforce was introduced with the Spring'11. It has the ability to turn on inline editing within Visualforce, a handy bit of user friendliness which has been availability in the standard application interfaces for some time. Enabling inline editing is simple. My example is related with the Contact Standard object. But this feature will work with custom objects as well.
<apex:page standardController="Contact">
<apex:form >
<apex:pageBlock mode="inlineEdit">
<apex:pageBlockButtons >
<apex:commandButton action="{!edit}" id="editButton" value="Edit"/>
<apex:commandButton action="{!save}" id="saveButton" value="Save"/>
<apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:outputField value="{!contact.lastname}">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton"
hideOnEdit="editButton" event="ondblclick"
changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
</apex:outputField>
<apex:outputField value="{!contact.accountId}"/>
<apex:outputField value="{!contact.phone}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Just copy and paste this code in your visualforce editor. After run it obviously you will not see the values in output fields. Just append the URL with some contact object id as follows.

Ex:
https://yourOrganizationLink/apex/yourVFPageName?id=someCantactObjectId
https://c.ap1.visual.force.com/apex/InlineEditNew?id=00390000005ZFzB

Comments

  1. This works, except the "Save" and "Cancel" buttons are always visible when I try to use this code example. The "Edit" button DOES disappear when I double-click a field (go into inline edit mode), but the "Save" and "Cancel" buttons are there all the time (regardless of whether or not I'm in inline edit mode).

    ReplyDelete
  2. Use style="display:none;" in your button attributes.

    ReplyDelete
  3. I need help with a related issue. Calling the {!save} method during inlineEditing in an is not working for me. See all the details ere:

    http://boards.developerforce.com/t5/Visualforce-Development/Using-save-from-an-apex-button-during-inline-editing/td-p/377641

    Please help me if you can

    dfpitt

    ReplyDelete
  4. Sorry, the words "apex:detail" got deleted. Here is the post again:

    I need help with a related issue. Calling the {!save} method during inlineEditing in an "apex:detail" is not working for me. See all the details here:

    http://boards.developerforce.com/t5/Visualforce-Development/Using-save-from-an-apex-button-during-inline-editing/td-p/377641

    Please help me if you can

    dfpitt

    ReplyDelete
  5. Hi,

    Although i kept 3 page block buttons in the above code, i still could not see the edit button.

    Could you please let me know as to why ?

    On changing the action of edit button to the save one, i am able to get the button.

    ReplyDelete
  6. Hi I am trying to get a save button in "inline edit mode" for pageblock table which is rendered based on picklist value, For this scenario the page block save button is not displaying

    Can you please help me out with this !!

    ReplyDelete
  7. Can we capture the value of the InlineEdited field in the Apex Controller....??

    ReplyDelete
  8. Thanks for sharing informative article on Salesforce technology. Your article helped me a lot to understand the career prospects in cloud computing technology. Salesforce.com Training in Chennai

    ReplyDelete

  9. This is excellent information. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
    Android Training in Chennai
    Ios Training in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Parameter passing using Javascript+actionFunction in visualforce

Displaying pop-up summaries on hover in visualforce