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
Best Answer
A modal would be very easy in this case.
Create a new component named as
LightningFlow
Controller as :
Then from your main component just call this component as a
modal
Controller :
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.Now you can access the attribute via
component.get('v.testAttr')
. Check code above.