Generic Lookup In LWC Using Screen Flow : sanketthoughts

Generic Lookup In LWC Using Screen Flow
by: sanketthoughts
blow post content copied from  Salesforce Diaries
click here to view original post

As Salesforce platform is moving towards low code, why don’t we as a developer try to think towards it and provide solutions that can leverage the existing low code features like screen flow. Screen flow has a lookup component which allows users to select a record. We already have custom reusable lookup component code published earlier. In this blog, We will show the Lightning Web Component’s capability to use screen flow lookup and get the selected lookup value dynamically.

Code – Generic Lookup Component Using Screen Flow

We are going to create two Lightning Web Components as well as One screen flows. There names are:-

1. reusableFlowLookup – LWC
2. genericInputRecieverFromFlow – LWC
3. reusableLookup – Screen Lightning Flow

genericInputRecieverFromFlow

Create a LWC with name genericInputRecieverFromFlow in your VS Code. This component is used to recieve the value from screen flow and fire an event to main parent component with the selected lookup record detail.

genericInputRecieverFromFlow.html

<template>
</template>

genericInputRecieverFromFlow.js

The JS file of the genericInputRecieverFromFlow component have used concept of value change handler to send the selected lookup record detail to main parent component.

import { LightningElement, api } from 'lwc';

export default class GenericInputRecieverFromFlow extends LightningElement {
    //holds the id of the selected lookup record
    value;
    @api get inputValue() {
        return this.value;
    }
    set inputValue(recievedvalue) {
        this.setAttribute('inputValue', recievedvalue);
        this.value = recievedvalue;
        this.handleValueChange();
    }

    //holds the label of the selected lookup record
    label;
    @api get inputLabel() {
        return this.label;
    }
    set inputLabel(recievedvalue) {
        this.setAttribute('inputLabel', recievedvalue);
        this.label = recievedvalue;
        this.handleValueChange();
    }

    //payload of the event to be fired
    get payload(){
        return {
            id: this.value,
            name: this.label
        };
    }

    //a method called in setter
    handleValueChange() {
        console.log('payload', this.payload);
        // Creates the event with the data.
        const selectedEvent = new CustomEvent("recievedvalue", {
            detail: this.payload, bubbles: true, composed: true
        });
  
        // Dispatches the event.
        this.dispatchEvent(selectedEvent);
    }
}

genericInputRecieverFromFlow.js-meta.xml

It is important to expose the component to screen flow so that it can be embed in flow. Public properties are also exposed to flow so that their value can be set from their.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="inputValue" type="String" label="Reactive Value"/>
            <property name="inputLabel" type="String" label="Reactive Label"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

reusableLookup (A Screen Lightning Flow)

Step 1 : Create a Screen flow and add a screen, Label should be Reusable Lookup and Api Name should be ReusableLookup

Step 2 : Add a lookup element to screen as per below configuration. Make sure to create input variables.

The variables details are:-

Step 3: – Add the genericInputRecieverFromFlow component on screen and pass the property value as below:-

Step 4:- Save the flow with api name as reusableLookup and activate it.

reusableFlowLookup

Now, create main parent component where screen flow will be called. The name of the component is reusableFlowLookup.

reusableFlowLookup.html

lightning-flow is used to host the flow in LWC by passing the api name of active screen flow. It listen to two events i.e. statuschange and recievedvalue. statuschange is standard event and part of lightning-flow base component and gets fired when flow status is changed. recievedvalue is custom event getting fired from genericInputRecieverFromFlow when lookup value is selected.

<template>
    <lightning-flow flow-api-name='reusableLookup' onrecievedvalue={handleLookupSelection}
        flow-input-variables={inputVariables} onstatuschange={handleStatusChange}>
    </lightning-flow>
    <div class="slds-var-m-vertical_medium">
        <template if:true={selectedValue}>
            Selected Id is {selectedValue.id} and Name is {selectedValue.name}
        </template>
    </div>
</template>

reusableFlowLookup.js

InputVariables holds the input to pass to screen flow so that it can load the lookup properly. You can pass below attributes:-

1. fieldApiName – The api name of the field which is of data type lookup
2. objectApiName – The api name of the object where field exist
3. required – To make lookup required
4. inputLabel – Label of the lookup field
5. selectedRecord – To prepopulate the lookup input, pass the record id of the record

import { LightningElement } from 'lwc';

export default class ReusableFlowLookup extends LightningElement {
    selectedValue;
    get inputVariables() {
        return [
            {
                name: 'fieldApiName',
                type: 'String',
                value: 'AccountId'
            },
            {
                name: 'objectApiName',
                type: 'String',
                value: 'Contact'
            },
            {
                name: 'inputLabel',
                type: 'String',
                value: 'Select Account Record'
            },
            {
                name: 'required',
                type: 'Boolean',
                value: false
            }
        ];
    }

    handleStatusChange(event) {
        console.log('handleStatusChange', JSON.stringify(event.detail));
    }

    handleLookupSelection(event) {
        console.log('handleLookupSelection', JSON.stringify(event.detail));
        this.selectedValue = event.detail;
    }
}

reusableFlowLookup.js-meta.xml

The component has been exposed to be used with home, app and record pages.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Demo – Generic Flow Lookup in LWC

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH

Schedule a 1:1 Meeting with me

Book Meeting For Free

Also check out https://salesforcediaries.com/category/lightning-web-

The post Generic Lookup In LWC Using Screen Flow appeared first on Salesforce Diaries.

April 16, 2023 at 04:24PM
Click here for more details...

=============================
The original post is available in Salesforce Diaries by sanketthoughts
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================