In this post we will see a basic lightning component example and will also include it on a salesforce 1 app. Lightning framework uses Java script on the client side and apex on the server side. Lightning components can be used on salesforce 1 mobile as well as for dekstop(Lightning Experience).
Let us build a simple search page and make it available for salesforce 1 app. Page will have 2 input boxes: "Opportunity stage" and "Amount" and will also include a search button. Pressing the button will show all the opportunities with that stage and having amount greater than the input value. We will also include navigation facility to the searched opportunities.
To begin with we will have to first enable custom domain for your org after which you can start building lightning component. You can visit here (https://developer.salesforce.com/trailhead/project/quickstart-lightning-components/quickstart-lightning-components1) to see how to enable custom domain for your org. To build the component we will need lightning component, client side controller (Java script) and server side controller (apex class). These things can be coded from developer console.
We can start with lightning component first but since it has dependencies with other two we can write the server controller first, then the client side controller and lightning component in the end. Or can also start with lightning component and build the others hand in hand.
Within Developer console you can navigate to File->New->Lightning Component to create the new lightning component.
Once you have this in new tab within developer console you will get option on right hand side to create client side controller (Controller) and you can create new server side controller by navigating to file->new->apex class
Lighting Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <aura:component implements="force:appHostable" controller="oppSearchController"> <aura:attribute name="opportunities" type="Opportunity[]"/> <aura:attribute name="showtbl" type="boolean" default="false"/> <ui:inputText aura:id="nameopp" label="Opportunity Stage" value="enter stage" required="true"/> <ui:inputText aura:id="amntopp" label="Opportunity Amount >" value="enter amount" required="false"/> <ui:button label="Get Opportunities" press="{!c.getOpps}"/> <aura:if isTrue="{!v.showtbl}"> <span class="ligtn-button" style="white-space: pre;"> </span> <table> <thead> <tr> <th><strong> Name </strong></th> <th> <strong> Stage </strong> </th> <th> <strong> Amount </strong> </th> </tr> </thead> <tbody> <aura:iteration var="opp" items="{!v.opportunities}"> <tr> <td><a data-record="{!opp.Id}" onclick="{!c.navigateToRecord}">{!opp.Name}</a></td> <td>{!opp.StageName}</td> <td>{!opp.Amount}</td> </tr> </aura:iteration> </tbody> </table> </aura:if></aura:component> |
Lightning component as you see above starts and ends with aura tag. Since we want to use the component on salesforce 1 we will have to overide it on a tab and hence
implements="force:appHostable" has been used which allows overriding a tab with the lightning component. We need two input boxes for which inputText has been used and Ui button that calls the java script controller function. <aura:iteration has been used to iterate through all the opportunities.
Client Side Controller
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| ({ navigateToRecord : function(component, event, helper){ var navEvt = $A.get("e.force:navigateToSObject"); var selectedItem = event.currentTarget; var Name = selectedItem.dataset.record; navEvt.setParams({ "recordId": Name, "slideDevName": "detail"});navEvt.fire(); }, getOpps: function(cmp){ cmp.set("v.showtbl","true"); var action = cmp.get("c.getOpportunities"); action.setParams({ OppStage : cmp.find("nameopp").get("v.value") , Oppamount : cmp.find("amntopp").get("v.value")}); action.setCallback(this, function(response){ var state = response.getState(); if (state === "SUCCESS") { cmp.set("v.opportunities", response.getReturnValue()); } });<span class="lightn-buton" style="white-space: pre;"> </span> $A.enqueueAction(action); }}) |
Client side controller uses the inputs from UI and calls the server side controller which does the searching and passes the results which are then set on UI table. Function navigaterecord has been used to provide a facility to navigate to the records displayed in table. The lightning component are referenced using v. (view) and server side methods variable can be referenced via c. (controller)
Server Side Controller
1
2
3
4
5
6
7
8
9
10
| public with sharing class oppSearchController{ @AuraEnabled public static List<Opportunity> getOpportunities(String OppStage , Integer Oppamount) { string stageopp = '\''+OppStage+'\''; List<Opportunity> opportunities = [SELECT Id, Name, CloseDate,Amount,StageName FROM Opportunity where Amount >: Oppamount and StageName =: OppStage]; return opportunities; }} |
This is a simple apex class with method having @AuraEnabled annotation which enables it for use in lightning component. Method simply queries the opportunities based on the received parameters and returns the list of opportunities back to the client side controller.
To include this component on salesforce 1 create a new lightning tab and override it with this lightning component and include the tab in mobile navigating setup. You can install any browser extension for salesforce 1 to see the results or from salesforce 1 app on your mobile. The output image above is from add on extension for chrome.
No comments:
Post a Comment