I am trying to launch a flow from a lightning component which is a button like below

Lightning Component

<aura:component implements="force:hasRecordId" access="global"  >
    <aura:attribute name="updateCase" type="Case" default="{'sobjectType':'Case'}"/>
    <lightning:button variant="brand" label="Change Owner" onclick="{!c.callOwnerChangeFlow}"  /> 
     <lightning:flow aura:id="OwnerChangeFlow" onstatuschange="{!c.statusChange}"/>     
    <lightning:spinner aura:id="mySpinner" alternativeText="Processing.." title="Processing.." variant="brand" size="large" class="slds-hide"/>


    callOwnerChangeFlow : function(c, e, h) {
    statusChange: function(c, e, h) {


    callOwnerChange_helper: function(c, e, h) {
        var flow = c.find("OwnerChangeFlow");
        var userId = $A.get( "$SObjectType.CurrentUser.Id" );
        var inputVariables = [
        flow.startFlow("Transfer_to_CS_User", inputVariables);
    statusChange_helper : function (component, event, helper) {
        if (event.getParam('status') === "FINISHED_SCREEN" || event.getParam('status') === "FINISHED") {
            var toastEvent = $A.get("e.force:showToast");
                title: "Success!",
                message: "Successfull!",
                type: "success"
        else if (event.getParam('status') === "ERROR") {
            component.set("v.hasError", true);

The flow is launched successfully when I click on the lightning component button but the issue is the flow screen is shown like this n the same page below the button

enter image description here

How can I launch the flow in to a new tab when the lightning component is clicked

  • No need to add _helper suffix in every helper method. Nov 24, 2020 at 3:48
  • What do you mean by new tab? Have you created a custom tab for that? Or is it opening in a console app? Nov 24, 2020 at 4:56
  • @NagendraSingh I want either the flow to be opened in the new browser tab/ in a console app tab. Or atleast open in a pop-up instead of showing the same screen
    – user81642
    Nov 24, 2020 at 6:50
  • @itzmukeshy sure will follow.. Can you please suggest how the flow can be fired in to anew browser tab/ pop up instead of same screen
    – user81642
    Nov 24, 2020 at 6:52

1 Answer 1


A modal would be very easy in this case.

Create a new component named as LightningFlow

<aura:component description="LightningFlow" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
    <aura:attribute name="testAttr" type="String"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <lightning:flow aura:id="flowData"/>

Controller as :

    doInit: function(component, event, helper){
        const flow = component.find("flowData");

Then from your main component just call this component as a modal

<aura:attribute type="Boolean" name="ismodalClicked"/>
<lightning:button onclick="{!c.openmodal}">Start Flow</lightning:button>
<aura:if isTrue="{!v.ismodalClicked}">
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">
                    <span class="slds-assistive-text">Close</span>
                <h2 id="header43" class="slds-text-heading--medium">Test Modal</h2>
            <div class="slds-modal__content slds-p-around--medium">
                    <c:LightningFlow testAttr="123"/>
            <div class="slds-modal__footer">
<div class="slds-backdrop " aura:id="Modalbackdrop"></div>

Controller :

    component.set('v.ismodalClicked', false);
    var cmpTarget = component.find('Modalbox');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
openmodal: function(component,event,helper) {
    component.set('v.ismodalClicked', true);
    var cmpTarget = component.find('Modalbox');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.addClass(cmpTarget, 'slds-fade-in-open');
    $A.util.addClass(cmpBack, 'slds-backdrop--open');

Now your flow opens up as a modal, if you want to pass values then you can pass via attributes etc, as the modal is the child component of your main component.


To pass value from parent to modal you can make use of attribute.

From parent change to <c:LightningFlow testAttr="123"/>

In your LightningFlow component just define the same attribute.

<aura:attribute name="testAttr" type="String"/>

Now you can access the attribute via component.get('v.testAttr'). Check code above.

  • This is great, thanks Can you please give an example how to pass the recordID from the main component to the modal thatcan be used by the flow
    – user81642
    Nov 25, 2020 at 13:33
  • Updated that in UPDATE section of my answer. Nov 25, 2020 at 13:43

You must log in to answer this question.

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