2

I have a flow screen which has a standard input text component with API Name as 'AccountNumber'. I have disabled the standard footer and embedded a custom lightning component to control the flow navigation. I am passing the 'AccountNumber' as input to the custom footer component and trying to check if it has a valid value before navigating to the next step in the flow.

I am not able to get the value entered in the screen inside my custom footer component - it is always null/undefined. Looks like the attribute value is passed when the component is initialized for the first time (when screen loads) and it never gets the updated value.

Of course I can place the 'Account Number' input within my custom component itself rather than using the standard input, is there any other option available to get updated values from the screen? Even controlling the custom component visibility based on AccountNumber (not null check) did not help since the component seems to be initialized when the screen loads even if it is not visible until the account number is entered.

Here is my flow screen, enter image description here

I am passing the entered account number in the custom flow footer component here, enter image description here

Here is the component code, please note that I am putting the value into console log before triggering the navigation. This is not an actual implementation, but this should illustrate what we are trying to do.

testFlowFooter.cmp

   <div aura:id="actionButtonBar" class="slds-clearfix slds-p-top_medium">
      <!-- If Previous is available, display to the left -->
      <div class="slds-float_left">
         <aura:if isTrue="{!v.canBack}">
            <lightning:button aura:id="BACK" label="Previous"
               variant="neutral" onclick="{!c.onButtonPressed}" />
         </aura:if>
      </div>
      <div class="slds-float_right">
         <!-- If Pause, Next, or Finish are available, display to the right -->
         <aura:if isTrue="{!v.canPause}">
            <lightning:button aura:id="PAUSE" label="Pause"
               variant="neutral" onclick="{!c.onButtonPressed}" />
         </aura:if>
         <aura:if isTrue="{!v.canNext}">
            <lightning:button aura:id="NEXT" label="Next" 
               variant="brand" onclick="{!c.onButtonPressed}" />
         </aura:if>
         <aura:if isTrue="{!v.canFinish}">
            <lightning:button aura:id="FINISH" label="Done"
               variant="brand" onclick="{!c.onButtonPressed}" />
         </aura:if>
      </div>
   </div>
</aura:component>

testFlowFooter.design

<design:component>
    <design:attribute name="transactionID" label="Transaction ID" description="Selected Transaction Id"/>
    <design:attribute name="accountNumber" label="Account Number" description="Entered Account Number"/>
</design:component>

testFlowFooterController.js

({
   init : function(cmp, event, helper) {
      // Figure out which buttons to display
      var availableActions = cmp.get('v.availableActions');
      for (var i = 0; i < availableActions.length; i++) {
         if (availableActions[i] == "PAUSE") {
            cmp.set("v.canPause", true);
         } else if (availableActions[i] == "BACK") {
            cmp.set("v.canBack", true);
         } else if (availableActions[i] == "NEXT") {
            cmp.set("v.canNext", true);
         } else if (availableActions[i] == "FINISH") {
            cmp.set("v.canFinish", true);
         }
      }
      //console.log('testFlowFooter component initialized');
   },

   onButtonPressed: function(cmp, event, helper) {
      // Figure out which action was called
      var actionClicked = event.getSource().getLocalId();
      //console.log("Action Clicked : " + actionClicked);

      // Putting into console log for testing purposes, but with actual integration we may do something more meaningful
      console.log("Account Number : " + cmp.get('v.accountNumber'));
      // Fire that action
      var navigate = cmp.get('v.navigateFlow');
      navigate(actionClicked);
   }
})
2
  • 1
    Can you add relevant code snippets and screenshots? Dec 31, 2019 at 22:26
  • Added screenshots and snippets, please let me know if any other information is required.
    – Mohan P
    Jan 2, 2020 at 18:39

0

You must log in to answer this question.

Browse other questions tagged .