Using Aura:Set with Lightning Components Extension

When we think about Object Oriented Concepts, Inheritance is one thing where we can extract functionality from Super Class and in Lightning Components development aura:set serves with similar feature where we can assign values for the attributes of a Super Component from a Sub Component which extends a Super Component.



Resource Link: Lightning Components Developer Guide


Below is a simple implementation of having two components and using aura:set we will populate attributes of a base component using another component which will extend our base component.

Component 1: This will be our base component which will display records Name and Id which are passed from Component 2 using Aura:Set

AuraSet1.cmp
 <!--AuraSet1-->  
 <aura:component extensible="true" >  
   <!--Load LDS from static resource-->  
   <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system.css"/>    
   <aura:attribute name="rcd" type="Object"/>  
   <div>  
     <center><b><h1 style="color:black;">Component data using Aura:Set</h1></b></center>  
   </div>  
   <div class="slds-page-header" role="banner">  
     <b>Current Record Name: <h1 style="color:green;font-family:verdana;">{!v.rcd.Id}</h1></b>  
   </div>  
   <div class="slds-page-header" role="banner">  
     <b>Current Record Name: <h1 style="color:green;font-family:verdana;">{!v.rcd.Name}</h1></b>  
   </div>    
 </aura:component>  

Component 2: This is our second component which will extend our above AuraSet1 component. Here in this component we are going to use Lighting Data Service to obtain record and assign it to object attribute or our first component that we created above.

AuraSet2.cmp
 <!--AuraSet2-->  
 <aura:component access="global" extends="c:AuraSet1" implements="flexipage:availableForAllPageTypes,force:hasRecordId">  
   <!--attributes to store record related information-->  
   <aura:attribute name="record" type="Object"/>  
   <aura:attribute name="simpleRecord" type="Object"/>  
   <aura:attribute name="recordError" type="String"/>  
   <!--LDS to display record data-->  
   <force:recordData aura:id="recordLoader"  
            recordId="{!v.recordId}"  
            layoutType="FULL"  
            targetRecord="{!v.record}"   
            targetFields="{!v.simpleRecord}"  
            targetError="{!v.recordError}"  
            />  
   <aura:set attribute="rcd" value="{!v.simpleRecord}"/>  
 </aura:component>  

Walking through above components code:

1. If we observer our two components, AuraSet1 has "extensible=true' which makes it available to be able to extend in other components and AuraSet2 component has "extends="c:AuraSet1" using which we are extending AuraSet1 component
2. In our AuraSet2 component we are using aura:set to assign 'rcd' attribute to pass object information obtained using Lighting Data Service

We will now pull AuraSet2 component on our Account page layout and that will display data which is being referenced from AuraSet1










Note: This usage of works for components and abstract components, but it doesn’t work for interfaces. For more information, see Setting Attributes Inherited from an Interface.

Comments

Popular posts from this blog

Displaying Toast Message from Modal in Lightning Components

Lightning RecordForm - An enhanced Lightning Data Service

Lightning Component to display dynamic sObject data