Load the Contacts

ContactController contains methods that return your contact data using SOQL statements. This Apex controller is wired up to your component in a later step. getContacts() returns all contacts with the selected fields.

This component creates the template for your contact data using the lightning:card component, which simply creates a visual container around a group of information. This template gets rendered for every contact that you have, so you have multiple instances of a component in your view with different data. The onclick event handler on the lightning:button component calls the goToRecord client-side controller action when the button is clicked. Notice the expression {!v.contact.Name}? v represents the view, which is the set of component attributes, and contact is the attribute of type Contact. Using this dot notation, you can access the fields in the contact object, like Name and Email, after you wire up the Apex controller to the component in the next step.

Let’s dive into the code. We added the init handler to load the contact data during initialization. The handler calls the client-side controller code in the next step. We also added two attributes, contacts and totalContacts, which stores the list of contacts and a counter to display the total number of contacts respectively. Additionally, the contactList component is an attribute used to store the filtered list of contacts when an option is selected on the lead source dropdown menu. The lightning:layout components simply create grids to align your content in the view with Lightning Design System CSS classes.

The page header contains the {!v.totalContacts} expression to dynamically display the number of contacts based on the lead source you select. For example, if you select Referral and there are 30 contacts whose Lead Source fields are set to Referral, then the expression evaluates to 30.

Next, we create a dropdown menu with the lightning:select component. When you select an option in the dropdown menu, the onchange event handler calls your client-side controller to update the view with a subset of the contacts. You create the client-side logic in the next few steps.

In case you’re wondering, the force:appHostable interface enables your component to be surfaced in Lightning Experience and the Salesforce mobile app as tabs, which we are getting into later.

The client-side controller calls helper functions to do most of the heavy-lifting, which is a recommended pattern to promote code reuse. Helper functions also enable specialization of tasks, such as processing data and firing server-side actions, which is what we are covering next. Recall that the onchange event handler on the lightning:select component calls the handleSelect client-side controller action, which is triggered when you select an option in the dropdown menu. handleSelect checks the option value that’s passed in using event.getSource().get("v.value"). It creates a filtered list of contacts by checking that the lead source field on each contact matches the selected lead source. Finally, update the view and the total number of contacts based on the selected lead source.

You must be wondering how your component works in Lightning Experience and the Salesforce app. Let’s find out next!

• Add Aura Components as Custom Tabs in a Lightning Experience App

For this tutorial, we recommend that you add the component as a custom tab in Lightning Experience.