Restart the Screen Flow in the Utility Bar when the current URL is updated #inSalesforce

Restart the Screen Flow in the Utility Bar when the current URL is updated #inSalesforce

Suppose we have a flow: As in https://www.youtube.com/watch?v=h98PccIdmlQ (https://thesalesforcetutorial.blogspot.com/2023/12/pass-record-id-to-flow-in-utility-bar.html)

Here we have created a recordId equals {!URL} returning text i/p and o/p checked.

Save and Activate the flow.

If the flow is added in the utility bar, remove the flow from the utility since it will be controlled from an Aura Component now.

Create an Aura Component: 

Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" >

<aura:handler name="change" value="{!v.recordId}" action="{!c.onRecordIdChange}"/> // This will fire function OnRecordIdChange

  Current Id is {!v.recordId}  . 

<lightning:flow aura:id="flowData" />

      {!v.body}

</aura:component>

Handler:

({

    onRecordIdChange : function(component, event, helper) {

        // We are going to destroy our Flow Element and dynamically re-create it every time the recordID changes. It goes it checks if there is a flow with same name, Destroy it and dynamically re-create it, once you are re-calling the flow it will take the updated ID's

        var flowfinal = component.find("flowData");

        if ($A.util.isUndefinedOrNull(flowfinal)) {

        }

        else      {

            flowfinal.destroy();

        }

        $A.createComponent(

            "lightning:flow",

            {

                "aura:id": "flowData"

            },

            function(NewFlow, status, errorMessage){

                //Add the new button to the body array

                if (status === "SUCCESS") {

                    var body = component.get("v.body");

                    body.push(NewFlow);

                    component.set("v.body", body);

                    console.log(NewFlow)

                }

                else if (status === "INCOMPLETE") {

                    console.log("No response from server or client is offline.")

                    // Show offline error

                }

                    else if (status === "ERROR") {

                        console.log("Error: " + errorMessage);

                        // Show error message

                    }

            }

        );

        // Find the component whose aura:id is "flowData"

        var flow = component.find("flowData");

        var recordId = component.get("v.recordId");

        const inputs = [];

        console.log(recordId);

        if(recordId) inputs.push({name:"recordId",type:"String",value:recordId});

        console.log("In puts here");

        console.log(recordId);

        // In that component, start your flow. Reference the flow's API Name.

        flow.startFlow("[YourFLOWNAME]",

                       inputs );

    }

})

Save them

Add this component in the Utility Bar and test it as in Visual