1

This question already has an answer here:

How to I pass an attribute (on any variable) down to other components in an application. Here is what I am working with:

<aura:application extends="force:slds" description="gos_teastHarness">
  <div class="body">
    <c:gos_notificationsTest />
    <c:gos_environmentToggle />
    <c:gos_explicitPermissioning />
  </div>
</aura:application>

in my gos_environmentToggle component I have a checkbox, and depending on it's state, an attribute it assigned a sting value. Now I want to pass that attribute down to c:gos_explicitPermissioning component, but not sure how. I was playing around with Application type events, but no luck.

Any recommendations? Is there a way to declare a Global attribute of some sort that can be accessed from anywhere? The tricky part is that c:gos_explicitPermissioning also has nested components that all need to access that attribute.

Edit >>> more code

/// Event code
<aura:event type="APPLICATION" description="gos_EnvironmentChangeEvt" access="global">
    <aura:attribute name="instance" type="String"/>
</aura:event>

/// gos_environmentToggle.cmp
<aura:component description="gos_environmentToggle"
                implements="forceCommunity:availableForAllPageTypes, flexipage:availableForAllPageTypes"
                access="global">

    <aura:attribute name="selectedEnvironment" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:registerEvent name="getEnvironment" type="c:gos_EnvironmentChangeEvt"/>
    <aura:handler event="c:gos_EnvironmentChangeEvt" action="{!c.handleApplicationEvent}"/>
    <div dir="rtl">
        <div aura:id="envhead" class="slds-form-element envheared">
            <div class="one">Environment </div>
            <span class="slds-form-element__label slds-m-bottom_none three">{!v.selectedEnvironment}</span>
            <div class="two"><label class="slds-checkbox_toggle slds-grid">
                <ui:inputCheckbox change="{!c.selectChange}" value="true" aura:id="env"/>
                <span id="toggle-desc" class="slds-checkbox_faux_container" aria-live="assertive">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-checkbox_on"></span>
                    <span class="slds-checkbox_off"></span>
                </span>
            </label></div>
        </div>
    </div>
</aura:component>       


///JS 
({
    doInit: function (component, event, helper) {

        let getState = component.find("env").get("v.value");
        console.log('getState ::: '+getState);
        if(getState){
            component.set("v.selectedEnvironment", "Production");
        }
        else{
            component.set("v.selectedEnvironment", "UAT");
        }
        var evt = $A.get("e.c:gos_EnvironmentChangeEvt");
        let getEnvironment = component.get("v.selectedEnvironment");
        evt.setParams({ "instance": getEnvironment});
        evt.fire();
        console.log('getEnvironment ::: '+getEnvironment);
    },
    selectChange : function(component, event, helper) {
        // first get the div element. by using aura:id
        let getEnvironmentBefore = component.get("v.selectedEnvironment");
        console.log('getEnvironment before >>> '+getEnvironmentBefore);
        switch(getEnvironmentBefore){
            case "Production": 
            component.set("v.selectedEnvironment", "UAT");
            break;

            case "UAT": 
            component.set("v.selectedEnvironment", "Production");
            break;
        }
        let getEnvironmentAfter = component.get("v.selectedEnvironment");
        console.log('getEnvironment after >>> '+getEnvironmentAfter);
        var evt = $A.get("e.c:gos_EnvironmentChangeEvt");
        evt.setParams({ "instance": getEnvironmentAfter});
        evt.fire();
        var changeElement = component.find("envhead");
        $A.util.toggleClass(changeElement, "toggle-env");
    },
    handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("instance");
        console.log("init value: " + message);
        // set the handler attributes based on event data
        cmp.set("v.selectedEnvironment", message);
    }    
})

Now the next component, is NOT nested but rather independent and needs to get that attribute name="instance"

/// gos_explicitPermissioning.cmp
<aura:component description="GTR Explicit Permissioning" implements="forceCommunity:availableForAllPageTypes, flexipage:availableForAllPageTypes">

<aura:attribute name="rightPanelCmp" type="Aura.Component"/>
<aura:attribute name="confirmationModalCmp" type="Aura.Component"/>
<aura:attribute name="removePermissionModalCmp" type="Aura.Component"/>
<aura:attribute name="isProduction" type="Boolean"/>
 <aura:handler event="c:gos_EnvironmentChangeEvt" action="{!c.handleEnvChange}"/>
<div>

        <c:gos_viewLeis/>

        {!v.rightPanelCmp}

        {!v.confirmationModalCmp}

        {!v.removePermissionModalCmp}

    </div>
</aura:component>   

//JS
({
handleEnvChange: function (component, event, helper) {
        var message = event.getParam("instance");
        console.log("current value: " + message);
        if (message == "Production"){
            component.set("v.isProduction",true);
        }
        else {
            component.set("v.isProduction",false);
        }
        console.log("!!!!!!!!!!!!! >> instance value: " );
    }
})


marked as duplicate by Pranay Jaiswal, Raul, glls, battery.cord, Sebastian Kessel May 23 at 15:16

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 2
    You can't have a "global" attribute in that sense. The application event should work, but perhaps you've done something wrong? Maybe you could share more code with us? – sfdcfox May 21 at 14:53
  • 2
    There is a nice blog post for Lightning Inter-Component Communication Patterns which would give a good design idea. – Raul May 21 at 14:55
  • agree with @sfdcfox, if you post the code what ever you done with events 'll easy to figure out where it is wrong. – sdandamud1 May 21 at 14:57
  • posted more code for review. Please go nuts :) – Art S May 21 at 15:16
2

Yeah, you can use the approach of Ayoola but there is another option. You can use component.find() to get component by aura:id and directly set the value fo its attribute. For instance:

<!--parent.cmp-->
<aura:component>
    <aura:attribute name="parentAttr" type="String" default="parent attribute"/>

    <c:child aura:id="child" />
</aura:component>

<!--parentController-->
{(
    someFunction: function (component, event, helper) {
        component.find('child').set('v.childAttr', /* set any value you want dinamically */);
    },
)};
1

The application event should be used to pass attribute date between sister components. If you update your question with some code or more context, we can troubleshoot your implementation.

However,

Please see the Salesforce documentation on data binding for passing attributes between parent and child. (Snippet below) This is example will update values in real time - (bound expression)

<!--c:parent-->
<aura:component>
    <aura:attribute name="parentAttr" type="String" default="parent attribute"/>

    <!-- Instantiate the child component -->
    <c:child childAttr="{!v.parentAttr}" />
</aura:component>

This example will instantiate the attribute value and not update automatically - (unbound expression)

<c:child childAttr="{#v.parentAttr}" />

Not the answer you're looking for? Browse other questions tagged or ask your own question.