As you know Lightning uses a java-script based aura framework. It makes it very easy to plugin with any other java-script libraries like React and Bootstrap. Also , you can use popular analytics and map libraries like Leaflet and D2 Charts.
In this example we will create a lightning component which will allow user to follow the records , this is different from salesforce's follow icon , as part of this component we will create a field (Follow) on Account Object , which will be checked if a user follows that record from Salesforce1 mobile app or web. We will use this bootstrap's "glyphicon" icon.
In this example you can also get familiar with how to use Application events , embed bootstrap and
JQuery in your lightning component.
We will fetch few accounts from system and use this icon to follow the records. Here is how it will appear in Salesforce1 mobile app.
Prerequisites :-
1. Download latest jQuery and add in static resource and
2. Download latest Bootstap and add in static resource
Lightning Code :-
Create a custom field "Follow" of type checkbox on Account object. Refer Screenshot below
a.) FollowAccountApp.app (Create a Lightning Application and extend force:SLDC to include Lightning design system)
<aura:application extends="force:slds">
<c:Follow/>
</aura:application>
b.) Follow.cmp (Master Component of the application)
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction"
controller="FollowController"
access="global">
<ltng:require scripts="/resource/Scripts/js/jquery/jquery-2.2.4.min.js,
/resource/Scripts/util/js/bootstrap.min.js"
styles="/resource/Scripts/util/css/bootstrap.min.css"
/>
<!-- Handle component initialization in a client-side controller -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="accounts" type="Account[]" />
<aura:handler event="c:StarEvt" action="{!c.setStatus}"/>
<aura:handler event="c:NoStarEvt" action="{!c.setStatus}"/>
<div class="panel panel-default" >
<aura:if isTrue="{!v.accounts.length > 0}">
<aura:iteration var="act" items="{!v.accounts}">
<c:AccountTile account="{!act}"/>
</aura:iteration>
</aura:if>
<aura:if isTrue="{!v.accounts.length == 0}">
<lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
<ui:outputText value="No Accounts found" />
</lightning:layoutItem>
</aura:if>
</div>
</aura:component>
c.) FollowController.js
({
doInit : function(component, event, helper) {
// Retrieve Accounts when component gets initialized
helper.getAccounts(component);
},
setStatus : function (component, event, helper){
var act = event.getParam("account");
var recordId = act.Id
var action = component.get("c.followAccount");
action.setParams({
"acctId": recordId
});
action.setCallback(this, function(response){
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
var res = response.getReturnValue();
}
});
$A.enqueueAction(action);
},
})
d.) FollowHelper.js
({
getAccounts : function(component) {
var action = component.get("c.getFewAccounts");
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.accounts", response.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
e.) AccountTile.cmp
<aura:component >
<aura:attribute name="account" type="Account" />
<div class="panel-heading">{!v.account.Name}</div>
<div class="panel-body">
<aura:if isTrue="{!v.account.Follow__c}">
<!-- content renders if true -->
<c:NoStar account="{!v.account}"/>
<aura:set attribute="else">
<!-- content renders if false -->
<c:Star account="{!v.account}"/>
</aura:set>
</aura:if>
</div>
</aura:component>
f.) FollowController.cls (Component Controller class)
public class FollowController {
@AuraEnabled
public static List<Account> getFewAccounts(){
return [SELECT Id, Name, Follow__c
FROM Account limit 10 ];
}
@AuraEnabled
public static Void followAccount(String acctId) {
if(!String.isBlank(acctId)){
List<Account> accounts = [Select id , name , Follow__c from Account
where id = :acctId ];
Boolean result = (accounts[0].Follow__c) ? false : true ;
accounts[0].Follow__c = result ;
update accounts[0];
}
}
}
g.) StarEvt.evt (Application event which will fire one user click on the star icon)
<aura:event type="APPLICATION" description="Event template">
<aura:attribute name="account" type="Account"/>
</aura:event>
h.) Star.cmp
<aura:component >
<aura:attribute name="account" type="Account" />
<div class="class_star" onclick="{!c.setStar}">
<span class="glyphicon glyphicon-star-empty" ></span>
</div>
</aura:component>
i.) StarController.js
({
setStar : function(component, event, helper) {
var target = jQuery(event.target);
if(target.hasClass("glyphicon")){
target.toggleClass("glyphicon-star-empty").toggleClass("glyphicon-star");
} else if(target.hasClass("class_star")){
target.find(".glyphicon").toggleClass("glyphicon-star-empty").toggleClass("glyphicon-star");
}
var act = component.get("v.account");
var evt = $A.get("e.c:StarEvt");
evt.setParams({"account": act});
evt.fire();
},
})
j.) NoStarEvt.evt (Application event which will fire one user click on the star icon)
<aura:event type="APPLICATION" description="Event template">
<aura:attribute name="account" type="Account"/>
</aura:event>
k.) NoStar.cmp
<aura:component >
<aura:attribute name="account" type="Account" />
<div class="class_star" onclick="{!c.setNoStar}">
<span class="glyphicon glyphicon-star" ></span>
</div>
</aura:component>
l.) NoStarController.js
({
setNoStar : function(component, event, helper) {
var target = jQuery(event.target);
if(target.hasClass("glyphicon")){
target.toggleClass("glyphicon-star-empty").toggleClass("glyphicon-star");
} else if(target.hasClass("class_star")){
target.find(".glyphicon").toggleClass("glyphicon-star-empty").toggleClass("glyphicon-star");
}
var act = component.get("v.account");
var evt = $A.get("e.c:NoStarEvt");
evt.setParams({"account": act});
evt.fire();
},
})
Comments
Post a Comment