There is a saying that a picture paints a thousand words. Whether this is true, there is no doubt that pictures and images often, far better, describe information than words and numbers alone.

Text and numerical data can often be better represented as graphical charts and images to provide a quick and easy way to compare data values. Images can also provide a more visually powerful style of message delivery for what can otherwise be overlooked in static text or numbers.

In this chapter, we will provide recipes designed to enhance the user interface and provide features and functionality to visually display information in Salesforce CRM.

The use of exclamation, and check icons is a common sight within applications and helps to clearly show where data or processes are either satisfactory or in need of amendment.

Using an exclamation icon we can show where Opportunity close dates are overdue and need to be updated in Salesforce. We can use a check icon to show that all is well and no action is required.

In this recipe, we will display an image derived by a formula field that shows whether the Opportunity close date is within date or is overdue.

Carry out the following steps to create a formula field to display Salesforce images to show graphically whether the close date is overdue or within date for Opportunity records:

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 Opportunity customization setup page, by clicking the following: Objects and Fields | Object Manager | Opportunity | 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.
6. Click Next.

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

7. Type Close Date Valid 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 Close_Date_Valid.

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:

/***********************************************************  
Warning Graphic for the Opportunity.  
If the Close Date has been reached display a warning  
***********************************************************/  
IMAGE(  
  IF(  
    AND(  
      NOT(IsClosed),  
      CloseDate < TODAY()),
      "/img/msg_icons/warning32.png",  
      "/img/msg_icons/confirm32.png"),  
      "", 15, 15) 

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

 Field to display an image according to whether
 the Close Date is overdue or within date 

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

 Field to display an image according to whether
 the Close Date is overdue or within date

14. In the Blank Field Handling section, select the option Treat blank fields as blanks.

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 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. Finally, click Save.

The Opportunity record formula field graphic is dynamically generated based on whether the Close Date is within date or overdue and appears on both opportunity detail and edit pages.

You can see what this looks like when the Close Date for an opportunity record is overdue in the following screenshot:

You can see what this looks like when the Close Date for an opportunity record is within date in the following screenshot:

The Close Date Valid 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.

You can see what this looks like within a list view when the list of opportunity records are either overdue or within date for the CLOSE DATE VALID column, as shown in the following screenshot:

The use of particular colors to represent certain states has become common place throughout the world. Red generally conveys danger and, in the ubiquitous traffic light signal, red means stop.

Continuing with the theme of traffic signal colors, and the use of red for stop, green for go, and yellow for proceed with caution, we can see how these colors can be used to represent statuses and to flag or highlight a current state or situation graphically.

In this recipe, we will display an image derived by a formula field that shows whether the Case Priority is high, medium, or low.

Carry out the following steps to create a formula field to display Salesforce images to graphically show the priority of case records:

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 Case customization setup page, by clicking the following: Objects and Fields | Object Manager | Case | 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.
6. Click Next.

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

7. Type Priority 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 Priority_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:

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

Priority Graphic for the Case, for High, Medium or Low. 

For high priority cases a red flag is displayed; for medium an orange is shown and for a low a green flag is shown. 

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

IMAGE  

(  

 IF( ISPICKVAL(Priority,"Low"), 

   "/img/samples/flag_green.gif",  

     IF( ISPICKVAL(Priority,"Medium"), 
       "/img/samples/flag_yellow.gif",  
         "/img/samples/flag_red.gif"  
       )  
       ), 
       "", 15, 15  
)

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

Field to display an image according to whether the Case Priority is Low, Medium, or High 

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

Field to display an image according to whether the Case Priority is Low, Medium, or High 

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 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. Finally, click Save.

The case record formula field graphic is dynamically generated based on the selected priority value and appears on both case detail and edit pages.

You can see what this looks like when the case record Priority is set to Low in the following screenshot:

You can see what this looks like when the case record Priority is set to Medium in the following screenshot:

You can see what this looks like when the case record Priority is set to High in the following screenshot:

The Priority 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.

You can see what this looks like within a list view when the list of case records are either High, Medium, or Low for the PRIORITY GRAPHIC column, as shown in the following screenshot:

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.

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.

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.

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.

11. Click Save.

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:

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):

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

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.

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:

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.

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:

This recipe shows the steps for rendering a credit score graphically using a Google Chart contained within a custom Salesforce CRM formula field. Here we are using a dial-type chart from Google called a Google-O-Meter chart.

The Google-O-Meter is a gauge that points toward a single value on a range. More details can be found at https://developers.google.com/chart/image/docs/gallery/googleometer_chart#introduction.

First, we create a custom account credit score which will feed the values rendered in the graphical range.

Carry out the following steps to create a custom Credit Score field on the Account object:

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. Choose Number from the Data Type options.
6. Click Next.

We will be presented with the Step 2. Enter the details page.

7. Enter Credit Score in the Field Label.
8. Enter 3 in the Length field.

Accept the default option of 0 in the Decimal Places field, as shown in the following screenshot:

9. Optionally, enter a value in the Description field.
10. Optionally, enter a value in the Help Text field.
11. Click Next.

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

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

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

14. 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.
15. Finally, click Save.

Carry out the following steps to create an account Credit Score formula field that uses the data contained in a custom field to display a Google Chart graphic:

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.
4. Locate the Fields & Relationships section on the right of the page.
5. Click New.

We are presented with the Step 1. Choose the field type page.

6. Select the Formula option.
7. Click Next.

We are presented with the Step 2. Choose output type page.

8. Type Credit Score Graphic in the Field Label textbox.
9. Click on the Field Name. When clicking out of the Field Label textbox, the Field Name is automatically filled with the value Credit_Score_Graphic.
10. Set the Formula Return Type as Text.
11. Click Next.

We are presented with the Step 3. Enter formula page.

12. Paste the following code in the formula edit box (as shown in the next screenshot):

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

Google Chart type Google-O-meter 

  
***********************************************************/ 
IF( 
  ISNUMBER( TEXT(Credit_Score__c) ),  
    IMAGE(  
      "http://chart.apis.google.com/chart?cht=gm" & 
      "&chxl=0:|0|50|100&chxt=y&chs=200x120&chls=2|10" &  
      "&chd=t:" & TEXT((Credit_Score__c)) & 
      "&chl=" & TEXT(Credit_Score__c), "Credit Score Graphic" 
    ), 
  "Not Specified" 
)

13. In the Blank Field Handling section, select the option Treat blank fields as blanks, as shown in the following screenshot:

14. Optionally, enter a value in the Description field.
15. Optionally, enter a value in the Help Text field.
16. Click Next.

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

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

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

19. 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.
20. Finally, click Save.

Navigate to an account record page and enter the value 95 in the custom Credit Score number field. Upon saving, the account detail page displays the Credit Score Graphic image, as shown in the following screenshot:

Navigate to an account record page and enter the value 23 in the Credit Score number field. Upon saving, the account detail page displays the Credit Score Graphic image, as shown in the following screenshot:

Describing each part of the Google Chart code in the formula field gives the following:

/*********************************************************** 
Google Chart type Google-O-meter 
  
***********************************************************/ 
IF( 
  ISNUMBER( TEXT(Credit_Score__c) ),  
    IMAGE(  
      "https://chart.apis.google.com/chart?cht=gm" & 
      "&chxl=0:|0|50|100&chxt=y&chs=200x120&chls=2|10" &  
      "&chd=t:" & TEXT((Credit_Score__c)) & 
      "&chl=" & TEXT(Credit_Score__c), "Credit Score Graphic" 
    ), 
"Not Specified" 
) 

The comment section to describe the code in the formula is:

/*********************************************************** 
Google Chart type Google-O-meter 
  
***********************************************************/

Check that the Credit Score contains a number. If so, then continue to build the Google Chart code. If there is no valid number, then return the value Not Specified:

IF( 
  ISNUMBER( TEXT(Credit_Score__c) ),  
<.........................................> 
"Not Specified" 
) 

The Google Chart image construction is as follows:

    IMAGE(  
      "https://chart.apis.google.com/chart?cht=gm" & 
      "&chxl=0:|0|50|100&chxt=y&chs=200x120&chls=2|10" &  
      "&chd=t:" & TEXT((Credit_Score__c)) & 
      "&chl=" & TEXT(Credit_Score__c), "Credit Score Graphic" 
    ), 

Use the Google Chart URL https://chart.apis.google.com/chart?.
Specify the chart type gm (Google-O-Meter):

cht=gm 

Set the labels for the chart:

chxl=0:|0|50|100 

Specify using the y axis:

chxt=y 

Set the dimensions for the chart (width x height):

chs=200x120 

Specify the arrow line width and arrow head (2px line and small arrow head):

chls=2|10 

Set the data value passed to the graph (the data from the Credit Score field is passed):

chd=t:" & TEXT((Credit_Score__c)) 

Specify the data label on the chart (the data from the Credit Score field is passed):

chl=" & TEXT(Credit_Score__c)

The Credit Score 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.

You can see what this looks like within a list view when the list of account records is set with various scores on the CREDIT SCORE GRAPHIC column, as shown in the following screenshot:

In this recipe, we will detail the steps to render an account credit score graphically using JavaScript and CSS within a Visualforce page.

We will add the Visualforce page as a component onto a Salesforce Account page using the Lightning App Builder and the image will appear on the main Account page as well as in the detail section of the page.

First, we create a custom Account Credit Score, which will feed the values rendered in the graphical range.

Carry out the following steps to create a custom Credit Score field on the Account object:

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. Choose Number from the Data Type options.
6. Click Next.

We will be presented with the Step 2. Enter the details page.

7. Enter Credit Score in the Field Label.
8. Enter 3 in the Length field.

9. Optionally, enter a value in the Description field.
10. Optionally, enter a value in the Help Text field.
11. Click Next.

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

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

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

14. 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.

15. Finally, click Save.

Carry out the following steps to create a Visualforce page along with HTML and JavaScript code that will render an account credit score graphically:

1. 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.

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

3. In the resulting Developer Console window, click on File.
4. Click on New.
5. Click on the Visualforce Page, as shown in the following screenshot:

We will be presented with a New Apex Page dialog.

6. Enter CreditScore for the name of your new Apex Page.
7. Click on OK, as shown in the following screenshot:

8. Paste the following code:

<apex:page standardController="Account"> 
<style> 
  td.no_border{border:none} 
  td.green{background-color:#00FF00; border:none} 
  td.red{background-color:#FF0000; border:none} 
  td.grey{background-color:#DDDDDD; border:none} 
</style>  
<script>  
  window.addEventListener('DOMContentLoaded', function() { 
    var iLimit = {!Account.Credit_Score__c}; 
    var sHTML ; 
    var iThreshold = 40; 
    sHTML = '<table>'; 
    sHTML += '<tr>'; 
    sHTML += '<td class="no_border">0%</td>';    
    for(var i=0; i<100; i=i+5){ 
      if( iLimit <= iThreshold ){ 
        if( i<iLimit ) 
          sHTML += '<td class="red" nowrap="nowrap">&nbsp;</td>'; 
         else 
          sHTML += '<td class="grey" nowrap="nowrap">&nbsp;
          </td>'; 
        }else{ 
          if( i<iLimit ) 
          sHTML += '<td class="green" nowrap="nowrap">&nbsp;
          </td>'; 
         else 
           sHTML += '<td class="grey" nowrap="nowrap">&nbsp;
           </td>'; 
        } 
      } 
    sHTML += '<td class="no_border">100%</td></tr></table>'; 
    if( iLimit >= 0 ){ 
      document.getElementById("CreditScore").innerHTML = sHTML +
      "Credit Score : " + iLimit + "%"; 
    } 
  }); 
</script> 
<div id="CreditScore">Credit Score is not within limits</div> 
</apex:page>

9. Click on File.
10. Click on Save, as shown in the following screenshot:

Now set the profile security and Lightning accessibility settings for the Visualforce page by carrying out the following steps:

1. 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.

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

3. Type the text visualforce in the Quick Find search box, as shown in the following screenshot:

4. Click on Visualforce Pages.
5. Click on Security for the CreditScore Visualforce Page.
6. Click on Save.
7. Click on Edit.
8. Check the Available for Lightning Experience, Lightning Communities, and the mobile app checkbox.

9. Click on Save, as shown in the following screenshot:

10. Navigate to an Accounts page.
11. Click on the Setup gear icon.

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

12. Click on Edit Page, as shown in the following screenshot:

After having clicked Edit Page, you will be presented with the Lightning App Builder screen for the Account page, as shown in the following screenshot:

13. Drag the Visualforce component from the left-hand components pane to the canvas in the top right position.
14. Select CreditScore in the Visualforce Page Name.
15. Type Financial Assessment for the Label.
16. Set the Height (in pixels) field to 50.
17. Click on Save.
18. Click on Activation..., as shown in the following screenshot:

If this is the first time you have saved the Account page, instead of the previous step, you will have been presented with a Page Saved dialog. In this scenario, carry out the following steps:

1. Click on Activate, as shown in the following screenshot:
   
2. Click on Assign as Org Default, as shown in the following screenshot:
   
3. Click on Save, as shown in the following screenshot:

Find an account record and within the Account detail page, enter the value 85 in the custom Credit Score number field.

Navigate from the detail page to the main Account page and refresh the page to reveal the Credit Score image of 85% in the top-right section, as shown in the following screenshot:

Find an account record and, within the Account detail page, enter the value 40 in the custom Credit Score number field.

Navigate from the detail page to the main account page and refresh the page to reveal the Credit Score image of 40% in the top-right section, as shown in the following screenshot: