html code

Enabling Communication Between Two Salesforce Lightning Components Using Attributes

/ apex, Salesforce / By

Facilitating communication between two Salesforce Lightning Components involves transferring data between a child and parent component or vice versa. A direct interaction between a component and its parent or another component isn’t possible via standard JavaScript. Communication channels must be explicitly defined by the programmer.

Communication between Salesforce Lightning Components can occur through two methods:

  • Using Attributes or Methods to transfer data from parent to child component.
  • Using Events for Data Transfer from child to parent component.

Here, we’ll explore component communication via attributes.

A code excerpt for transferring a parent attribute value to a child attribute:

1.Component at the Parent Level:

<aura:component access="global">
    <aura:attribute name="parentAttribute" type="String" default='test'/>
    <c:ChildComponent childAttribute="{!v.parentAttribute}"/>
</aura:component>

2.Component at the Child Level:

<aura:component access="global">
    <aura:attribute name="childAttribute" type="String"/>
    <table class="slds-table ">
        <tr>
            <td>
                <div class="topSpacing">
                    <label class="slds-form-element__label ">Name</label>
                </div>
                <div class="width">
                    <ui:outputText class="slds-output" value="{!v.childAttribute}"></ui:outputText>
                </div>
            </td>
        </tr>
    </table>
</aura:component>

3.Lightning App

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

The UI of your component resembles the screenshot below. In this setup, we’re providing a default value from the parent component to the child component.

Related Posts