An Approach to In-Place Editing with Visualforce

By Ryan Marples | Published: April 14, 2009

UPDATE: I've published a live version of this page so you can see the output and play with it live. You can find it at http://webinar-developer-edition.na1.force.com/projects

I recently created a Visualforce page that allowed users to manage projects. Rather than have the standard salesforce workflow of "click to detail screen" I wanted to have everything happen on the one page. After some experimentation I came up with an in-place editing design that I was pretty happy with in terms of user experience and also simplicity of implementation. I figured others might want to use something like this so I'm sharing it here.

First, let's look at the end result. This is what the page looks like:

Picture 1
If I click 'Edit' next to the "Another important project" record, I get this:

Picture 2
At this point I can make changes to either of the drop-downs or the text input and either click Save to commit the changes or Cancel to discard them. In either case I'm brought back a view like the first screenshot with the updated values. Here's how the edit works:

The Edit link is a commandLink that calls a method on my controller passing in the current record's ID. When this method is called my controller code simply fills in an editProject sObject variable on my controller. If this editProject variable is null, nothing is being edited. If it's not null, then it represents the record being edited. Simple right?

Because that controller method returns null, the current page is re-evaluated again (UPDATE: As Jason points out in the comments, you can use rerender to only re-render the table as opposed to the whole page so I've made that update in the code). Within the page, I've got logic that determines whether to show the output controls or the input controls, based on that editProject variable. Within my table there are two versions of the row: I use an outputPanel element to represent each. I use an expression for the rendered attribute of each of them to determine which of the two to show. The expression simply tests if the current record's ID is equal to the editProject's ID and if so, it shows the input controls, otherwise it shows the output controls. Then the Edit link switches to a Save link which simply calls UPDATE on that editProject variable, picking up the new values. Voila!

The full code for both the visualforce page and the custom controller can be found here. By looking at this code you can check out the way I implemented the Add and Del links as well.

Let me know in the comments if you find this useful.
tagged Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • Jason

    When you say, “the current page is re-evaluated again” does this mean reloaded? If so, why not use the rerender attribute of the commandLink and perform only a partial page refresh?

  • http://twitter.com/marplesoft Ryan Marples

    Good point, yes you could certainly do that. I think I meant to put that in and forgot to go back and do it. So yes you could add an outputPanel around the table and then simply the set the rerender attribute of the commandLinks to the name of that outputPanel. This would work for the Del, Edit, Cancel, and Save commandLinks.

  • dan

    that’s cool … anyway to do this using a standard controller?

  • http://twitter.com/marplesoft Ryan Marples

    I don’t see why not. You could convert the ProjectsController to an extension and use the StandardController’s save method. I haven’t coded this up but I don’t see any reason this wouldn’t work.

  • Manu

    Simple, sexy, useful!

  • http://developer.force.com Andrew Waite

    Very nice. One thing you might want to do is include the pageMessages in your rerender attributes on actions that involve DML. As it stands the error messages you are adding in your exception handling won’t be displayed.
    Also, it would be great if you could share your test methods as well on the wiki.

  • http://twitter.com/marplesoft Ryan Marples

    That’s true. I worry though that if I moved the pageMessages element wihin the rerendered section, that it might be disorientating since errors could also come from the top part of the page via the Add button. I guess I could have multiple pageMessages elements. I suppose that’s better than no error at all as it stands right now.

  • d3developer

    Any way you know of to do the processing (action & rerender) on a form element other than a commandButton or a commandLink?
    For instance, I’d like to do it on an onclick for a checkbox.

  • http://developer.force.com Andrew Waite

    d3developer,
    Yes, check out apex:actionSupport and apex:actionFunction in the Visualforce component reference or developer guide.

  • http://www.articleshive.com waqas

    simply outstanding,
    can you please provide a sample code for editing checkbox value within a column.
    thanks

  • Pat M

    Hi Ryan – I have been searching for the webinar that you mention in your update on Approach to In-Place Editing. The link does not work — can you help locate?
    Thanks!