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


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

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",
'Rating Level')


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) & "%"


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:

    <aura:attribute name="clickedButton" type="String" />
    <div class="slds-m-around_xx-large">
        <p><b>You Clicked: {!v.clickedButton}</b></p>
        <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}"/>

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("") returns the name of the clicked button.

Sample Lightning Component JS Controller:

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

Lightning Test App:

<aura:application extends="force:slds">
    <c:Sample />


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


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">
        <apex:includescript value="//"/>
        <apex:includescript value="//"/>
        <apex:stylesheet value="//"/>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            var accTable = j$('[id$="accTable"]').DataTable({
        <table id="accTable" class="display">
                    <th>Account Number</th>
                <apex:repeat value="{!accList}" var="acc">