Lightning Component Facets

In this blog post, I am going to explain salesforce lightning facets. lighting facets are nothing but attributes of type Aura.Component[] with the array of attributes like body, title etc.To define your own facet, add an aura:attribute tag of type Aura.Component[] to your component. The body attribute has type Aura.Component[] .Now to start with I created a new lighting component with name AuraFacet.cmp with below code.

<aura:component >
    <aura:attribute name="title" type="Aura.component[]" />
    <aura:attribute name="footer" type="Aura.component[]"/>
    <section>
        <div><span></span>{!v.title}</div>
        <div><span> </span>{!v.body}</div>
        <div><span></span>{!v.footer}</div>
    </section>
    
</aura:component>

This is the component which will have two attribute types title and footer facets that are passed from the invoked component.Now I created a component name facetwrapper.cmp with the below code.

<aura:component controller="FacetController">
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
    <aura:attribute name="toggle" type="Boolean" default="true"/>
    <aura:attribute name="org" type="Organization" default=""/>
    
    <section>
        <aura:if isTrue="{!v.toggle}">
            <div>
                <div>
                    <c:AuraFacet aura:id="f1">
                        <aura:set attribute="title">
                            <ui:outputText value="Salesforce Lightning Component Title "/>
                        </aura:set>
                       
                         <aura:set attribute="body">
                            <ui:outputText value="Salesforce Lightning Component Body"/>
                        </aura:set>
                       
                        
                        <aura:set attribute="footer">
                            <p> Copyright 2017 @{!v.org.Name}  - {!v.org.Street} , {!v.org.City} ,{!v.org.State} ,{!v.org.Country} </p>
                             
                        </aura:set>
                        
                    </c:AuraFacet>
                </div>
                
            </div>
        </aura:if>
        <ui:button label="ToggleIf" press="{!c.toggle}" />
    </section>
</aura:component>

 

({
    doInit: function (cmp) {
        var action = cmp.get("c.getOrgDetails");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var resp = response.getReturnValue();
                cmp.set("v.org", resp);
            }
        });
        $A.enqueueAction(action);
        
        
    },
    toggle: function (cmp) {
        cmp.set('v.toggle', !cmp.get('v.toggle'));
    },
  
})

 

public class FacetController {
    @AuraEnabled
    public static Organization getOrgDetails(){
        return [Select Id , Name, Street , City , Country , PostalCode  from Organization] ; 
        
    } 
}

Now if you see the value of an attribute are passed by using the <aura:set> tag.Set tag is used to set the footer and body and title attributes from the wrapper component as shown below.