Tag Archives: Salesforce

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:

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:

Iterate Map values in Lightning Component

Apex Controller:
Create below apex controller to get the Map value.

public class MapAuraController {
    
    @AuraEnabled
    public static map<Integer, String> getMap(){
        Map<Integer, String> companyMap = new Map<Integer, String>();
        //Put value in Map 
        companyMap.put(1,'Salesforce');
        companyMap.put(2,'SAP');  
        companyMap.put(3,'Oracle');  
        companyMap.put(4,'Microsoft');  
        //return map  
        return companyMap;
    }
}

Child Component:
Create below Child.cmp for display the Map key values on component.

<!--Child.cmp-->
<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="map" type="map"/>
    <aura:attribute name="key" type="string"/>
    <aura:attribute name="value" type="string"/>
    <p>{!v.key} - {!v.value}</p>
</aura:component>

Child Component JS Controller:
Create below JavaScript Controller for above Child.cmp component.

({
    doInit : function(component, event, helper) {
        var key = component.get("v.key");
        var map = component.get("v.map");
        component.set("v.value" , map[key]);
    },
})

Parent Component:
Create below Parent.cmp, this is the main component. By this component we retrieve the map value from apex controller and pass key and map attribute to Child.cmp component.

<!--Parent.cmp-->
<aura:component controller="MapAuraController">
    <!--declare attributes-->
    <aura:attribute name="keyList" type="List"/>
    <aura:attribute name="companyMap" type="map"/>
    
    <ui:button label="Iterate Map" press="{!c.getMapCompany}"/>
    
    <!--Iterate the mapCompany-->
    <aura:iteration items="{!v.keyList}" var="key" >
        <c:Child map="{!v.companyMap}" key="{!key}"/>
    </aura:iteration>
</aura:component>

Parent Component:
Create below JavaScript Controller for above Parent.cmp component.

({
    getMapCompany: function(component, event, helper) {
        //call apex class method 
        var action = component.get('c.getMap');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                //Create an empty array to store the map keys 
                var arrayMapKeys = [];
                //Store the response of apex controller (return map)     
                var result = response.getReturnValue();
                //Set the store response[map] to component attribute, which name is map and type is map.   
                component.set('v.companyMap', result);
                
                for (var key in result) {
                    arrayMapKeys.push(key);
                }
                //Set the list of keys.     
                component.set('v.keyList', arrayMapKeys);
            }
        });
        // enqueue the Action   
        $A.enqueueAction(action);
    }
})

Lightning Test App:

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

Output:

Map Attribute in Lightning Component

Sample Component:

<!--Sample.cmp-->
<aura:component>
    <aura:attribute name="map" type="Map" default="{str1:null,str2:null,obj:null}"/>
    <aura:attribute name="str1" type="String"  default="{!v.map.str1}"/>
    <aura:attribute name="str2" type="String" default="{!v.map.str2}"/>
    <aura:attribute name="obj" type="Contact" default="{!v.map.obj}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <p><b>{!v.map.str1}</b></p>
    <p><b>{!v.map.obj.FirstName}</b></p>
    <p><b>{!v.map.str2}</b></p>
    <p><b>{!v.map.obj.LastName}</b></p>
</aura:component>

Sample Component JS Controller:

({
    doInit: function(cmp, event, helper) {
        //Set the attribute value.
        var map = cmp.get("v.map");
        map['str1'] = 'FirstName';
        map['str2'] = 'Lastname';
        var obj = {"FirstName":"Biswajeet","LastName":'Samal'};
        map['obj'] = obj;
        cmp.set("v.map", map);
    }
})

Lightning App:

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

Output: