Category Archives: Salesforce

Tooltip or Helptext in Lightning Component

A lightning:helptext component displays an icon with a popover containing a small amount of text describing an element on screen. The popover is displayed when you hover or focus on the icon that’s attached to it. This component is similar to a tooltip and is useful to display field-level help text. HTML markup is not supported in the tooltip content.

Sample Lightning Component:

<!--Sample.app-->
<aura:component >
    <div class="slds-m-around_xx-large">
        <div class="slds-form-element">
            <lightning:input aura:id="email" placeholder="Please enter your email" required="true" type="email" label="Email" name="email" />
            <!--Helptext and tooltip component-->
            <lightning:helptext iconName="utility:info" content="Your email address will be your login name" />
        </div>
    </div>
</aura:component>

Lightning Test App:

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

Output:

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: