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.

Leave your comments...

Spring ‘11: The Visualforce Inline Editing Component