Lightning component to launch the screen flow

Question

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"/>
</aura:component>

Controller

({
    callOwnerChangeFlow : function(c, e, h) {
        h.callOwnerChange_helper(c,e,h);
    },        
    statusChange: function(c, e, h) {
        h.statusChange_helper(c,e,h);
    },
    
})

Helper

({
    callOwnerChange_helper: function(c, e, h) {
        var flow = c.find("OwnerChangeFlow");
        var userId = $A.get( "$SObjectType.CurrentUser.Id" );
        var inputVariables = [
            {
                name:"varCaseId",
                type:"String",
                value:c.get("v.recordId")
            }];         
        flow.startFlow("Transfer_to_CS_User", inputVariables);
    },
    
    statusChange_helper : function (component, event, helper) {
        if (event.getParam('status') === "FINISHED_SCREEN" || event.getParam('status') === "FINISHED") {
            window.location.reload();
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                title: "Success!",
                message: "Successfull!",
                type: "success"
            });
           toastEvent.fire();
        } 
        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

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

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"
                access="global">
    <aura:attribute name="testAttr" type="String"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <lightning:flow aura:id="flowData"/>
</aura:component>

Controller as :

({
    doInit: function(component, event, helper){
        alert(component.get('v.testAttr'));
        const flow = component.find("flowData");
        flow.startFlow("CreateAccountViaFlow");
    }
});

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>
                </button>
                <h2 id="header43" class="slds-text-heading--medium">Test Modal</h2>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div>
                    <c:LightningFlow testAttr="123"/>
                </div>
            </div>
            <div class="slds-modal__footer">
            </div>
        </div>
    </div>
</aura:if>
<div class="slds-backdrop " aura:id="Modalbackdrop"></div>

Controller :

closeModal:function(component,event,helper){
    component.set('v.ismodalClicked', false);
    var cmpTarget = component.find('Modalbox');
    var cmpBack = component.find('Modalbackdrop');
    $A.util.removeClass(cmpBack,'slds-backdrop--open');
    $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.

UPDATE

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.