Time Estimate

Topics

Create a Lightning Component

Create and Add a Lightning Component to the Record Page

A Lightning 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 a Lightning 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. In your org, click the App Launcher icon App Launcher and choose Accounts from the All Items section.

  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 icon Gear icon to access Setup in Lightning Experience 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 Save and then click the Back link to return to the record page.

retargeting