1

I have an LWC in a screen flow whose purpose is to call out to an external api for address validation. It's simply a button that the user will click to initiate the validation callout. This LWC is trying to use field values from the standard Address component that is also on this page.

The issue I am having is that these Address field values are not getting to my LWC to send to the api callout.

Here is what I have set up.

Js.meta file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="varAddressCity" type="String" label="City" description="City Name"/>
            <property name="varAddressCountry" type="String" label="Country" description="Country Name"/>
            <property name="varAddressPostalCode" type="String" label="Zip/Postal Code" description="Zip Code"/>
            <property name="varAddressProviance" type="String" label="State/Province" description="State Name"/>
            <property name="varAddressStreet" type="String" label="Street" description="Street Name"/>
            <property name="completeAddress" type="String" label="Complete Address" description="Complete Address"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

JS file

import { LightningElement,api,track,wire } from 'lwc';
import { FlowNavigationNextEvent, } from "lightning/flowSupport";
import validAddress from '@salesforce/apex/AddressCmpController.verifyAddress';

export default class AddressValidationLWC extends LightningElement 
{
    
    @api street;
    @api city;
    @api state;
    @api country;
    @api zip;

    @api varAddressCity;
    @api varAddressCountry;
    @api varAddressPostalCode;
    @api varAddressProviance;
    @api varAddressStreet;
    @api completeAddress;

    @track isShowModal = false;
    @track data;
    @track employeeData;
    @track columns = [{label: 'Address Suggestions', fieldName: 'address', type: 'text'},];
    @track disableButton = true;

    handleNext()
    {
        const navigateNextEvent = new FlowNavigationNextEvent();
        this.dispatchEvent(navigateNextEvent);
    }

    handleAddressValidation()
    {
        validAddress({ 
            showAddrFields : true,
            street : this.varAddressStreet, 
            city : this.varAddressCity,
            state : this.varAddressProviance,
            country : this.varAddressCountry,
            zip : this.varAddressPostalCode
        }).then(result => {
            this.data = result;
            this.disableButton = false;
            this.isShowModal = true;
        })
        .catch(error => {
           console.log('error -- '+error);
        });
    }

    hideModalBox()
    {
        this.isShowModal = false;
    }
}

HTML button for validation

<lightning-button variant="brand" label="Validate Address" onclick={handleAddressValidation}></lightning-button>

Here are the fields I am trying to access from my LWC enter image description here

Here are the property settings on my LWC enter image description here

Any assistance you could provide in helping me determine why these address values are not making it to my LWC would be very much appreciated. Thank you!

1 Answer 1

1

The problem is the address component and lwc are on same screen in flow. You have to change your approach.

You need to add the lwc in another screen after the address component screen.

Lightning flow is not reactive at the moment. We might have it in future. The flow variables are not set until you press next button on screen flow.

Another approach would be, keep your address fields within lwc itself so that values are available when you press validate button.

Refer Pass Value to Flow From LWC Instantly

1
  • Thank you Sanket for taking the time to answer my question. I was wondering if in fact this was the case as I could see these values getting set in Flow Debug once Next button was clicked.
    – JD_06
    Nov 16, 2022 at 18:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .