Part 1: Building a Record Home Component
We’ve previously shown in the past how to create an integration in Apex with a third party system. I’m going to show you how to use this information in a Lightning Component inside a record home context.
In order to be seen in the Lightning App Builder, your component must implement the flexipage:availableForAllPageTypes or the flexipage:availableForRecordHome interface. availableForRecordHome makes it specifically available on record home pages, and the other makes it available for all page types. Additionally there are two other useful interfaces for a record home component:
force:hasRecordId - when this interface is used it’ll populate an attribute named recordId with the active records Id
force:hasSObjectName - when this interface is used it’ll populate an attribute named sObjectName with the active records API name
Here is a basic component that allows you to drop it on a record home context. It has a handler that we’ll use later to initialize the data. For now, the JS controller is very minimal.
Component Body
JS Controller
Design Component
To see the component in action on a record home page, open the Lightning App Builder and create a new page.
Go to Setup, and search for Lightning App Builder, then select it, then click the new button.
On the page type selection choose “Record Page”
Click Next. Then Choose a design layout. For this example I’m using “Header and Two Columns.”
Click Next. Then, enter a label for the record page override. After that, enter the type of SObject you want to override. For this example, I’m using Account.
Drop the 'Local Weather' component onto the panel on the right hand side. Then, save the layout.
Activate the record home page.
Open an account in Lightning Experience to see the component in action.
If your company or nonprofit is interested in taking your Salesforce org into the Lightning era, contact us:
