Monday, 17 June 2019

Aura.Action in Lightning component


Aura.Action :
==============
Use Aura.Action type of attribute if you want to pass the reference of parent lightning component controller.js function to nested/child lightning component .

ex : child Component

<aura:component >
    <aura:attribute name="ltngMessage" type="string"></aura:attribute>
    <aura:attribute name="closeChildDivFunction" type="Aura.Action" default="{! c.defaultCloseAction}"></aura:attribute>
   
    <div aura:id="maincontainer" style="background-color:#E6E6FA;border-style: solid;height:100px;margin:2%;padding:1%;">
        <b>This is Child component inside AuraActionDemoCmp</b>
        <br/>
        <lightning:button label="Close via ChildCmp JS function" variant="neutral"  onclick="{!c.defaultCloseAction}"/>
       
        <lightning:button label="Close via Parent JS function" variant="brand"  onclick="{!v.closeChildDivFunction}"/>
       
    </div>
</aura:component>

defaultCloseAction : function(component, event, helper) {
          debugger;
        //perform you logic and close the modal dialog
        component.set("v.ltngMessage","Close via ChildCmp JS function button clicked.Please refresh your browser if you again want to load this demo component");
        var mc=component.find("maincontainer");
        $A.util.addClass(mc, "slds-hide");
    }

Parent Component :

<aura:component >
   
    <aura:attribute name="ltnguserActionMessage" type="string" default="Waiting for User Action"/>
    <div style="background-color:#e7eff8;border-style: solid;padding:2%;">
        <b> This is Parent(AuraAction Parent) component </b>
        <br/>
        ltnguserActionMessage value-<b>{!v.ltnguserActionMessage}</b>
        <br/>
       
        <div aura:id="childContainer" >
            <p>This content is inside childContainer div</p>
            <ul class="slds-list--ordered">
                <li>If user clicks on "Close via Parent JS function" button,then this content will also get removed</li>
                <li>If user clicks on "Close via ChildCmp JS function" button,then only child component body will be removed</li>
            </ul>
            <c:AuraActionChild ltngMessage="{!v.ltnguserActionMessage}"  closeChildDivFunction="{!c.destroyChildCmp}"/>
        </div>
    </div>
</aura:component>

 destroyChildCmp: function(component, event, helper) {
        debugger;
        component.set("v.ltnguserActionMessage","Close via Parent JS function button clicked. Please refresh your browser if you again want to load this demo component.");
        var cmp = component.find('childContainer');
        cmp.set("v.body",[]);
    }

App :

<aura:application extends="force:slds" >
    <c:AuraActionParent></c:AuraActionParent>
</aura:application>

Note :
======
1.It is discourged to use component.set() with the  Aura.Action attribute types.
2.It is discourged to use $A.enqueueAction() in the child component to enqueue the action passed to the Aura.Action
attribute.

No comments:

Post a Comment