Spring ‘11: The Visualforce Inline Editing Component

A while ago, Sandeep dug a bit deeper for us on how to deliver field sets for Visualforce pages, which allows an administrative approach to determining what fields should be displayed for Visualforce pages. Another feature we’ve add with Spring ‘11 is 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.  You can either set “inlineEditing” to true within specific tags which support it, like detail or outputField, a la:


Note that the detail component is surrounded around a form, which is required for inline editing.

However, it may be less widely known that you can also attached the InlineEditSupport component as a child to other components. This gives you even greater flexibility – for instance, with this component you can do cool tricks like specifying which event triggers the editing.  Here I’ve made a quick example which will trigger editing on mousedown:


.myEditingClass { color: red; font-family: Verdana; }

Also seen in that example: you can show and hide specific buttons while inline editing is enabled, and specify a CSS class to use for indicating changed fields (normally bold and orange using the standard stylesheets). Inline editing is, in general, a great addition to Visualforce – but it’s awesome that the Visualforce team has made sure that developers have these additional features to work with as well.

tagged , , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • Jim

    in the above example, the save button is visible when the fields are not being edited. Is there a way to have a button normally hidden and only shown upon inline editing?

  • Ryan F

    How about fixing the internet explorer bug with event=”onclick” and picklists…
    Where it appears the trigger on the select box is bubbling to fire the onclick… but in any case closes the popup with the select options…

  • Josh

    @Jim – I don’t see a way using the default attributes, which does somewhat call showOnEdit’s overall usefulness. Let me see if I can dig around for an example which handles that use case.
    @Ryan – Yup, I can replicate that here when I go into Win7/IE8. Also, looks like a potential bug with using “enter” to change the picklist value. I’ll see what can be done about it.

  • Kevin

    Try adding style=”display: none;” to the apex:commandButton components that you wish to hide when the page is loaded. For example:
    apex:commandButton action=”{!save}” value=”Save” id=”saveButton” style=”display: none;”
    That worked for me when using a standard controller.

  • Kunjan

    The Visualforce page does not save any other records except last one. Is this know issue or there is any solution to this..

  • munish sikka

    Kunjan, were you able to find a solution to this?
    Thanks!