Flow: – A three-step Wizard

Use Case:  Amanda Waller of ARGUS corp, wants Bruce Wayne to provide a way to create the Account, contact and opportunity with just one Click and Simple information from the Clients mainly the name of the customer, email, phone and other necessary details.

It should display all the Information prior to inserting anything.

After the record is successfully saved, redirect to the newly created opportunity record, or else joker can get a hold of the confidential data.

Solution: –

Bruce decided to go with the No (or minimal) code approach to solve this problem, so he suggested Waller use flow in this and for redirection, embed the flow in the lightning component.

So let’s get started Bruce without any commotion.

Okay, let’s create the Account and Contact screen first.

Checklist: –

  • Account name
  • Contact first and last name
  • Mobile
  • Email
  1. Now Wire Up all the screen values with the help of variables.
  2. For that let’s create a record variable for account and contact. First up, AccountVariable
  1. After creating this variable, wire up the Account name input of the screen to this record variable. It should Look Like this.
  1. We will do the Same for contact create a contact variable in the same way we created the Account variable one and wire up the firstname , lastname, salutation, Email and phone field with the contact variable’ s field.
  2. Click on a checkbox stating “manually assign variables (advanced)”

Map the required field to contact variables

For the Name field, it should look like this.

  1. Similarly, do the same for the email and phone field. After, finishing up, Our Flow will look like this.
  1. Now add the Opportunity screen to capture the Opportunity details.

Checklist:

  • Name
  • Stage
  • CloseDate

This is our screen to capture the Opportunity details. 

Notice the screen component, we are using text, picklist and date all from left hand side panel. Nothing here requires code, this is all generally available. 

Note: For picklist, we are using the picklist option from the available screen component.

This is what our Flow will look like now.

  1. Now create an opportunity variable and wire up the opportunity detail screen fields with the respected fields of the Opportunity variable with the help of the Assignment element.
  2. In order to assign the opportunity name and account name we are going to use “Assignment element”. Set up like this to capture the Name of both account and opportunity fields and pass it to the respected variable.
  1. Our Flow after this Step will look like this.
  1.  Now show all the captured info on the Screen using the display text and variable we used to store the information. After finishing it will look like this.

Let’s debug it to check if everything is working fine, then we can go on With the DML operations. Click on the Debug button to debug the flow, it is a good practice to debug flow before distributing it, so that it doesn’t cause any issue later on. Here is the first screen we created. Let’s fill the details and click the next same for the opportunity and then see the details.

Final screen will look like this.

Now , this Looks Fine and we are good to insert the records. So let’s begin the record creation process.

  1. Account needs to be inserted first, get its id and assign it to contact’s and opportunity’s accountId variable. 
  1. Then Insert Contact and Opportunity records and show the Final success/ Fault screen.

Our Final Flow will look like this

  • Notice the yellow marked assignment element, in it we have assigned one variable (opportunityId) to store the value of the newly created opportunity to be passed to the lightning component for redirection.
  • Now with the flow being completed, now we have to Work on the Redirection process. Bruce has already created one Lightning component for us to call the flow.

Here is the code for the same.

Component code: –

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:hasPageReference,lightning:isUrlAddressable" 
                 access="global" >
     <aura:attribute name="oppId" type="string"/>
     <aura:attribute name="flowInAction" type="boolean" default="true"/>
     <lightning:navigation aura:id="navigate" />
     <lightning:card title="3 step Wizard">
     <lightning:flow aura:id="wizardFlow" onstatuschange="{!c.statusChange}"/>
         <aura:if isTrue="{!v.flowInAction}">
             <lightning:Button name="callFlow" variant="Brand" label="Call Flow" onclick="{!c.callFlow}"/>
         </aura:if>
     </lightning:card>
 </aura:component>

Controller code: –

 ({
     callFlow : function(component, event, helper) {
         var flow = component.find("wizardFlow");
          component.set('v.flowInAction','false');
          flow.startFlow("ThreeStepOpportunityWizard");
         // apiName of our flow
     },
     statusChange : function(component, event, helper) 
     {
          var navLink = component.find('navigate');
         var outputVariables = event.getParam("outputVariables");

         for(var i = 0; i < outputVariables.length; i++) {
             if(outputVariables[i].name  =='opportunityId')
             {
                component.set('v.oppId',outputVariables[i].value);
             }
         }

         if (event.getParam('status') === "FINISHED") {
         var pageRef = {
             type: 'standard__recordPage',
             attributes: {
                 actionName: 'view',
                 objectApiName: 'opportunity',
                 recordId : component.get('v.oppId')
             },
         };
         navLink.navigate(pageRef, true);
          }
     }
 })

I hope you enjoy reading. For the more and the latest updates, you can subscribe to our site by filling a right-hand subscription form. Also you can join our group and follow us on twitter
Follow us on twitter and join our WhatsApp group.

For any query, you can comment below and feel free to reach to us.