Saturday 25 August 2012

Sobject Preview Panel

Something that I find myself doing at fairly regular intervals is providing selectlists on Visualforce pages to allow a user to choose from a list of records.  Sometimes its because I want to restrict the selection due to complex rules, so a lookup isn't suitable, sometimes I'm not using an inputfield to capture the id, but mostly its because I find it a lot faster to select from a drop down list.

The downside to this is that if the record names are quite similar, it can be difficult for users to pick the right one.  When this is the case, I usually provide a dynamically rendered preview of the record in the page so that the user can check it is the correct record.

Here's a simple example of a dropdown - which of the 'Blog Account' entries is the one I am interested in?

Adding a preview pane shows me the detail of the selected item:

as I actually wanted BrightGen, it is immediately apparent that I've chosen the wrong record (I know the name makes that pretty clear too, but this is only an example :).  I can then choose the correct record and verify that from the details:

The apex controller is very simple - it has a method to retrieve selectoptions for 10 accounts and provides a property to store the user's selection:

public with sharing class DynamicDetail
	public String chosenAccountId {get; set;}
	public List<SelectOption> getAccounts()
		List<SelectOption> accOptions=new List<SelectOption>();
		accOptions.add(new SelectOption('Choose', 'Choose'));
		for (Account acc : [select id, Name from Account limit 10])
			accOptions.add(new SelectOption(, acc.Name));
		return accOptions;

The page is also pretty simple - a pageblock to choose the account and an actionsupport to rerender the preview panel when a selection is made. Note that I've put the preview pane in the stop facet of an actionstatus. This means that when the user chooses a different account, I don't have to worry about clearing down theuser is entering information that will be presented in a particular context.  For example, entering markup into a rich text field that will appear in a branded site - having a preview of the content inside the branded page gives you an immediate indicator as to how well the content integrates with the site look and feel.

By the way, if you are seeing odd line numbering on the code samples, this appears to be a bug in chrome.  Hopefully it will be fixed soon.


  1. Thanks for the above.

    I am trying to do exactly what you are doing in your controller class and it works.

    However, my VF page code is not and I was wondering if you could post up the VF code if possible.

    Many thanks.

  2. Hey Bob,

    Just stumbled across your blog and have been reading back on everything that you've posted so far!

    I've already stolen (Hope you don't mind!) some code and modified as needed.

    I'm new to salesforce (And sort of coding :\) So it's great to see all the explanations and getting ideas on what visualforce pages can do!

    I was wanting to do something very similar, more like a wiki of a custom object (Company_Names__c) and having a dropdown box with all the company names located in there to which then shows the details of the company.

    I'm just stuck with the visualforce page of this side! and showing the preview as you have it above.

    If you have any code snippets for this would be greatly appreciated, unsure how to leave my email or subscribe to this.

    Any help (more than already from your blog!) is greatly appreciated if you have the time :)


    Richard Hubbard
    New SalesForce Admin/Dev