The Lightning App Builder supports editing record home pages as part of a general pilot. It is one of the contexts in which Lightning Components can be used to extend and customize the Lightning Experience for users. A Lightning Component must implement certain interfaces to be made available to record home pages and can implement other interfaces to be provided a context by the framework. This post details how a Lightning Component can be built to be used in the context of a record home page for any object.
The Lightning Component
A simple component that displays information about Attachments for a record is used to demonstrate the capabilities of a Lightning Component in the context of a record home page.
The component must implement flexipage:availableForRecordHome or flexipage:availableForAllPageTypes for it to be available in the App Builder when editing a record home page. If the component should only be available for record home pages then it should implement the more restrictive flexipage:availableForRecordHome which will indicate that the system should enforce that the component is only available in the App Builder component panel when editing a record home page.
Additionally, since this component needs the current record’s ID it must implement force:hasRecordId. If the component needed the object’s name provided to it, it would need to implement force:hasSObjectName.
The final component markup is fairly straightforward.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<aura:component controller="AttachmentController" implements="flexipage:availableForRecordHome,force:hasRecordId"> <aura:attribute name="recordId" type="String"/> <aura:attribute name="attachments" type="Attachment[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <ul> <aura:iteration items="{!v.attachments}" var="a"> <li> <a target="_blank" href="{! '/servlet/servlet.FileDownload?file=' + a.Id }">{!a.Name}</a> </li> </aura:iteration> </ul> </aura:component> |
The helper JavaScript invokes a server action (@AuraEnabled static method) on the component’s Apex controller and passes in the supplied record ID. This is done when the component is first initialized via the init event handler. The record ID is provided by the framework, because the component implemented the force:hasRecordId interface.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
({ getAttachments : function(component) { var action = component.get("c.getAttachments"); action.setParams({ parentId : component.get("v.recordId") }); action.setCallback(this, function(a) { if (a.getState() === "SUCCESS") { var attachments = a.getReturnValue(); component.set("v.attachments", attachments); } else if (a.getState() === "ERROR") { console.log("oof"); } }); $A.enqueueAction(action); } }) |
The Apex controller queries the Attachment object for records with a parentId of the specified record ID.
|
1 2 3 4 5 6 7 8 9 10 11 |
public with sharing class AttachmentController { @AuraEnabled public static List<Attachment> getAttachments(String parentId) { return [ SELECT Id, Name FROM Attachment WHERE ParentId = :parentId ]; } } |
Since the component has been written generically for any object it can be added to any object’s record home page.
More
To learn more about customizing the record home page consult the Lightning Components Developer’s Guide. To get started with developing Lightning Components check out the Lightning Components Trailhead and other Lightning trails.
One thought on “Lightning Components for Record Home Pages”