Search code examples
javascriptcomponentssalesforce-lightningsalesforce-developer

Salesforce Aura Component - getting current v.recordId for Flow variable


I am fairly new to Aura Component and Javascript so I do apologize for my wording if you find it inaccurate.

In my previous question I was able to know how I can grab the current recordID and pass it to Flow as a variable in the component controller. My goal is to get the current recordID of the page it could be Opportunity Account and Lead or even have it as null, my flow is equipped to handle all the IDs.

Here is my Code:

Component:

    <aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,lightning:isUrlAddressable" access="global" >
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}" event="force:refreshView" />
     <aura:handler name="change" value="{!v.recordId}" action="{!c.onRecordIdChange}"/>
     <lightning:utilityBarAPI aura:id="utilitybar" />
    <br/>
      Account Id is {!v.recordId} // This updating properly everytime I switch from home screen to recordID its updating real time.
    <lightning:formattedText value="{!v.recordId}" aura:id="ThisRecord" />
    <lightning:flow aura:id="flowData" onstatuschange="{!c.minimizeUtility}" />

</aura:component>

JS component controller:

   ({
   minimizeUtility : function(component, event, helper) {
        if(event.getParam("status") === "FINISHED") {
            
        var utilityAPI = component.find("utilitybar");
        utilityAPI.minimizeUtility();
        }
    },
    
    onRecordIdChange : function(component, event, helper) {
        
       $A.get("e.force:refreshView").fire();
        
        var newRecordId = component.get("v.recordId");
        console.log(newRecordId);
          // Find the component whose aura:id is "flowData"
        var flow = component.find("flowData");
      
      const recordId = component.find("ThisRecord").get("v.value"); const inputs = []; if(recordId) inputs.push({name:"recordId",type:"String",value:recordId});

        // In that component, start your flow. Reference the flow's API Name.
        flow.startFlow("MyFlowHere",
                     inputs );
        
    
        
    },
    
       reInit : function(component, event, helper) {
       alert("hello there!"); 
    },
    
   
   getInput : function(cmp, event) { 
      alert("hello there!"); 
   }
 
})

Right now I have the Component set up and it's sending the current recordID as expected but there I a little issue. You see if I am on the home screen and switch to an account the v.RecordID does not get updated. even tho it's set up to relaunch the flow each time the v.RecordID changes but it's not, so when the home screen has the v.Record = null, even tho I jumped into an account page it does not update the recordID there for the ID being passed is incorrect.

I need a way to refresh or relaunch the flow function each time the page changes or the v.RecordID changes to re-render the const recordId = component.find("ThisRecord").get("v.value"); so it always grabs the updated ID. I can see the aura component text is being updated each time I switch records but the function that grabs the ID is not being refreshed there for always having old ID.

I have tried to change the session setting on my org but that didn't help I read about it here but that didn't help.

Please let me know if you know of any way of helping me out! Thanks!


Solution

  • Okay, I figured it out!

    I am posting this to help anyone who needs a simpler solution for this. I saw some similar issues and the answers are pretty long and unclear.

    In order to have the newest RecordId as it gets refreshed, you will need to re-start flow but there is no default way of doing this so I have a handler that fires action upon record change. It simply destroyed the old Flow component and created one from scratch dynamically and calls upon the flow again.

    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
      Account Id is {!v.recordId}  . 
    <lightning:flow aura:id="flowData" />
          {!v.body}
    </aura:component>
    

    Controller JS:

      ({
     
        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("One_Click_Request_Flow_1",
                         inputs );
            
        
            
        }
      
     
    })