function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aakanksha SinghAakanksha Singh 

Accessing Parent Element of a lightning component through a Child Element Component

Hello,
I have to access aura:id of a div in component through a button in  nested componet.
Can anyone help me with this??
Thanks
sfdcMonkey.comsfdcMonkey.com
hi Akanksha 
you can do this with lightning Event , can you send me your code so i tell you how to use event on component :)
Thanks  :)
Aakanksha SinghAakanksha Singh
Sorry for late reply.
The code is like:
component:
<aura:component>
<ui:button aura:id="button" class=" slds-button slds-button--neutral slds-float--right" press="{!c.applycss}">New Account</ui:button>
<div aura:id="Component" class="slds-box slds-theme--default Hide">
           <c:accounts/>
</div>
</aura:component>
controller-
applycss:function(cmp,event){
        var cmpTarget = cmp.find('Component');
        $A.util.removeClass(cmpTarget, 'Hide');
        $A.util.addClass(cmpTarget, 'parent');
    }
accounts component:
<aura:component>
<ui:button aura:id="button1" class="slds-button slds-button--neutral slds-not-selected" press="{!c.removeCss}">Submit</ui:button>
</aura:component>
controller-
removeCss: function(cmp, event) {
        var cmpId = cmp.find('Component');
        $A.util.removeClass(cmpTarget, 'parent');
        $A.util.addClass(cmpTarget, 'Hide');
    }
 
sfdcMonkey.comsfdcMonkey.com
hi Aakanksha Singh,

i understand what you want, you want change css of parent component from child componet i am right ?
so, you can not access another component directly so first you create a lightning event.
developer-Console -----new -----lightning event

ComponentEvent.evt 
<aura:event type="COMPONENT" description="simple Lightning Event fire by child component" />

parentComponent.cmp 
<aura:component>
   <aura:handler name="sampleComponentEvent" action="{! c.handleSampleEvent}" event="c:ComponentEvent" />

<ui:button aura:id="button" class="slds-button slds-button-neutral slds-float-right" press="{! c.applycss }"> Make parent box red </ui:button>

<div class="slds-box slds-theme--success" aura:id="Component">
    <c:childComponent/>
</div>

</aura:component>
parentComponentController.js
  
({
	applycss:function(cmp,event){
        var cmpTarget = cmp.find('Component');
        $A.util.removeClass(cmpTarget, 'slds-theme--success'); // remove green(success) color 
        $A.util.addClass(cmpTarget, 'slds-theme--error'); // add red (error) color
    },
    
  // call by child component by a Lightning event handler 
    handleSampleEvent : function(cmp,event){
        
        var cmpTarget = cmp.find('Component');
        $A.util.removeClass(cmpTarget, 'slds-theme--error');
        $A.util.addClass(cmpTarget, 'slds-theme--success'); 
    },
})

childComponent.cmp 
<aura:component>
<aura:registerEvent name="sampleComponentEvent" type="c:ComponentEvent"/>

<ui:button aura:id="button1" class="slds-button slds-button--neutral slds-not-selected" press="{!c.restorecssFromChildComponent}">make Parent box green From child component</ui:button>

</aura:component>​

childComponentController.js 
({
   restorecssFromChildComponent: function(cmp, event) {

       // you can not direct access another component so fire an event from child and handle it on parent component
       // when the button click, event is fire by this component and handler by the another component (parent component where we need to change)  

    var compEvent = cmp.getEvent("sampleComponentEvent"); // 
    compEvent.fire();
    }

})

* underline text must be same name 
create a dummy app with component and event and understand properly 
Thanks :)

If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.


  
Aakanksha SinghAakanksha Singh
Thanx, it worked
sfdcMonkey.comsfdcMonkey.com
Great :)
If my answer helps you to solve your problem please mark it as best answer. It will help other to find best answer.
Michel Carvalho LopesMichel Carvalho Lopes

Hello {!Piyush_soni__c},

I need to do something similar, can you help me?
I'm using lightning:overlayLibrary to make a modal popup with Header and Footer and Body with force:recordEdit, like this below.

ModalPopup whit force:recordEdit

I need that when teh user click on Salvar (Save) button in ModalFooter.cmp, the function handleSave on ModalBodyController.js  be fired, to save form updates. I tried use aura:event but does not work.

ModalFooter.cmp

<aura:component description="ConciliacaoBancariaModalFormFooter">
    <aura:attribute name="showOkButton" type="Boolean" default="false"/>
    <aura:attribute name="showCancelButton" type="Boolean" default="false"/>
    <aura:attribute name="showSaveButton" type="Boolean" default="false"/>

    <aura:registerEvent name="formSubmit" type="c:ModalBodyEvent"/>

    <lightning:overlayLibrary aura:id="overlayLib"/>

    <aura:if isTrue="{!v.showCancelButton}">
        <lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
    </aura:if>
    <aura:if isTrue="{!v.showOkButton}">
        <lightning:button name="ok" label="OK" variant="brand" onclick="{!c.handleOK}" />
    </aura:if>
    <aura:if isTrue="{!v.showSaveButton}">
        <lightning:button name="save" label="Salvar" variant="brand" onclick="{!c.handleSave}" />
    </aura:if>
</aura:component>
ModalFooterController.js 
({
    handleOK : function(component, event, helper){
        component.find("overlayLib").notifyClose();
    },

    handleCancel : function(component, event, helper){
        component.find("overlayLib").notifyClose();
    },

    handleSave : function(component, event, helper){
        var compEvent = component.getEvent("formSubmit");
        compEvent.fire();
    },

})
ModalBody.cmp 
<aura:component description="ModalBody">
    <aura:attribute name="recordid" type="Id" />
    <aura:attribute name="edit" type="Boolean" default="false" />
    <aura:attribute name="view" type="Boolean" default="false" />
    <lightning:overlayLibrary aura:id="overlayLib" footer="c:modalFooter"/>
    <aura:handler name="formSubmit" action="{!c.handleSave}" event="c:ModalBodyEvent" />

    <aura:renderIf isTrue="{!v.view}">
        <force:recordView recordId="{!v.recordid}" />
    </aura:renderIf>
    <aura:renderIf isTrue="{!v.edit}">
        <force:recordEdit aura:id="edit" recordId="{!v.recordid}" />
    </aura:renderIf>
</aura:component>


ModalBodyController.js

({
    handleSave : function(component, event, helper) {
        component.find("edit").get("e.recordSave").fire();
    },

    handleCancel : function(component, event, helper){
        component.find("overlayLib").notifyClose();
    }
})
mainComponent.cmp 
<aura:component implements="flexipage:availableForAllPageTypes,controller="ConciliacaoBancariaSSConroller">
    <lightning:button name="edit" label="Editar" variant="brand" onclick="{!c.showPopup}" />
</aura:component>


mainComponentController.js 
({

   showPopup : function (component) {
          var modalHeader;
          var modalBody;
          var modalFooter;
          $A.createComponents([
              ["c:ModalHeader",{
                   recordName : component.get("v.recordName")
              }],
              ["c:ModalBody",{
                  recordid : component.get("v.recordid"),
                  edit : true
              }],
              ["c:ModalFooter", {
                  showCancelButton : true,
                  showSaveButton : true
              }]
          ],
          function(components, status){
              if (status === "SUCCESS") {
                  modalHeader = components[0];
                  modalBody = components[1];
                  modalFooter = components[2];
                  component.find('overlayLib').showCustomModal({
                     header: modalHeader,
                     body: modalBody,
                     footer: modalFooter,
                     showCloseButton: false,
                     cssClass: "",
                     closeCallback: function() {

                     }
                 })
              }
          }
         );
      }
})