Invoke Flow From Lightning Component With Input Variables

Using lightning:flow component, we can invoke a flow in Lightning runtime. This component requires API version 41.0 and later. Here is an example to delete all Contact records from an Account using a flow.

Here I’ve created a flow and the flow is invoked by a lightning component, and that lightning component is configured with a QuickAction on Account object.

1. Go to Setup | Quick Find – Search Flows | New Flow

2. Create a variable as “AccountId”

3. Create a sObject Collection Variable as “CollectionOfContacts”

4. Create a Fast Lookup to get Contacts with Account Id

5. Create a Decision to check Account has contacts.

6. Default Outcome in Decision

7. Create Fast Delete to delete Contacts

8. Set the Fast Lookup as a starting element, indicated by the green down arrow. Then, connect the flow element “Fast Lookup” to “Decision” and “Decision” to “Fast Delete”.

9. Create a Lightning Component to invoke the flow.

Lightning component:

<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId">
    
    <!--Custom Styles for Modal Header and Footer--> 
    <aura:html tag="style">
        .cuf-content {
        padding: 0 0rem !important;
        }
        .slds-p-around--medium {
        padding: 0rem !important;
        }       
        .slds-modal__content{
        overflow-y:hidden !important;
        height:unset !important;
        max-height:unset !important;
        }
    </aura:html>
    
    <!--Declare Attributes--> 
    <aura:attribute name="hasError" type="Boolean" default="false"/>
    
    <!--Modal Header-->  
    <div class="modal-header slds-modal__header slds-size_1-of-1">
        <h4 class="title slds-text-heading--medium">Delete Contacts</h4>
    </div>
    <!--End Modal Header-->  
    
    <!--Modal Body-->   
    <div class="slds-modal__content slds-p-around--x-small slds-align_absolute-center slds-size_1-of-1 slds-is-relative">
        <form class="slds-form--stacked">
            <aura:if isTrue="{!!v.hasError}">
                <div class="slds-align_absolute-center">
                    Do you want to delete all contacts?
                </div>
                <aura:set attribute="else">
                    <div>
                        <div class="slds-text-color_error">Error on Contact record deletion.
                            Please forward following error message to your admin:</div>
                    </div>
                </aura:set>
            </aura:if>
            <div>
                <!--Lightning Flow Attribute-->
                <lightning:flow aura:id="deleteContactFlow" onstatuschange="{!c.statusChange}"/>
            </div>
        </form> 
    </div>
    <!--End of Modal Body--> 
    
    <!--Modal Footer-->
    <div class="modal-footer slds-modal__footer slds-size_1-of-1">
        <lightning:button variant="Brand" class="slds-button" label="Confirm" onclick="{!c.handleConfirm}"/>
        <lightning:button variant="Neutral" class="slds-button" label="Cancel" onclick="{!c.handleClose}"/>
    </div>
    <!--End of Modal Footer-->
</aura:component>

Lightning JS Controller:

({
    //Confirm 
    handleConfirm : function(component, event, helper) {
        //Find lightning flow from component
        var flow = component.find("deleteContactFlow");
        //Put input variable values
        var inputVariables = [
            {
                name : "AccountId",
                type : "String",
                value : component.get("v.recordId")
            }
        ];
        //Reference flow's Unique Name
        flow.startFlow("Delete_Contact_From_Account", inputVariables);
    },
    
    //Close the quick action
    handleClose : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    },
    
    //Flow Status Change
    statusChange : function (component, event, helper) {
        //Check Flow Status
        if (event.getParam('status') === "FINISHED_SCREEN" || event.getParam('status') === "FINISHED") {
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                title: "Success!",
                message: "Contacts deleted successfully!",
                type: "success"
            });
            toastEvent.fire();
            $A.get("e.force:closeQuickAction").fire();
            $A.get('e.force:refreshView').fire();
        } else if (event.getParam('status') === "ERROR") {
            component.set("v.hasError", true);
        }
    }
})

10. Configure above created lightning component on Account object Quick Action.

11. Add created quick action on Account object page layout.

12. Here is the quick action to delete all contacts.