Create an Aura Component

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 2:19 minute mark, in case you want to rewind and watch the beginning of the step again.)

Create and Add an Aura Component to the Record Page

An Aura component is a combination of markup, JavaScript, and CSS. You first create a component bundle.

1. In the Developer Console, select File | New | Lightning Component.
2. For the component name, enter MyContactList.
3. Check Lightning Record Page and then click Submit.
4. Add a reference to the Apex controller, controller="MyContactListController", on the aura:component tag. The aura:componenttag should now look like this:

    <aura:component controller="MyContactListController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
   

5. Add the following code to the component on line 2:

   <aura:attribute name="recordId" type="Id" />
   <aura:attribute name="Account" type="Account" />
   <aura:attribute name="Contacts" type="Contact" />
   <aura:attribute name="Columns" type="List" />
   <force:recordData aura:id="accountRecord"
                     recordId="{!v.recordId}"
                     targetFields="{!v.Account}"
                     layoutType="FULL"
                     />
   <lightning:card iconName="standard:contact" title="{! 'Contact List for ' + v.Account.Name}">
       <!-- Contact list goes here -->
   </lightning:card>
   

   An aura:attribute is what we use to store data within an Aura component, in this case, the id of the current Account record page. The component is also using Lightning Data Service, force:recordData, to retrieve and store the fields of the current record in the attribute named Account, so that we can display the name of the Account as the title of the component. The Lightning Framework contains UI building blocks known as Base Lightning Components. lightning:card is a base component for displaying data. The title of the card is pulling the name of the account from the aura attribute Account.
6. Select File | Save.
7. From the App Launcher , find and open Accounts.
8. Switch from the Recently Viewed list to All Accounts and click to open the account for United Oil & Gas Corp.
9. Click the setup gear and choose Edit Page to launch App Builder.
10. Drag your component from the Custom components list and drop it at the top of the right-hand column, above the Activity component.
11. Click the Save button.
12. Click Activate and then click Assign as Org Default.
13. Click Desktop and then Click Next.
14. Click Save and then Back  in the upper left to return to the record page.