Presenting Account Revenue indicators using custom images and formula field

Increasingly on the web, we find sites that are using images of gold or silver stars to provide reviews and to rank the quality or usefulness of various products and services.

It has become universally accepted that one or no star equates to something very poor and five stars is seen to be excellent. By building an incremental number of images, we can create an associated image list of say one to five that conveys a rating and ranking factor.

For this recipe, we are using a dollar image that will be repeated depending on the value of the Account Revenue amount to show revenue graphically.

The dollar image we are using is a custom image and is not provided by the Salesforce CRM application.

Using the value entered in the standard field Account Revenue, we will create a custom formula field to build a set of images, from one to five, whenever the Account Revenue amount meets a certain threshold criteria.

The thresholds that will formulate are:

• Greater than (or equal to) $100,000 = one dollar image
• Greater than (or equal to) $500,000 = two dollar images
• Greater than (or equal to) $1 million = three dollar images
• Greater than (or equal to) $2 million = four dollar images
• Greater than (or equal to) $5 million = five dollar images

Amounts less than $100,000 will have no images displayed.

Getting ready

In this recipe, we are going to display a repeating series of a custom image and we can either use an image file that we have created ourselves or use one obtained from an external source.

We will store the image file within Salesforce CRM as a Static Resource so we can maintain a copy and this will be referenced to enable the image to be displayed using a Salesforce formula field.

Carry out the following steps to upload an image file into Salesforce CRM as a Static Resource:

1. Create or source a suitable image to represent a dollar symbol.

FamFamFam provides various images from its Silk Icons Library, available under the Creative Commons Attribution 2.5 License at http://www.famfamfam.com/lab/icons/silk/.
You can download the images which are contained in a ZIP file and then unzip the ZIP file to reveal the image files.
The image we have used in this recipe is a 16-by-16 pixel icon called money_dollar.png from http://www.famfamfam.com, as shown in the following screenshot:

2. Click on the Setup gear icon, as shown in the following screenshot:

The Setup gear icon is located in the top right-hand area of the main Home page.

3. Click the Setup option, as shown in the following screenshot:

4. Type the text static resources in the Quick Find search box, as shown in the following screenshot:

5. Select the Static Resources option.
6. Click on New, as shown in the following screenshot:

7. In the resulting Static Resources page, enter the name of the Static Resource in the Name field.
8. Enter the text money_dollar.
9. Click on Choose File.
10. Select the image to upload from your computer.

In this recipe, choose the image identified in Step 1. After selecting the image file, we will be presented with the Static Resources setup screen, as shown in the following screenshot:

Ignore the Cache Control picklist selection and leave it as default Private (Cache Control is only relevant to Static Resources used in http://www.Force.com sites).

11. Click Save.

Static Resources allow us to upload images that we can reference within Salesforce CRM, such as from formula fields, Visualforce pages, and so on. This reference is a web URL and is formed as /resource/[UNIQUE ID]/money_dollar where the UNIQUE ID is a unique ID which is generated for every Static Resource and is unique throughout every Salesforce CRM system.

Now, to find the ID for the Static Resource uploaded previously, carry out the following steps:

1. Click on the View file link, as shown in the following screenshot:

2. Note the Web URL that is displayed in the browser address bar; this is the ID for the Static Resource, as shown in the following screenshot:

The URL that is generated is https://widgetsxyzlex-dev-ed--c.eu11.visual.force.com/resource/1505987107000/money_dollar?isdtp=p1.
You will now need to make a note of the URL that is shown in your Salesforce instance. This URL is specified for the reference to the image in a custom formula field that is used in this recipe using the steps shown in How to do it... section.

How to do it...

Carry out the following steps to create a formula field to display custom images that will reference the dollar image that was uploaded in the Getting ready section for this recipe:

1. Click on the Setup gear icon in the top right-hand of the main Home page, as shown in the following screenshot:

2. Click the Setup option, as shown in the following screenshot:

3. Navigate to the Account customization setup page, by clicking the following: Objects and Fields | Object Manager | Account | Fields and Relationships.

Locate the Fields & Relationships section on the right of the page.

4. Click New.

We will be presented with the Step 1. Choose the field type page.

5. Select the Formula option, as shown in the following screenshot:

6. Click Next.

We will be presented with the Step 2. Choose output type page.

7. Type Account Revenue Graphic in the Field Label text box.
8. Click on the Field Name. When clicking out of the Field Label text box the Field Name is automatically filled with the value Account_Revenue_Graphic.
9. Set the Formula Return Type as Text.
10. Click Next.

We will be presented with the Step 3. Enter formula page.

11. Paste the following code in the formula edit box (as shown in the next image):

Remember to replace the URL shown with the URL from your Salesforce organization.

/********************************************************   

Begin the check for Annual Revenue value and set the following: 
Greater than (or equal to) 100,000 = One Dollar image  
Greater than (or equal to) 500,000 = Two Dollar image  
Greater than (or equal to) 1,000,000 = Three Dollar image 
Greater than (or equal to) 2,000,000 = Four Dollar image  
Greater than (or equal to) 5,000,000 = Five Dollar image  
*********************************************************/ 
IF( AnnualRevenue > 99999, IMAGE("/resource/1505987107000/money_dollar", "$", 16, 16),"") 
  & 
IF( AnnualRevenue > 499999, IMAGE("/resource/1505987107000/money_dollar", "$", 16, 16),"") 
  & 
IF( AnnualRevenue > 999999, IMAGE("/resource/1505987107000/money_dollar", "$", 16, 16),"") 
  & 
IF( AnnualRevenue > 1999999, IMAGE("/resource/1505987107000/money_dollar", "$", 16, 16),"") 
  & 
IF( AnnualRevenue > 4999999, IMAGE("/resource/1505987107000/money_dollar", "$", 16, 16),"")

12. Optionally, enter the following in the Description field:

Greater than (or equal to) 100,000 = One Dollar image
Greater than (or equal to) 500,000 = Two Dollar image
Greater than (or equal to) 1,000,000 = Three Dollar image
Greater than (or equal to) 2,000,000 = Four Dollar image
Greater than (or equal to) 5,000,000 = Five Dollar image

13. Optionally, enter the following in the Help Text field:

1 Dollar image = 100,000 or more
2 Dollar images = 500,000 or more
3 Dollar images = 1,000,000 or more
4 Dollar images = 2,000,000 or more
5 Dollar images = 5,000,000 or more

14. In the Blank Field Handling section, select the option Treat blank fields.
15. Click Next, as shown in the following screenshot:

We will be presented with the Step 4. Establish field-level security page.

16. Select the profiles to which you want to grant read access to this field via field-level security. The field will be hidden from all profiles if you do not add it to the field-level security.
17. Click Next.

We will be presented with the Step 5. Add to page layouts page.

18. Select the page layouts that should include this field. The field will be added as the last field in the first two column section of these page layouts. The field will not appear on any pages if you do not select a layout.
19. Click Save.

How it works...

The formula field graphic is dynamically generated based on the annual revenue value and the rendered image appears on both the account record detail and edit pages.

You can see what this looks like when the Annual Revenue is set to $100,000, as shown in the following screenshot:

You can see what this looks like when the Annual Revenue is set to $50,000,000, as shown in the following screenshot:

There's more...

The Annual Revenue Graphic formula image field is not only shown when the record is being viewed or edited but can also be seen when you include the field in a list view.

Formula fields containing an image can also be sorted in the list view.

You can see what this looks like within a list view when the list of account records are set to varying amounts for the ANNUAL REVENUE graphic column, as shown in the following screenshot: