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:component tag 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.
   
   You can access the attribute in the code using the value provider v. as v.recordId or v.Account. Value providers are a way to access data by encapsulating related values together, similar to how an object encapsulates properties and methods.
   
   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 as v.Account.Name.
   
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.