Building an account credit score graphically with code

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.

You can omit the steps in the following Getting ready section if you have previously carried out the steps in the Getting ready section of the Measuring account credit scores graphically using a Google image chart recipe.

Getting ready

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

How to do it...

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:

How it works...

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: