So, let’s get started with the component.
We will build a component which would simply fetch a couple of fields from the Account object and display it in our component. To make this happen, the component will need an attribute that will point to a list of Accounts. The attribute will basically act like a variable. Do not bother about how to populate this attribute at this point. We will soon get to that in sometime. So the component with the Account attribute defined to it will look simply like this
So, this component now has an attribute that points to a list of Account. I have also defined the <aura:iteration> tag so that we can loop through the data that we fetch into the Account table and display it in individual rows.
Now, let’s go ahead and define an apex class that can be used by this lightning component. The apex class should simply return the list of Account records with the Name and Type fields. To keep things simpler, we will just query the first 10 accounts using the LIMIT operator.
An important point to be noted here is that the apex class methods that will be used by the lightning framework should always be static and annotated with @AuraEnabled. The framework cannot recognize the apex methods without this annotation. So, our apex class will be simply this.
Improve the Lightning Component
- Our Apex class and lightning component is ready. We just have to connect them together and see the magic happen. However, before we do that let’s improve the lightning component that we have already defined. One of the aspects that the component is missing right now is that it doesn’t implement any of the interfaces. Interfaces defined within the framework help the developers to tie up the component with either a Lightning app builder, Lightning component tab or with the Community builder. So, for this component we will test it out by associating this component with a lightning tab. In order to achieve this, we will have to implement the force:appHostable interface.
- Now, let’s associate the Apex class with the lighting component. To do that we will have to add a header to our lightning component which points to the custom controller just like we do it in VF pages.
- I will also add a button to this component, so that the Account data is fetched only when the user clicks on the button. This will also help you to understand how the user actions are translated into server-side calls.
The improved lightning component code will look like this
Let’s go ahead and create the Client side controller for this component. Just click on the “Create” button on the right side of the component beside the “Controller” tab. That will open up the client-side controller for you which would be automatically named as “LightningApexComponentController.js” which is named after the name of your lightning component bundle.
The client side controller will be responsible for calling the server side action that resides in the Apex class. Not that we had defined in our component that on click of the button it should invoke the handleClick() function. This function will be defined in the client-side controller and will look like this.
Note that all the calls to server side action will have a call back function wherein we will be capturing the response. It can be seen in the above code that once we check the call was successful, we are setting values to the component attribute “accts” that we defined in our component. The syntax to set values to a component attribute is like this
I believe that the rest of the code snippet in the client-side controller is self-explanatory. If you face issues in grasping any of them, feel free to post your questions on this post.
Now go to setup > tabs > Lightning Component tabs > New and define a new tab for this lightning component. Ensure that you have enabled My domain in your organization for lightning component tabs to be visible in your setup. It won’t allow you to create a lightning component unless you have My domain enabled in your organization. Refer the below link to learn how My Domain can be enabled in your organization.
Now, navigate to Setup > Apps > New. Create a new custom app and add this lightning component tab to the custom tab and save it. That’s it.
Switch to the Lightning experience now and navigate to the lightning component tab that we just setup. You should see a button like below
Simply hit the button and it show you the list of 10 Account records as seen below.
Since we did not use any styling the records appear simply as comma separated text values. However, we have achieved the heavy-lifting part of the component, which is to fetch data from an Apex class. Now that we have the data we can simply use the Lightning Design System and make the look and feel match with that of Standard Lightning experience.