Salesforce Lightning component example

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


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


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


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.

7 comments:

  1. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Salesforce Training in Chennai | Salesforce Training Institute in Chennai

    ReplyDelete
  2. Excellent post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
    Salesforce Training in Chennai | Salesforce Course in Chennai

    ReplyDelete
  3. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Salesforce Training in Chennai | Salesforce Training Institute in Chennai

    ReplyDelete
  4. It has been simply incredibly generous with you to provide openly what exactly many individuals would’ve marketed for an eBook to end up making some cash for their end, primarily given that you could have tried it in the event you wanted.

    Selenium Training in Chennai

    Selenium Training in Bangalore



    ReplyDelete
  5. Great post. Wonderful information and really very much useful. Thanks for sharing and keep updating.
    Best IT Training Institute in Chennai |Best IT Training Institute in Velachery

    ReplyDelete
  6. Really True, I feel some error on Server Side Controller, Please clarify my doubts. Thanks

    http://www.greenstechnologys.com/selenium-course-content.html

    ReplyDelete
  7. Wow! Excellent examples..Useful one!
    Thanks for posting.
    Salesforce Lightning Training

    ReplyDelete