LaunchScreenFlow

LaunchScreenFlow.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes">
  <aura:attribute name="label" type="String" required="true" />
  <aura:attribute name="flowApiName" type="String" required="true" />
  <aura:attribute name="recordId" type="String" />
  <aura:attribute name="buttonStretched" type="Boolean" default="true" />
  <aura:attribute name="buttonVariant" type="String" required="true" />
  <aura:attribute name="buttonPadding" type="String" required="true" />

  <aura:attribute name="buttonClasses" type="String" />
  <aura:attribute name="overLayModal" type="Object" />
  <aura:handler name="init" value="{!this}" action="{!c.onInit}" />

  <button class="{! v.buttonClasses }" onclick="{! c.onButtonClicked }">{! v.label }</button>

  <lightning:overlayLibrary aura:id="overlayLib" />
</aura:component>

LaunchScreenFlow.design

<design:component>
    <design:attribute name="label" required="true" default="Close Case" />
    <design:attribute
        name="flowApiName"
        required="true"
        default="Close_Case_Button"
        label="Flow API Name"
    />
    <design:attribute name="recordId" default="{!recordId}" label="Record ID" />
    <design:attribute name="buttonStretched" default="true" label="Stretch Button?" />
    <design:attribute
        name="buttonVariant"
        default="brand"
        label="Button Variant"
        datasource="base,neutral,brand,brand-outline,destructive,destructive-text,inverse,success"
    />
    <design:attribute
        name="buttonPadding"
        default="x-small"
        label="Button Vertical Padding"
        datasource="none,x-small,small,medium,large"
    />
</design:component>

LaunchScreenFlowController.js

({
    onInit: function (component, event, helper) {
        let buttonClasses = ['slds-button'];
        const isStretched = component.get('v.buttonStretched');
        if (isStretched) {
            buttonClasses.push('slds-button_stretch');
        }
        const variant = component.get('v.buttonVariant');
        if (variant !== 'base') {
            buttonClasses.push('slds-button_' + variant);
        }
        const padding = component.get('v.buttonPadding');
        if (padding !== 'none') {
            buttonClasses.push('slds-p-vertical_' + padding);
        }

        component.set('v.buttonClasses', buttonClasses.join(' '));
    },
    onButtonClicked: function (component, event, helper) {
        const label = component.get('v.label');

        // Note: there are more sophisticated and reuseable ways to do this. For example: https://github.com/tsalb/lwc-utils/blob/d0f19fbf994d2cb2272b2cd1961bfe59db50bb04/utils-recipes/main/default/lwc/flowWizardLauncherExample/flowWizardLauncherExample.js#L49
        $A.createComponents(
            [
                [
                    'lightning:flow',
                    { onstatuschange: component.getReference('c.onFlowStatusChanged') },
                ],
                [
                    'lightning:button',
                    { label: 'Cancel', onclick: component.getReference('c.onFlowCancelled') },
                ],
            ],
            function (contents, status) {
                if (status === 'SUCCESS') {
                    let flow = contents[0];
                    let footer = contents[1];
                    component
                        .find('overlayLib')
                        .showCustomModal({
                            header: label,
                            body: flow,
                            footer: footer,
                            showCloseButton: true,
                            closeCallback: function () {
                                component.set('v.overLayModal', null);
                            },
                        })
                        .then(
                            $A.getCallback(function (modalRef) {
                                component.set('v.overLayModal', modalRef);
                                const flowApiName = component.get('v.flowApiName');
                                const recordId = component.get('v.recordId');
                                console.log(recordId);
                                let inputVariables = [
                                    {
                                        name: 'recordId',
                                        type: 'String',
                                        value: recordId,
                                    },
                                ];
                                flow.startFlow(flowApiName, inputVariables);
                            })
                        );
                }
            }
        );
    },

    onFlowCancelled: function (component, event, helper) {
        helper.closeModal(component);
    },
    onFlowStatusChanged: function (component, event, helper) {
        if (event.getParam('status') === 'FINISHED') {
            $A.get('e.force:refreshView').fire();
            helper.closeModal(component);
        }
    },
});

LaunchScreenFlowHelper.js

({
    closeModal: function (component) {
        let modalRef = component.get('v.overLayModal');
        if (modalRef) {
            modalRef.close();
        }
    },
});