We recently released an updated version of Picture Uploader. The basic app is designed to attach a picture to a Contact and then display it on the detail page. When I posted the news to Twitter, @ForceIUS asked about adapting it to a custom object. Like many Force.com Labs apps, adapting it to your needs is pretty straightforward. This blog post will show you how.
As you can see from the screen shot above, Picture Uploader is made up of two Apex classes, two Visualforce pages and one custom button. The Apex classes handle most of the heavy lifting and are pretty generic, so adapting the app to your custom object is a matter of customizing the Visualforce pages, creating a new button and updating your custom object’s page layout.
Follow these steps.
1. Create a copy of the Visualforce page called “fileupload” specifically for your custom object. Call the new page “fileuploadCustom”. The easiest way to copy the page is open the existing page, select all of the code, create a new Visualforce page called “fileuploadCustom” and paste the original code.
Change the first line to reference the standard controller for your custom object instead of Contact.
Original: <apex:page id="uploadImagePage" standardController="Contact" extensions="Contactsextension">
New: <apex:page id="uploadImagePage" standardController="My_Custom_Object__c" extensions="Contactsextension">
2. Create a copy of the Visualforce page called “showPicture” specifically for your custom object. Call it “showPictureCustom” and use the same cut and paste from step 1.
Change the first line to reference the standard controller for your custom object instead of Contact.
Original: <apex:page id="showImagePage" standardController="Contact" extensions="ShowPicture">
New: <apex:page id="showImagePage" standardController="My_Custom_Object__c" extensions="ShowPicture">
3. Create a copy of the Contact custom button called Upload Picture on your custom object. Just like the custom button on Contact, the new button should be a detail page button that executes JavaScript. Update the code in the new button to reference your custom object and the custom fileupload page you created.
var Id = '{!My_Custom_Object__c.Id}';
location.href = '/apex/fileuploadCustom?id='+Id;
4. Update the page layout for your custom object by adding the Visualforce page “showPictureCustom” and the custom button you created in step 3.
That’s it! Now you can have a picture to go with your custom object. Note that your custom object must have Notes and Attachments enabled for this to work.
Be sure to follow Force.com Labs on Twitter and if you have questions or comments please feel free to post on the discussion boards or add a comment below.