function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Bob Poliquin 9Bob Poliquin 9 

Flow wrapped in a lightning component using e.force:closeQuickAction

I have a flow wrapped in a lightning component for a global action. 

The flow worked fine in the lightning component but the problem is the flow will run then go back to the start. I want the screen to disppear after the user clicks finish.

hen I added the e.force:closeQuickAction and click the global action the flow screen doesn't really open, but you can see it automatically close to the lower right hand corner of the computer screen. I'm not sure if I need to add something to my code below to only close the screen after the flow finishes but I'm not sure where the issue is with my code. 
  
<aura:component implements="force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome,force:lightningQuickAction"  >

<aura:handler name="init"  value="{!this}" action="{!c.init}" />
<lightning:flow aura:id="flowData" />
    <br/>
    
</aura:component>
  
({
init : function (component) {
// Find the component whose aura:id is "flowData"
var flow = component.find("flowData");
// In that component, start your flow. Reference the flow’s Unique Name.
flow.startFlow("New_IT_Support_Case");
    
    // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
  },
})

 
Best Answer chosen by Bob Poliquin 9
Philippe UyttendaelePhilippe Uyttendaele
My bad miss a coma on line 9 
  
({

/* Launch the correct flow */
  init : function (cmp) {
    var flow = cmp.find("flowData");
    flow.startFlow("New_IT_Support_Case");
  },

/*On change listener*/
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "FINISHED") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "New_IT_Support_Case") {
            var urlEvent = $A.get("e.force:navigateToSObject");
            urlEvent.setParams({
               "recordId": outputVar.value,
               "isredirect": "true"
            });
            urlEvent.fire();
         }
      }
   }
      
}
    
})

 

All Answers

Philippe UyttendaelePhilippe Uyttendaele
hey Bob,

did you have a look here :
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_flow_onfinish.htm ?

Phil
Bob Poliquin 9Bob Poliquin 9
Hi Phillippe,
thanks for your help.
I added the code to the link you provider but the flow screen still goes back to the beginning. 

Here is my updated code

  
({
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "FINISHED") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "redirect") {
            var urlEvent = $A.get("e.force:navigateToSObject");
            urlEvent.setParams({
               "recordId": outputVar.value,
               "isredirect": "true"
            });
            urlEvent.fire();
         }
      }
   }
}
    
})

And then I tried this and the screen just pops up and goes away before i do anything.
  
({
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "FINISHED") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "redirect") {
            var urlEvent = $A.get("e.force:navigateToSObject");
            urlEvent.setParams({
               "recordId": outputVar.value,
               "isredirect": "true"
            });
            urlEvent.fire();
         }
      }
   }
       // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
}
    
})



 
Bob Poliquin 9Bob Poliquin 9
I am getting a Error while creating component for lightning component quick action [Unable to find action 'init' on the controller of c:CreateNewCase] with this code below.
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickAction"  >

<aura:handler name="init"  value="{!this}" action="{!c.init}" />
<lightning:flow aura:id="flowData" onstatuschange="{!c.handleStatusChange}" />
    <br/>
    
</aura:component>

({
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "FINISHED") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "New_IT_Support_Case") {
            var urlEvent = $A.get("e.force:navigateToSObject");
            urlEvent.setParams({
               "recordId": outputVar.value,
               "isredirect": "true"
            });
            urlEvent.fire();
         }
      }
   }
      
}
    
})

 
Philippe UyttendaelePhilippe Uyttendaele
The error comes from your line 
<aura:handler name="init" value="{!this}" action="{!c.init}" />

consider removing it.

explanation : action="{!c.init} means that on initialization of your component it calls the init function in the controller ( -> c.init )
but you don't have it ;-)

Phil
Bob Poliquin 9Bob Poliquin 9
Hi,

I updated my code to this below and the error goes away but I get a blank flowscreen  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickAction"  >


<lightning:flow aura:id="flowData" onstatuschange="{!c.handleStatusChange}" />
    <br/>
    
</aura:component>
  
({
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "FINISHED") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "New_IT_Support_Case") {
            var urlEvent = $A.get("e.force:navigateToSObject");
            urlEvent.setParams({
               "recordId": outputVar.value,
               "isredirect": "true"
            });
            urlEvent.fire();
         }
      }
   }
      
}
    
})

Screenshot of result
User-added image
 
Philippe UyttendaelePhilippe Uyttendaele
hello Bob,

Consider this way : 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickAction" >

<!-- Initialize the component to show the flow -->
<aura:handler name="init" value="{!this}" action="{!c.init}" />

<! -- The marker for the flow. with a listener on the status change -->
<lightning:flow aura:id="flowData" onstatuschange="{!c.handleStatusChange}" />
    <br/>
    
</aura:component>
  
({

/* Launch the correct flow */
  init : function (cmp) {
    var flow = cmp.find("flowData");
    flow.startFlow("New_IT_Support_Case");
  }

/*On change listener*/
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "FINISHED") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "New_IT_Support_Case") {
            var urlEvent = $A.get("e.force:navigateToSObject");
            urlEvent.setParams({
               "recordId": outputVar.value,
               "isredirect": "true"
            });
            urlEvent.fire();
         }
      }
   }
      
}
    
})

Hope this will work for you.

Phil
 
Bob Poliquin 9Bob Poliquin 9
Hi Phillippe,
thank you for the above ,i received the following error when i tried to save the updates code.

User-added image
Philippe UyttendaelePhilippe Uyttendaele
My bad miss a coma on line 9 
  
({

/* Launch the correct flow */
  init : function (cmp) {
    var flow = cmp.find("flowData");
    flow.startFlow("New_IT_Support_Case");
  },

/*On change listener*/
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "FINISHED") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "New_IT_Support_Case") {
            var urlEvent = $A.get("e.force:navigateToSObject");
            urlEvent.setParams({
               "recordId": outputVar.value,
               "isredirect": "true"
            });
            urlEvent.fire();
         }
      }
   }
      
}
    
})

 
This was selected as the best answer
Bob Poliquin 9Bob Poliquin 9
Hi Phillippe,

Thank you I was able to save the updated component but I am receiving the following error whgen i try to create the IT case

Uncaught Action failed: c:CreateNewCase$controller$handleStatusChange [Cannot read property 'length' of undefined]
Callback failed: serviceComponent://ui.interaction.runtime.components.controllers.FlowRuntimeController/ACTION$executeAction
Bob Poliquin 9Bob Poliquin 9
Hi Phillippe,

I adjust my flow to create a new IT case and I was able to get rid of the error and the code you provided does work where a case is created and a redirects to the newly created case  with no other screen works when i add the lightning component to my lightning home page layout.

But, It is very odd when executing the same flow from a Global Action menu it still works but there is a Finish button at the end of the flow and then it returns back to the beginning of the flow. See Screen shots below.

I don't know if there is something else I can add to change the behavior in the lightning component global action button to perform like it does on the home page or outside of the global action button. 
End of Flow

User-added image


Beginning of Flow
User-added image
Bob Poliquin 9Bob Poliquin 9

Hi Phillippe,
Just circling back to this post, Thank you for helping me.  I am marking your post as best anwser, but i wanted to share the updated code that  resolves my requirements with the following code. 
  
({
/* Launch the correct flow */
  init : function (cmp) {
    var flow = cmp.find("flowData");
    flow.startFlow("New_IT_Support_Case");
      
  },

/*On change listener*/
handleStatusChange : function (component, event) {
   if(event.getParam("status") === "Next") {
      var outputVariables = event.getParam("outputVariables");
      var outputVar;
      for(var i = 0; i < outputVariables.length; i++) {
         outputVar = outputVariables[i];
         if(outputVar.name === "New_IT_Support_Case") 

         $A.get("e.force:closeQuickAction").fire();
        }
     }
  }    
       
})