Skip to content

Instantly share code, notes, and snippets.

@Sunil02kumar
Created November 5, 2018 07:08
Show Gist options
  • Save Sunil02kumar/7f6f489bfe3a37819a19c656b8c132ae to your computer and use it in GitHub Desktop.
Save Sunil02kumar/7f6f489bfe3a37819a19c656b8c132ae to your computer and use it in GitHub Desktop.
Aura.Action : Lightning Framework Specific Attributes Type
<aura:component >
<aura:attribute name="ltngMessage" type="string"/>
<aura:attribute name="closeChildDivFunction" type="Aura.Action" default="{!c.defaultCloseAction}"/>
<div aura:id="maincontainer" style="background-color:#E6E6FA;border-style: solid;height:100px;margin:2%;padding:1%;">
<b>This is Child component inside SK_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) {
//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");
}
})
<aura:application extends="force:slds">
<c:SK_AuraActionDemoCmp/>
</aura:application>
<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(SK_AuraActionDemoCmp) 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:SK_AuraActionChildCmp
ltngMessage="{!v.ltnguserActionMessage}"
closeChildDivFunction="{!c.destroyChildCmp}"/>
</div>
</div>
</aura:component>
({
destroyChildCmp: function(component) {
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",[]);
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment