April 29, 2020

Enable and Disable Next Button in Flow in Salesforce

With custom component, we can enable and disable buttons in Flow.

Sample Flow:




Screen - First and Last Name:
We get the First and Last name from the user.




Assignment - Assign Lead Name:
We are assigning values from Screen Component to objLead Record variable's FirstName and LastName.


Screen - Lead Screen:
We are using the LWC Component to get the Company. When the Company is filled, the Next button will be enabled. When the Company is not filled, the Next button will be disabled.


Create Records - Create Lead:


Screen - Lead Created:

 

LWC HTML:

<template>

    <table cellspacing="2" cellpadding="2">
        <tr>
            <td>First Name</td>
            <td>{LeadRec.FirstName}</td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>{LeadRec.LastName}</td>
        </tr>
        <tr>
            <td>Company</td>
            <td><lightning-input type="text" placeholder="Enter the Company Name" onchange={handleChange}></lightning-input></td>
        </tr>
        <tr><td colspan="2"><br/></td></tr>
        <tr>
            <td>
                <lightning-button label="Back" variant="brand" onclick={handleBack}></lightning-button>
            </td>
            <td>               
                <lightning-button label="Next" variant="brand" onclick={handleNext} disabled={checkBool}></lightning-button>
            </td>
        </tr>
    </table>
   
</template>


LWC JavaScript:

import { LightningElement, api, track } from 'lwc';
import {FlowAttributeChangeEvent, FlowNavigationNextEvent, FlowNavigationBackEvent } from 'lightning/flowSupport';

export default class CreateLeadFlow extends LightningElement {

    @api LeadRec;
    @api Company;
    @track checkBool = true;
   
    handleNext( event ) {
       
        const nextNavigationEvent = new FlowNavigationNextEvent();       
        this.dispatchEvent(nextNavigationEvent);

    }

    handleBack( event ) {
       
        const nextNavigationEvent = new FlowNavigationBackEvent();       
        this.dispatchEvent(nextNavigationEvent);

    }
   
    handleChange( event ) {
       
        this.Company = event.target.value;
        if ( this.Company )
            this.checkBool = false;
        else
            this.checkBool = true;

    }
              
}


LWC JavaScript-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="LeadRec" label="Lead" type="@salesforce/schema/Lead" />
            <property name="Company" label="Lead Company" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>


Output:






2 comments:

  1. Hi, I am facing issue in retaining variable from screen1 to screen2 for multiscreen LWC flow.

    Like in screen1 I am providing user input fro FirstName and in Screen2 I am providing user input for LastName and Email but while clicking on Previous button screen1 input is become blank. Can you please help me in this.

    ReplyDelete
    Replies
    1. Check this - https://help.salesforce.com/articleView?id=000350820&language=en_US&mode=1&type=1
      It is working as designed.

      Delete