1

I have this below code where i am trying to first search an account name and on hit button it displays the result set.

On the button click i am also loading an child component which is displaying the id of the record.

I need the child component should get displayed once i click on the record.

How can i achieve this -

Parent Component -

<aura:component controller="SimpleAccountController">
    <aura:attribute name="account" type="account[]"/>
    <ui:outputText aura:id="outName" value="" class="text"/>
    <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
    <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Click me" press="{!c.getInput}"/>
    <aura:iteration var="acc" items="{!v.account}">
            <a onclick="{!c.accountselected}" data-recId="{!acc.Id}">
        <p>{!acc.Name} : {!acc.Type} : {!acc.Industry} : {!acc.Rating}</p>
            </a>
        <c:HelloWorkdChildCmp selectedaccount="{!acc.Id}" />
    </aura:iteration>
</aura:component>

COntroller -

({
    getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
        var action = cmp.get("c.seaAcc");
        action.setParams({ "s" : myName });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.account", response.getReturnValue());
                //alert("From server: " + response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },

    accountselected : function(cmp, evt) {
       console.log(evt.currentTarget.getAttribute("data-recId")) ;
    }

})

Child component -

<aura:component >
    <aura:attribute name="selectedaccount" type="String"/>
    <div>Id: {!v.selectedaccount}</div>
</aura:component>
  • 1
    You should start by reading this documentation. Then, just add a new boolean attribute and set its value to true when you click on the record. – Martin Lezer Oct 25 '17 at 12:33
  • use aura:if and embed your conditional rendering section inside it. – Sikha Baid Oct 25 '17 at 12:37
  • This will be somewhat like hide and display section..What if whenever i click the record value should get passed via controller and then gets displayed in my child component..Hope i am making some sense... – user2542953 Oct 25 '17 at 12:41
  • Please make sure you have record of your entered name. because I'm trying your code and it was succeed. – Akshay Dhiman Oct 25 '17 at 13:05
  • Ok .. I will put in this way.. How can i achieve this using event in lighnting – user2542953 Oct 25 '17 at 13:27
3

This question falls into Parent to child integration pattern so there are multiple solutions

1. aura:attribute:

   Aura:Attribute is most commonly used communication pattern where parent component can initialize and pass value at later time.

    <c:HelloWorkdChildCmp selectedaccount="{!acc.Id}" anotherattribute="VALUE" />

2. Aura:Method:

This enables you to directly call a method in a child component’s client-side controller instead of firing and handling a component event. Using simplifies the code needed for a parent component to call a method on a child component that it contains. It is done using aura:id.

Child Component

<aura:component>
    <aura:method name="sampleMethod" action="{!c.doAction}"
  description="Sample method with parameters"> 
    <aura:attribute name="param1" type="String" default="parameter 1"/> 
    <aura:attribute name="param2" type="Object" /> 
</aura:method>
</aura:component>

Child component.js

({
    doAction : function(cmp, event) {
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            // add your code here
        }
    }
})

Parentcomponent.cmp

<aura:component>
    <c:ChildComponent aura:id="compB"/>
        <lightning:button label="Call child method" onclick="{! c.onAction}" />

</aura:component>

Parentcomponent.js

({
    onAction : function(component, event, helper) {
        var objCompB = component.find('compB');
        objCompB.sampleMethod("Param1", "Param2");
    }
})

3. Application event

Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

applicationevent.evt

<!--c:aeEvent-->
<aura:event type="APPLICATION">
    <aura:attribute name="message" type="String"/>
</aura:event>

Parent component

/* aeNotifierController.js */
{
    fireApplicationEvent : function(cmp, event) {
        // Get the application event by using the
        // e.<namespace>.<event> syntax
        var appEvent = $A.get("e.c:aeEvent");
        appEvent.setParams({
            "message" : "An application event fired me. " +
            "It all happened so fast. Now, I'm everywhere!" });
        appEvent.fire();
    }
}

childcomponenthandler.js

/* aeHandlerController.js */
{
    handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("message");

        // set the handler attributes based on event data
        cmp.set("v.messageFromEvent", message);
        var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
        cmp.set("v.numEvents", numEventsHandled);
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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