Author Archives: Biswajeet

About Biswajeet

Biswajeet is my Name, Success is my Aim and Challenge is my Game. Risk & Riding is my Passion and Hard Work is my Occupation. Love is my Friend, Perfection is my Habit and Smartness is my Style. Smiling is my Hobby, Politeness is my Policy and Confidence is my Power.

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: