[SalesForce] Use event to pass attribute from One component to Other

I have home page which has one button to create account. On click of save I want to hide my Home page component and open new component.
My Account creation component is separate component which I have included on my home page. I am using component to show hide home page but unable to get the boolean value on home page from Account creation page.

My code is:

HomePageComponent:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:handler event="c:BP_NewAccountCreationEvent" action="{!c.getPopUpId}"/>
    <aura:attribute name="ShowNextPage" type="Boolean" default="true"/>
        {!v.body}
    <aura:if isTrue="{!v.ShowNextPage}"

AccountcreationJS

({
    myAction : function(component, event, helper) {

    },
    saveAccount : function(component, event, helper) {
        console.log('IN SaveAccount')
        var action = component.get("c.createAccount");
        action.setParams({"newAcc" : component.get("v.newAccount")});
        action.setCallback(this,function(a){
            if (a.getState() === "SUCCESS") {
                component.set("v.ShowNextPage", "false");
                $A.createComponent(
                    "c:SampleComponent",
                    {

                    },
                    function(newCmp){
                        if (component.isValid()) {
                        component.set("v.body", newCmp);
                        }
                    }

                );

            } else if (a.getState() === "ERROR") {
                $A.log("Errors", a.getError());
                console.log('****Error****');
            }

        });
        $A.enqueueAction(action);

I need ShowNextpage value from this controller to Home page component
.

Best Answer

In controller you setting a boolean value as String

~~component.set("v.ShowNextPage", "false");~~

You must set a Boolean value as

component.set("v.ShowNextPage", false);

Related Solutions

[SalesForce] Lightning Components: handle event from one particular component

You can fire an application event from the Modal component(which you are doing now), which carries necessary data and a unique indentifier(might me workitem id) to identify a specific child component.

Also, passing the workitem object from the workItem Component would also work too but you have access it incorrectly in the modal component.

So do the following changes:

taskModalController.js

1.Access the workitem using event.getParam():

showTaskModal : function(component, event, helper) {

    var taskModal = component.find('task-modal');
    $A.util.removeClass(taskModal, "hide")
    var workItem = event.getParam('work'); // Now you'll get the workitem object
    console.log('event.getParam(work??)', workItem);
    component.set('v.work', workItem);
}

2.Add the workItem object/id to the AA_updateTaskEvent app event along with taskName.

saveTask: function(component, event, helper){
    var taskInput = component.find('task-input');
    var taskName = taskInput.get("v.value");
    var updateEvent = $A.get("e.c:AA_updateTaskEvent");

    updateEvent.setParams(
        {
            'taskName': taskName,
            'workItemId':component.get("v.work").Id
        }

    );

    updateEvent.fire();
    // other logics
},

3.Check if you need to add the task in workItem child.

workItemController.js

updateTask: function(component, event, helper){

    console.log('fired update task in work item-------------------');
    var taskName = event.getParam("taskName"); // Get the task name
    var workItemId = event.getParam("workItemId"); // Get the workitemid 
    var workItem = component.get("v.work");

    //if it turns out true, then we have got to the workitem component whose's task should be updated.
    if(workItem.Id == workItemId){
        var newTask = {agf__Subject__c: taskName};

        var workTasks = component.get("v.tasks");
        console.log("the work item-----", workTasks)

        workTasks.push(newTask);
        component.set("v.tasks", workTasks);
    }

    //all work items get pushed my new task since workItem.cmp
    //has a listener
}

To answer your other questions.

1) I have already answer it above.

2) In my opinion its better to keep the modal in the root rather than in the workItem which causes unnecessary DOM to be present. Honestly, I don't see anything complicate here.

3) Application events are best suited in places where components that aren't part of containment hierarchy need to communicate. Your discussion to keep the modal standalone(common to your app/component) and communicating with app event is a perfect example.

[SalesForce] Passing attribute from one component to other

Try this format for dependencies -

<aura:dependency resource="markup://c:SA_OppRenewal" />