0

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

1 Answer 1

0

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.

7
  • I'm using <design:component> <design:attribute name="recordId" label="Record Id" /> </design:component> on both my components (component 1 and component 2) and then I'm storing that in a variable on the flow - not entirely sure what else I need to do to make it work..
    – erikvm
    Apr 18, 2019 at 12:13
  • Did you check what value you are getting in flow after cmp1 and before cmp2. do not fire any event from cmp1 because it wont be captured by any other cmp. Instead, use component.set to set value in your attribute. when value of component attribute is changed, it automatically reflects in flow as well. once set properly, you should be able to pass the same to cmp2 which lies on the next screen of your flow. you also need to put your cmp2 logic in init because your queryAssets won't be called. So move your logic to init. Apr 18, 2019 at 12:18
  • Also, it is recommended that do not define recordId as your attribute because it is a standard attribute which get inherited to component if force:hasRecordId is used in component implementation. Apr 18, 2019 at 12:27
  • Not sure I follow, can you clarify? > you check what value you are getting in flow after cmp1 and before cmp2 Also, what other options do I have than to fire an event? How else would I specify the record Id for another component to use
    – erikvm
    Apr 18, 2019 at 12:33
  • I have updated the answer with code. How your components should look like. Are you showing next button of flow to move to next screen. If yes, then code in answer should work, otherwise I'll update the code with logic to move flow to next screen automatically. Apr 18, 2019 at 13:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .