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[]"/>
        <div><span> </span>{!v.body}</div>

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=""/>
        <aura:if isTrue="{!v.toggle}">
                    <c:AuraFacet aura:id="f1">
                        <aura:set attribute="title">
                            <ui:outputText value="Salesforce Lightning Component Title "/>
                         <aura:set attribute="body">
                            <ui:outputText value="Salesforce Lightning Component Body"/>
                        <aura:set attribute="footer">
                            <p> Copyright 2017 @{!}  - {!} , {!} ,{!} ,{!} </p>
        <ui:button label="ToggleIf" press="{!c.toggle}" />


    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("", resp);
    toggle: function (cmp) {
        cmp.set('v.toggle', !cmp.get('v.toggle'));


public class FacetController {
    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.