UI Tips and Tricks – Picture Upload

In the very early 90s I was employed as a professional Visual Basic programmer (and no that isn’t a contradiction in terms) enjoying greatly the development of client-server accounting systems. Good times. In those days tips and tricks sites were a big part of how the community shared knowledge. Following some recent reminiscing, through this series of posts, I’ll share some UI tips and tricks that aren’t necessarily an architects concern however I hope will prove helpful to some.

Ok, so down to business. Today’s tip concerns the upload and display of record images in the context of standard functionality, for example a Product image or Contact photo. The latter I’ll use as an example.

1. Add a field to Contact named [Photo Document Id], of the text type, 18 char length.

2. Add a field to Contact named [Photo], of the text formula type, formula set as below.

<formula>IMAGE('/servlet/servlet.FileDownload?file='Photo_Document_Id__c'')</formula>

3. Add a Visualforce page named ContactPictureUploader, with no markup between the page tags.
4. Add an Apex class ContactPictureUploaderController, code as below, set as the VF page controller and ensure the page action is set to the initialise method.

public with sharing class ContactPictureUploaderController {
	private Id contactId;

	public ContactPictureUploaderController(){
		contactId = ApexPages.currentPage().getParameters().get('cid');
	}

	public PageReference initialise(){
		List<Attachment> listA = [select a.Id from Attachment a 
									where a.createdById =:UserInfo.getUserId() 
									and a.parentId=:contactId order by a.createdDate desc limit 1];														
		if (listA.size()>0){
			Id attachmentId = listA[0].Id;
			
			Contact c = [select Id from Contact where Id=:contactId];
			c.Photo_Document_Id__c = attachmentId;
			update c;
		}
		return new PageReference('/'+contactId);		
	}
}

VF Page markup.

<apex:page controller="ContactPictureUploaderController" action="{!initialise}">
<!-- Controller context page - no markup -->
</apex:page>

5. Add a custom button to the Contact object of the JavaScript type, named Upload Photo, script as below.

parent.window.location.href='p/attach/NoteAttach?pid={!Contact.Id}&retURL=/apex/ContactPictureUploader?cid={!Contact.Id}'

In short, the solution works by invoking the standard attachment page, which on submit redirects to the VF page which copies the uploaded document id to the Contact Photo Document Id field, then redirects back to the contact record. The image field on the Contact object then loads the image using the IMAGE() formula field, easy. The image field can then be used on the contact layout, related lists etc..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: