Sobject Preview Panel

Tweet

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.id, 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 Force.com 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.

Follow @bob_buzzard