
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:
- 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.
- Click the Developer Console option, as shown in the following screenshot:

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

We will be presented with a New Apex Page dialog.
- Enter CreditScore for the name of your new Apex Page.
- Click on OK, as shown in the following screenshot:

- 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"> </td>'; else sHTML += '<td class="grey" nowrap="nowrap">
</td>'; }else{ if( i<iLimit ) sHTML += '<td class="green" nowrap="nowrap">
</td>'; else sHTML += '<td class="grey" nowrap="nowrap">
</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>
- Click on File.
- 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:
- 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.
- Click the Setup option, as shown in the following screenshot:

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

- Click on Visualforce Pages.
- Click on Security for the CreditScore Visualforce Page.
- Click on Save.
- Click on Edit.
- Check the Available for Lightning Experience, Lightning Communities, and the mobile app checkbox.
- Click on Save, as shown in the following screenshot:

- Navigate to an Accounts page.
- Click on the Setup gear icon.
The Setup gear icon is located in the top right-hand area of the Account page.
- 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:

- Drag the Visualforce component from the left-hand components pane to the canvas in the top right position.
- Select CreditScore in the Visualforce Page Name.
- Type Financial Assessment for the Label.
- Set the Height (in pixels) field to 50.
- Click on Save.
- 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:
- Click on Activate, as shown in the following screenshot:
- Click on Assign as Org Default, as shown in the following screenshot:
- Click on Save, as shown in the following screenshot:
