Dynamic Help Text on Salesforce Lightning Component

DYNAMIC HELP TEXT ON SALESFORCE LIGHTNING COMPONENT

Business Case:

Adam is working as a Senior Application Developer in Universal Containers. Company wants to move their traditional (classic version )recruitment app to lightning. Adam needs to do a Proof of Concept by building a custom lighting component for creating the Candidate’s lightning form with dynamic help text icon to show information on hover the icon.

Solution:

Adam decided to create a lightning component which would display a form with help Text icon to showing help text on hover the form element.
Finishing all the pre-requisites.
Creating Lightning Component.
Creating Lightning Controller for the component.
Creating Apex Class and create method.
Creating Lightning pages containing Component.
Test the Process

Create Lightning Component :

The first thing which We are going to do is creating a lightning component so that from here, we get an idea where and what to do next.
Go to setup->Developer console, At Developer console Click on New to

create lightning component :


<aura:component controller="FormViewController" >

<!-- Include Static Resource-->

<ltng:require styles="/resource/bootstrap/css/bootstrap.min.css" scripts="/resource/bootstrap/js/jquery.js"/>

<!-- Define Attribute-->

<aura:attribute name="helpText_Name" type="String" default="" />

<aura:attribute name="helpText_Email" type="String" default="" />

<aura:attribute name="helpText_Phone" type="String" default="" />

<aura:attribute name="Candidate" type="cga__Candidate__c" default="{'sobjectType': 'cga__Candidate__c','Name__c': '','cga__Candidate_Email__c': '', 'cga__Preferred_Phone__c': ''}"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-align_absolute-center" style="height:5rem"><b><h1>Please Enter The Candidate Information</h1></b></div>

<div class="form-group" style="height:5rem">

<label>Name</label>

<lightning:helptext content="{!v.helpText_Name}"/>

<lightning:input type="Text" class="form-control" value="{!v.Candidate.Name__c}"/>

</div>

<div class="form-group" style="height:5rem">

<label>Email Address</label>

<lightning:helptext content="{!v.helpText_Email}"/>

<lightning:input type="Text" class="form-control" value="{!v.Candidate.cga__Candidate_Email__c}"/>

</div>

<div class="form-group" style="height:5rem">

<label>Phone</label>

<lightning:helptext content="{!v.helpText_Phone}"/>

<lightning:input type="Text" class="form-control" value="{!v.Candidate.cga__Preferred_Phone__c}"/>

</div>

<div class="col-md-4 text-center">

<ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>

</div>

</aura:component>

Create Controller for the Lightning Component


({

doInit: function(component) {

//call apex

var action = component.get('c.getHelpText');

action.setCallback(this, function(response){

var resp = response.getReturnValue();

component.set("v.helpText_Name", resp.Name);

component.set("v.helpText_Email", resp.Email);

component.set("v.helpText_Phone", resp.Phone);

});

$A.enqueueAction(action);

}

})


Create Apex class and define method to get the dynamic help text


public class FormViewController

{

@AuraEnabled

public static Map<string, string=""> getHelpText() {

String helpText_Name = cga__Candidate__c.Name__c.getDescribe().getInlineHelpText();

String helpText_Email = cga__Candidate__c.cga__Candidate_Email__c.getDescribe().getInlineHelpText();

String helpText_Phone = cga__Candidate__c.cga__Preferred_Phone__c.getDescribe().getInlineHelpText();</string,>


return new Map<string,string>{'Name'=>helpText_Name,'Email'=>helpText_Email,'Phone'=>helpText_Phone};
}
}</string,string>

Output: