Pass application event to another component in Lightning Flow?

Question

I'm trying to build a form of "journey" through lightning components in the new Flow designer but I'm having a hard time making the flow play. Basically, I've got component 1 that let's the user select an account - selecting an account triggers an application event and another component listens for that event to render Assets that belongs to the account in component 2. This works fine If I just put the different components on a Lightning Page. However, I wish to embed each component in a Flow, and have each component on a separate screen. E.g screen #1 shows component 1, -> user selects an account and clicks Next and component 2 on screen #2 displays the assets that belongs to component 1 on screen #1.

I did include the recordId in a design attribute and I can see the recordId being clicked when I go to screen #2, but for some reason, component 2 does not receive the event since it sits on a different screen.

Here's the event for component 1

onRowAction: function( component, event, helper ) {
        var action = event.getParam( 'action' );
        var row = event.getParam( 'row' );
        if (action.name == 'check_record') {
            component.set("v.recordId", row.Id)
            var event = $A.get("e.c:AccountSelected")
            event.setParams({
                accoId: row.Id
            });
        }
        event.fire();
    }

And then the handler that listens to the event in component 2:

<aura:handler event="c:AccountSelected" action="{!c.queryAssets}" />

queryAssets: function(component, event, helper) {
        let accountId = event.getParam('accoId');
            helper.callServer(component, "c.getResources", function(response) {
                component.set("v.assetList", response);
            }, {accId: accountId});
        },

Why is component 2 not receiving anything when the event is fired in component 1

Answer 1

Events won't work in your use case because when you fire the event, cmp 2 doesn't even exist. It would work if both components were dropped on the same screen. Refer here: https://developingflow.com/2018/06/11/lightning-components-in-flow/

You need to use design attributes on both the components and use flow as your data carrier.

CMP1:

<aura:component implements="lightning:availableForFlowScreens" access="global" >
   <aura:attribute name="accId" type="String" required="true" />
   <!-- HERE GOES YOUR UI CODE -->
</aura:component>

CMP1 Design File:

<design:component>
   <design:attribute name="accId" label="Account Id" />
</design:component>

CMP1 JS Controller:

onRowAction: function( component, event, helper ) {
    var action = event.getParam( 'action' );
    var row = event.getParam( 'row' );
    if (action.name == 'check_record') {
        component.set("v.accId", row.Id);
    }
}

CMP2:

<aura:component implements="lightning:availableForFlowScreens" access="global" >
   <aura:attribute name="accId" type="String" required="true" />
   <aura:handler name="init" value="{! this}" action="{! c.doInit}"/>
   <!-- HERE GOES YOUR UI CODE FOR CMP 2-->
</aura:component>

CMP2 Design File:

<design:component>
   <design:attribute name="accId" label="Account Id" />
</design:component>

CMP2 JS Controller:

    doInit: function( component, event, helper ) {
    let accountId = component.get("v.accId");
            helper.callServer(component, "c.getResources", function(response) {
                component.set("v.assetList", response);
            }, {accId: accountId});
        },
}

Your code for both components should look like this. You just need to make sure that you are getting accId from cmp1 and passing it to cmp2. This you can do while dropping your lightning component on flow screen. All design attributes comes under Input/Output section in flow screen. So under output section on screen 1, store accId value in some flow variable and use same variable to pass accId as an input to cmp2.