Dynamic Help Text on Lightning Component

Dynamic Help Text on 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: