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.

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

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

We will be presented with a New Apex Page dialog.

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

1. 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> 
<p id="CreditScore">Credit Score is not within limits</p> 
</apex:page>

1. Click on File.
2. 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.

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

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

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

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

1. Navigate to an Accounts page.
2. Click on the Setup gear icon.

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

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

1. Drag the Visualforce component from the left-hand components pane to the canvas in the top right position.
2. Select CreditScore in the Visualforce Page Name.
3. Type Financial Assessment for the Label.
4. Set the Height (in pixels) field to 50.
5. Click on Save.
6. 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: