Think visually appealing applications in Salesforce and automatically you tend to think of Javascript, HTML5, jQuery and so on! But hold on a second! Remember Bible? “Seek within and thou shalt find!” Salesforce has a sophisticated set of icons that cover most of your icon requirements. No Javascript, no jQuery, just plain simple, reliable Salesforce! Let me show you how.
When do you need icons?
Suppose you are building a formula field to classify a Lead as Hot, Warm or Cold! Or you need to prioritize your Cases as Critical, Medium and Low! Or build sophisticated looking Visualforce pages on Salesforce…basically do anything that needs to be visual and appealing, Icons help to provide an appealing visual indicator for your otherwise boring numerical or textual business data.
Great! How do I do that?
Let’s say you need a visual indicator on your Invoices that are marked as pending, paid or overdue. We will use a simple formula field to accomplish this. Let’s assume you have a custom object Invoice (Invoice__c) which maintains and tracks the Invoice data. A picklist field Status (Status__c) tracks the payment status of the Invoice and has the following options as shown below. For this example, let’s assume that the business logic is already in place to demarcate an Invoice with any of the below mentioned statuses.
We will leverage the flag icon available with Salesforce to provide visual indicators. For a green flag, usually indicative of active health, we will use the URL: https://<your salesforce instance>.salesforce.com/img/samples/flag_green.gif to provide visual indicators. Replace your Salesforce org’s instance in the initial part of the URL in order to access the specific icons.
Some icons that you can use in this scenario are given below:
- Pending – Yellow flag
- Paid – Green flag
- Overdue – Red flag
Now let us create a new formula field having a return type as Text on the Invoice object and call it Payment Status. This field is created in order to display the visual indicator and the invoice status concatenated together. The formula for Payment Status would be as shown below:
Now, add the newly created Payment Status field to the Invoice page layout. Create some Invoice records and bask in the glory of your creation!!
Remember!!!
Although this approach is a convenient way to access and leverage icons already being used by Salesforce, these images are susceptible to modifications or getting deleted during any of the new Salesforce upgrades. Hence, a better way to access the same images would be through the wonderful Graphics Pack app provided by Salesforce Labs on AppExchange. You can install the app on your Salesforce instance from the following link -
https://appexchange.salesforce.com/listingDetail?listingId=a0N30000004cfIcEAI
https://appexchange.salesforce.com/listingDetail?listingId=a0N30000004cfIcEAI
The links mentioned below provide the ability to preview most of Salesforce’s standard images and also get their relative paths with ease. Kudos to them!!
- http://blogforce9dev-developer-edition.ap1.force.com/salesforceicons
- http://free-121d5f44d20-121d603d1c5-121ee2b8103.force.com/force2b/salesforceicons
In my next blog, I will talk about how this can be further leveraged on Visualforce pages.
Written by Jigar Shah, Solution Architect at Eternus Solutions
No comments:
Post a Comment