Star Rating Field Using Formula in Salesforce

Here is an example of Star Rating field using Formula in Salesforce. In below example I’m displaying the Star Rating, based on a Student’s grade.

In Student custom object, I have created a Picklist Field.
Label: Grade
Type: Picklist
Values:

0
1
2
3
4
5

And then I have created a Formula Field on the same Student object. This is to represent the Star Rating.
Label: Rating
Type: Formula
Formula:

IMAGE(
IF(TEXT(Grade__c) = '0', "/img/samples/stars_000.gif",
IF(TEXT(Grade__c) = '1', "/img/samples/stars_100.gif",
IF(TEXT(Grade__c) = '2', "/img/samples/stars_200.gif",
IF(TEXT(Grade__c) = '3', "/img/samples/stars_300.gif",
IF(TEXT(Grade__c) = '4', "/img/samples/stars_400.gif",
IF(TEXT(Grade__c) = '5', "/img/samples/stars_500.gif",
"/img/samples/stars_000.gif"
)))))),
'Rating Level')

Output:

Progress Bar Field Using Formula in Salesforce

Here is an example of ‎Progress Bar field using Formula in Salesforce. In below example I’m displaying the percentage progress bar, based on a Student’s scored out of total marks.

Percentage Formula Field:

IMAGE("/img/samples/color_green.gif","green",10,((Scored__c/Total_Marks__c)*100)) &
IMAGE("/img/samples/color_red.gif","red",10, 100 - ((Scored__c/Total_Marks__c)*100)) &
" " & TEXT((Scored__c/Total_Marks__c)*100) & "%"

Output:

Find Out Which Button was Clicked in Lightning Component

To find out which button was clicked in a component containing multiple buttons, we can use Component.getLocalId().

Here is an example with multiple lightning:button components. Each button has a unique local ID, set by an aura:id attribute.

Sample Lightning Component:

<!--Sample.cmp-->
<aura:component>
    <aura:attribute name="clickedButton" type="String" />
    <div class="slds-m-around_xx-large">
        <p><b>You Clicked: {!v.clickedButton}</b></p>
        <br/>
        <lightning:button aura:id="button1" name="btn1" label="Click Me" onclick="{!c.buttonClick}"/>
        <lightning:button aura:id="button2" name="btn2" label="Click Me" onclick="{!c.buttonClick}"/>
    </div>
</aura:component>

In the JS controller, we can use one of the following methods to find out which button was clicked.
event.getSource().getLocalId() returns the aura:id of the clicked button.
event.getSource().get("v.name") returns the name of the clicked button.

Sample Lightning Component JS Controller:

({
    buttonClick : function(cmp, event, helper) {
        var clickedBtn = event.getSource().getLocalId();
        alert(clickedBtn);
        cmp.set("v.clickedButton", clickedBtn);
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Sample />
</aura:application>

Output:

Salesforce IMAGE Function in Formula Field

In Salesforce formula field using IMAGE(image_url, alternate_text, height, width) function, we can insert an image with alternate text and height/width specifications.

In below example, I’ve created a custom field “Priority__c” in “Case” object with below formula. This formula displays a red, yellow, or green flag image to indicate case priority High, Medium or Low.

Formula Field:

	 
IF(TEXT(Priority) = 'High', IMAGE("/img/samples/color_red.gif", "Red", 10 , 50), 
IF(TEXT(Priority) = 'Medium', IMAGE("/img/samples/color_yellow.gif", "Yellow", 10, 50), 
IF(TEXT(Priority) = 'Low', IMAGE("/img/samples/color_green.gif", "Green", 10, 50), 
NULL)))

Output:

jQuery Data Tables in Visualforce Page

Here is an example of ‎jQuery Data tables using in Visualforce. It will give you the pagination and search functionality in Visualforce page. Here I’m displaying list of account records.

Apex Class:

public class SampleController{
    public List<Account> accList {get; set;}
    
    public SampleController(){
    accList = [SELECT Name, AccountNumber, Phone FROM Account LIMIT 10000];
    }

}

Visualforce Page:

<apex:page Controller="SampleController" readOnly="true" tabStyle="Account" sidebar="false">
    <head>
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js"/>
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"/>
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css"/>
        <script>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            var accTable = j$('[id$="accTable"]').DataTable({
                
            });
        });
        </script>
    </head>
    <body>
        <table id="accTable" class="display">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Account Number</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!accList}" var="acc">
                    <tr>
                        <td>{!acc.Name}</td>
                        <td>{!acc.AccountNumber}</td>
                        <td>{!acc.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>
</apex:page>

Output: