You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Building a Salesforce Lightning component Application (Cricforce)


Submitted by Admin on 06/30/2015

Lightning Component:

Lightning component provides a client-side framework to design mobile apps, and you can easily develop new apps for mobile devices running in the Salesforce1. Lightning component framework is built on the Aura framework, and by using the Aura framework you can build web apps hosted on your own server. This framework includes a set of built-in components, and you can assemble and configure these components to build new components in an app. These components are rendered to produce HTML DOM elements on the browser

Cricket Score app in Lightning:

In this article, I have documented the steps for creating Simple Cricket Score app using Lightning Component, and got real-time data from the cricinfo.com server. In addition, I have used XML and JSON for parsing the data from the server. By using this lightning component, we can use this app on any types of devices such as mobile, tablet and PC. This app will show the score for each and every ball along with all the data about the currently running matches.

1. Create Named Credentials:

Create two named credentials for making callout to the server. Under the Build section, navigate to Security Controls  Named Credentials. Click New Named Credential button and enter the values as shown in the image below.

(i). Named Credential 1 (Cricinfo)

(ii) Named Credential 2 (espn)

2. Create a Wrapper Class for deserialization (CricketScoreWrapper)

Copy and paste the Wrapper class from my GitHub repository

(https://raw.githubusercontent.com/parthiban019/samplejson/master/CricketScoreWrapper)

3. Create another Wrapper class for Display purpose (DisplayWrapperClass)

public class DisplayWrapperClass{

@AuraEnabled

public String matchDescription{get;set;}

@AuraEnabled

public String matchOfficials{get;set;}

@AuraEnabled

public String matchStatus{get;set;}

@AuraEnabled

public String playingTeams{get;set;}

@AuraEnabled

public String currentSummary{get;set;}

@AuraEnabled

public String seriesName{get;set;}

@AuraEnabled

public String matchType{get;set;}

@AuraEnabled

public String hostCountry{get;set;}

@AuraEnabled

public String teamAPlayers{get;set;}

@AuraEnabled

public String teamBPlayers{get;set;}

@AuraEnabled

public String teamAName{get;set;} 

@AuraEnabled

public String teamBName{get;set;}

@AuraEnabled

public String matchScore{get;set;}

@AuraEnabled

public String matchTimings{get;set;}

@AuraEnabled

public String team1Image{get;set;}

@AuraEnabled

public String team2Image{get;set;}

@AuraEnabled

public String striker1Image{get;set;}

@AuraEnabled

public String striker1Name{get;set;}

@AuraEnabled

public String striker1handstyle{get;set;}

@AuraEnabled

public String striker1position{get;set;}

@AuraEnabled

public String striker1ballfaced{get;set;}

@AuraEnabled

public String striker1runs{get;set;}

@AuraEnabled

public String striker2Image{get;set;}

@AuraEnabled

public String striker2Name{get;set;}

@AuraEnabled

public String striker2handstyle{get;set;}

@AuraEnabled

public String striker2position{get;set;}

@AuraEnabled

public String striker2ballfaced{get;set;}

@AuraEnabled

public String striker2runs{get;set;}

@AuraEnabled

public String bowlerImage{get;set;}

@AuraEnabled

public String bowlerName{get;set;}

@AuraEnabled

public String bowlerMaiden{get;set;}

@AuraEnabled

public String bowlerhandstyle{get;set;}

@AuraEnabled

public String bowlerOvers{get;set;}

@AuraEnabled

public String bowlerConceeded{get;set;}

@AuraEnabled

public String bowlerpace{get;set;}

@AuraEnabled

public String bowlerWickets{get;set;}

@AuraEnabled

public Integer showImages{get;set;}

}

5. Create a Server-Side Controller for the Lightning component (CricketScoreController)

public class CricketScoreController{

public static list <CricketScoreWrapper.xmlData> cricketWrapperList =new list <CricketScoreWrapper.xmlData>();

@AuraEnabled

public static String getXmlData(){

http h = new Http();

HttpRequest req = new HttpRequest();

req.setEndpoint('callout:cricinfo/rss/livescores.xml');

req.setMethod('GET');

HttpResponse res = h.send(req);

return res.getBody();

}

@AuraEnabled

public static List<CricketScoreWrapper.xmlData> Cricketmatchdata(){

String xmlValue = getXmlData();

Dom.Document doc = new Dom.Document();

doc.load(xmlValue);

for(dom.XmlNode xmlNode : doc.getRootElement().getChildElement('channel',null).getchildElements()){

if(xmlNode.getname() == 'item'){

CricketScoreWrapper.xmlData cw =new CricketScoreWrapper.xmlData();

cw.matchScore = xmlNode.getChildElements()[0].getText().replaceAll('[*&0-9/]','');

cw.matchId = xmlNode.getChildElements()[3].getText() != null ? xmlNode.getChildElements()[3].getText().split('.html')[0].split('match/')[1] : null;

cw.matchLink = xmlNode.getChildElements()[3].getText();

cricketWrapperList.add(cw);

}

}

return cricketWrapperList;

}



@AuraEnabled

public static list<displayWrapperClass> CricketScore(String matchScore){

String matchID;

for(CricketScoreWrapper.xmlData xml:Cricketmatchdata()){

if(matchScore.equalsIgnoreCase(xml.matchScore)){

matchID = xml.matchId;

break;

}

}

http h = new Http();

HttpRequest req = new HttpRequest();

req.setEndpoint('callout:espn/ci/engine/match/'+matchID+'.json');

req.setMethod('GET');

HttpResponse res = h.send(req);

return CricketHelper.buildDisplayWrapper(matchScore,(CricketScoreWrapper)json.deserialize(res.getBody(),CricketScoreWrapper.class));

}

}

 

6. Create a Helper Class for the Server-Side Controller (CricketHelper)

 

public class CricketHelper{

public static list<displayWrapperClass> buildDisplayWrapper(String matchScore,CricketScoreWrapper CricWrap){

list<displayWrapperClass> dwcList =new list<displayWrapperClass>();

displayWrapperClass dwc = new displayWrapperClass();

dwc.matchScore= matchScore;

if(CricWrap != null && CricWrap.description != null){

dwc.matchDescription = CricWrap.description;

}



if(CricWrap != null && CricWrap.match != null && CricWrap.match.ground_name != null && CricWrap.match.country_name != null && CricWrap.match.town_name != null && CricWrap.match.floodlit_name != null){

dwc.hostCountry = CricWrap.match.ground_name+' - '+CricWrap.match.town_name+' / '+CricWrap.match.country_name+' ( '+CricWrap.match.floodlit_name+' )';

}

if(CricWrap != null && CricWrap.match != null && CricWrap.match.hours_string!= null){

dwc.matchTimings = CricWrap.match.hours_string;

}



if(CricWrap != null && CricWrap.series!= null && CricWrap.series!= null && CricWrap.series.size() > 0 && CricWrap.series[0].series_name!= null){

dwc.seriesName = CricWrap.series[0].series_name;

}



if(CricWrap != null && CricWrap.official != null && CricWrap.official.size() > 0){

for(CricketScoreWrapper.official off:CricWrap.official){



if(dwc.matchOfficials == null){

dwc.matchOfficials = off.known_as+' ( '+off.player_type_name+' )';

}

else {

dwc.matchOfficials += ', '+off.known_as+' ( '+off.player_type_name+' )';

}



}

}



if(CricWrap != null && CricWrap.team != null && CricWrap.team.size() > 0 && CricWrap.team[0] != null){

dwc.teamAName = CricWrap.team[0].team_name;

dwc.teamBName = CricWrap.team[1].team_name;

if(CricWrap.team[0].logo_image_path != null && CricWrap.team[0].logo_image_path != '')

dwc.team1Image ='http://p.imgci.com'+CricWrap.team[0].logo_image_path;

if(CricWrap.team[1].logo_image_path != null && CricWrap.team[1].logo_image_path != '')

dwc.team2Image ='http://p.imgci.com'+CricWrap.team[1].logo_image_path;

}



if(CricWrap.team[0].player != null && CricWrap.team[0].player.size() > 0&& CricWrap.team[1].player != null && CricWrap.team[1].player.size() > 0){



for(CricketScoreWrapper.player team:CricWrap.team[0].player){

if(dwc.teamAPlayers == null){



if(team.captain == '1')

dwc.teamAPlayers = team.known_as+'(c)';

if(team.keeper == '1')

dwc.teamAPlayers = team.known_as+'(wk)';

dwc.teamaPlayers =team.known_as;

}

else {

if(team.captain == '1')

dwc.teamAPlayers += ','+team.known_as+'(c)';

if(team.keeper == '1')

dwc.teamAPlayers += ','+team.known_as+'(wk)';

dwc.teamAPlayers +=', '+team.known_as;

}

}



for(CricketScoreWrapper.player team:CricWrap.team[1].player){

if(dwc.teamBPlayers == null){

if(team.captain == '1')

dwc.teamBPlayers = team.known_as+'(c)';



if(team.keeper == '1')

dwc.teambPlayers = team.known_as+'(wk)';

dwc.teamBPlayers =team.known_as;

}

else {

if(team.captain == '1')

dwc.teamBPlayers += ', '+team.known_as+'(c)';

if(team.keeper == '1')

dwc.teamBPlayers += ', '+team.known_as+'(wk)';

dwc.teamBPlayers +=', '+team.known_as;

}

}



}



if(CricWrap.team[0].squad != null && CricWrap.team[0].squad.size() > 0 && CricWrap.team[1].squad != null && CricWrap.team[1].squad.size() > 0){



dwc.teamAName = CricWrap.team[0].team_name;

dwc.teamBName = CricWrap.team[1].team_name;



for(CricketScoreWrapper.squad team:CricWrap.team[0].squad){

if(dwc.teamAPlayers == null){

if(team.captain == '1')

dwc.teamAPlayers = team.known_as+'(c)';

if(team.keeper == '1')

dwc.teamAPlayers = team.known_as+'(wk)';

dwc.teamaPlayers =team.known_as;

}

else {

if(team.captain == '1')

dwc.teamAPlayers += ', '+team.known_as+'(c)';

if(team.keeper == '1')

dwc.teamAPlayers += ', '+team.known_as+'(wk)';

dwc.teamAPlayers +=', '+team.known_as;



}

} 



for(CricketScoreWrapper.squad team:CricWrap.team[1].squad){

if(dwc.teamBPlayers == null){

if(team.captain == '1')

dwc.teamBPlayers = team.known_as+'(c)';

if(team.keeper == '1')

dwc.teambPlayers = team.known_as+'(wk)';

dwc.teamBPlayers =team.known_as;

}

else {

if(team.captain == '1')

dwc.teamBPlayers += ', '+team.known_as+'(c)';

if(team.keeper == '1')

dwc.teamBPlayers += ', '+team.known_as+'(wk)';

dwc.teamBPlayers +=', '+team.known_as;

}

}

}


if(CricWrap != null && CricWrap.live != null && CricWrap.live.status != null){

dwc.matchStatus= CricWrap.live.status;

}

if(CricWrap != null && CricWrap.match != null && CricWrap.match.current_summary != null && CricWrap.match.current_summary != ''){

dwc.currentSummary= CricWrap.match.current_summary;

}

if(CricWrap != null && CricWrap.centre != null && CricWrap.centre.common != null && CricWrap.centre.common.batting != null && CricWrap.centre.common.batting.size() > 0 && CricWrap.centre.common.bowling != null && CricWrap.centre.common.bowling.size() > 0){

Integer loopVar;

dwc.showImages = 1;

for(CricketScoreWrapper.batting bat:CricWrap.centre.common.batting)

{

if(dwc.striker1Image == null && bat.balls_faced != null && bat.hand != null && bat.image_path != null && bat.known_as != null && bat.notout != null && bat.notout == '1' && bat.runs != null ){

dwc.striker1Image = 'http://p.imgci.com'+bat.image_path;

dwc.striker1Name = bat.known_as;

dwc.striker1handstyle = bat.hand;

dwc.striker1position = bat.position;

dwc.striker1ballfaced = bat.balls_faced;

dwc.striker1runs = bat.runs;

loopVar=1;

}

if(loopvar == 1) {loopvar=2;continue;}

if(dwc.striker2Image == null && bat.balls_faced != null && bat.hand != null && bat.image_path != null && bat.known_as != null && bat.notout != null && bat.notout == '1' && bat.runs != null ){

dwc.striker2Image = 'http://p.imgci.com'+bat.image_path;

dwc.striker2Name = bat.known_as;

dwc.striker2handstyle = bat.hand;

dwc.striker2position = bat.position;

dwc.striker2ballfaced = bat.balls_faced;

dwc.striker2runs = bat.runs;

}

}

for(CricketScoreWrapper.bowling bowl:CricWrap.centre.common.bowling)

{

if(bowl.conceded != null && bowl.hand != null && bowl.image_path != null && bowl.known_as != null && bowl.live_current_name != null&& bowl.live_current_name == 'current bowler' && bowl.maidens != null && bowl.overs != null && bowl.pacespin != null && bowl.wickets != null){

dwc.bowlerImage = 'http://p.imgci.com'+bowl.image_path;

dwc.bowlerName= bowl.known_as;

dwc.bowlerhandstyle= bowl.hand;

dwc.bowlerMaiden = bowl.maidens;

dwc.bowlerOvers = bowl.overs;

dwc.bowlerConceeded= bowl.conceded;

dwc.bowlerpace = bowl.pacespin;

dwc.bowlerWickets = bowl.wickets;

}

}

}

dwcList.add(dwc);

return dwcList;

}

}

 

Create a new Lightning Component

 

<aura:component controller="CricketScoreController" implements="force:appHostable" >

<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>

<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

<aura:attribute name="cricketWrapper" type="CricketScoreWrapper.xmlData[]"/>

<aura:attribute name="visible" type="Boolean" default="True" />

<aura:attribute name="backbuttonvisible" type="Boolean" default="false" />

<aura:attribute name="scoreTable" type="DisplayWrapperClass"/>

<br/><br/><hr /><br/><center><ui:outputText class="scoreHeadLine" value="Cricforce"/></center> <br/><hr /><br/>

<aura:renderIf isTrue="{!v.visible}">

<center> <ui:button aura:id="button1" press="{!c.getListOfMatches}" class="headline" label="Get The List Of OnGoing Matches" />

</center>

</aura:renderIf>

<br/>

<div><center><ui:spinner aura:id="spinner"></ui:spinner></center></div>

<aura:renderIf isTrue="{!v.backbuttonvisible}">

<ui:button press="{!c.showMainPage}" class="headline" label="Home" /> <br/><br/>

</aura:renderIf>

<div>

<aura:iteration items="{!v.cricketWrapper}" var="cric1">

<center>

<ui:button press="{!c.ShowScore}" label="{!cric1.matchScore}" class="headline"/>

</center><br></br></aura:iteration>

</div>

<div align="left">

<aura:iteration items="{!v.scoreTable}" var="cric">

<br/><br/>

<center> <img src="{!cric.team1Image}" alt="Image Not Available" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ui:outputText class="teamTitle" value="VS"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="{!cric.team2Image}" alt="Image Not Available" />

</center>

<aura:renderIf isTrue="{!cric.showImages != null}">

<div> <hr/> <hr/>

<center> </center> <br /><br/><br/>

<center> <b> Batting </b> <br/><br/><br/><table align="center">

<tr>

<td cellpadding="0" cellspacing="0"> <img src="{!cric.striker1Image}" alt="Image Not Available" />

<br /><br /> <ui:outputText value="{!cric.striker1Name}"/> &nbsp;&nbsp; <ui:outputText value="{!cric.striker1runs}"/>* (<ui:outputText value="{!cric.striker1ballfaced}"/>)

</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<td cellpadding="0" cellspacing="0"> <img src="{!cric.striker2Image}" alt="Image Not Available" />

<br /><br /> <ui:outputText value="{!cric.striker2Name}"/> &nbsp;&nbsp; <ui:outputText value="{!cric.striker2runs}"/>* (<ui:outputText value="{!cric.striker2ballfaced}"/>)

</td>

</tr>

</table>

</center> <br /> <br />

<center>

<table>

<tr>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<td cellpadding="0" cellspacing="0">

<b> &nbsp;&nbsp;&nbsp;&nbsp;Current Bowler</b> <br/>

<img src="{!cric.bowlerImage}" alt="Image Not Available" />



<br/><br/> <ui:outputText value="{!cric.bowlerName}"/>&nbsp;&nbsp;( <ui:outputText value="{!cric.bowlerOvers}"/>&nbsp;-&nbsp;<ui:outputText value="{!cric.bowlerMaiden}"/>&nbsp;-&nbsp;<ui:outputText value="{!cric.bowlerConceeded}"/>&nbsp;-&nbsp;<ui:outputText value="{!cric.bowlerWickets}"/> )

</td>

</tr>

</table> </center>

<hr/> <hr/> </div></aura:renderIf>

<br/><br/>

<center> <ui:outputText class="scoreHeadLine" value="{!cric.currentSummary}"/> </center>

<br></br>

<br/>

<center> <ui:outputText value="{!cric.matchStatus}" class="scoresubLine"/>

</center><br></br>

<br/>

<b> <ui:outputText class="headline" value="Click To Refresh "/> </b> <ui:button press="{!c.ShowScore}" label="{!cric.matchScore}"/>

<br/><br/>

<b> <ui:outputText value="Venue : "/> </b> <ui:outputText value="{!cric.hostCountry}"/>

<br/><br/><br/>

<b><ui:outputText value="Match : "/> </b> <ui:outputText value="{!cric.matchDescription}"/>

<br/><br/><br/>

<b> <ui:outputText value="Umpires : "/> </b> <ui:outputText value="{!cric.matchOfficials}"/>

<br/><br/><br/>

<b> <ui:outputText value="Timings : "/> </b> <ui:outputText value="{!cric.matchTimings}"/>

<br/><br/><br/>

<b> <ui:outputText value="{!cric.teamAName+'Team Players: '}"/> </b><br/> <br/><br/> <ui:outputText value="{!cric.teamAPlayers}"/>

<br/><br/>

<b> <ui:outputText value="{!cric.teamBName+'Team Players: '}"/> </b> <br/> <br/><br/> <ui:outputText value="{!cric.teamBPlayers}"/>

</aura:iteration>

</div>

</aura:component>

 

Create a Lightning Component Client-Side controller

({

getListOfMatches : function(component, event, helper) {



var action = component.get("c.Cricketmatchdata");

action.setCallback(this, function(response) {

var state = response.getState();

if (state === "SUCCESS") {

var returnValue =response.getReturnValue();

component.set("v.cricketWrapper", returnValue );

}

});



$A.enqueueAction(action);

var isVisible = component.get("v.visible");

component.set("v.visible", !isVisible);

var backbuttonvisible = component.get("v.backbuttonvisible");

component.set("v.backbuttonvisible", !backbuttonvisible);

},



showMainPage : function(component, event, helper){

var isVisible = component.get("v.visible");

component.set("v.visible", !isVisible);

var backbuttonvisible = component.get("v.backbuttonvisible");

component.set("v.backbuttonvisible",!backbuttonvisible);

component.set("v.scoreTable", null);

component.set("v.cricketWrapper", null);



},



ShowScore : function(component,event){

var passValue = component.get("c.CricketScore");

var matchScore = event.source.get("v.label");

passValue.setParams({ "matchScore" : matchScore });

passValue.setCallback(component, function(a) {

var state = passValue.getState();

if (state === "SUCCESS") {



var returnValue =passValue.getReturnValue();

component.set("v.scoreTable", returnValue );

}

});



$A.enqueueAction(passValue);



var isVisible = component.get("v.visible");

component.set("v.visible", !!isVisible);

var backbuttonvisible = component.get("v.backbuttonvisible");

component.set("v.backbuttonvisible", !!backbuttonvisible);

component.set("v.cricketWrapper", null);





},



showSpinner : function (component, event, helper) {

var spinner = component.find('spinner');

var evt = spinner.get("e.toggle");

evt.setParams({ isVisible : true });

evt.fire();

var spinner1 = component.find('button1');

var evt1 = spinner.get("e.toggle");

evt1.setParams({ isVisible : true });

evt1.fire();

var spinner1 = component.find('backbutton');

var evt1 = spinner.get("e.toggle");

evt1.setParams({ isVisible : true });

evt1.fire();

},



hideSpinner : function (component, event, helper) {

var spinner = component.find('spinner');

var evt = spinner.get("e.toggle");

evt.setParams({ isVisible : false });

evt.fire();

var spinner1 = component.find('button1');

var evt1 = spinner.get("e.toggle");

evt1.setParams({ isVisible : false });

evt1.fire();

var spinner1 = component.find('backbutton');

var evt1 = spinner.get("e.toggle");

evt1.setParams({ isVisible : false });

evt1.fire();

},

})

 

CSS for the Lightning component

.THIS .headline{

font-size:18px;

font-family:Copperplate;

width:55%;

}

.THIS .scoreHeadLine{

font-size:25px;

width:500%;

font-family:Copperplate;



}



.THIS .scoresubLine{

font-size:20px;

width:55%;

font-family:Copperplate;

color:brown;

}

.THIS .teamTitle{

font-size:70px;

width:55%;

color:Black;

}

.THIS .tableStyle{

width:100%

}

 

Create an Application for the Lightning component Application

<aura:application >

< ”Name Space” : ”Your Lightning Component Name” /> Ex: <c:CricApp/>

</aura:application>

 

Running the lightning Component Application

Open your browser and type:

https://ap1.lightning.force.com / <Name space> /< Your Lightning Component Application Name> .app. Now, you can see the following screen:

Click the “Get The List Of On Going Matches” Button.

 

Then, click any of the team name that you want to see the Score Details

Now, you can see the score details for the selected match/team:

Similarly, you can get the score for all the currently running matches:

 

 

Reference: Salesforce Lightning Components