1

I have an LWC in Experience Cloud where I’m trying to pass a variable which I grabbed as a URL parameter to a flow embedded in the LWC. The html file renders the output from JS, but when I try to pass variable “dynamicbrandstring” to flow as an input, it displays an error instead (see screenshot). The flow variable “inputVariableFlow” is available for input, and is passed a value from an assignment element. Can anyone tell what may be off? enter image description here enter image description here

HTML:

   <template>
     <div>{URLBrandParamString} </div> 
     <lightning-flow 
             flow-api-name='Community_Screen_Embedded_in_LWC' 
             flow-input-variables= {dynamicbrandstring}> 
    </lightning-flow> 
    </template>

JS:

import { LightningElement, api, track } from 'lwc';
const BRAND_VALUE = {
    facebook: 'FB', 
    amazon: 'AZ',
    netflix: 'NF',
    google: 'GL',
    salesforce: 'SF' 
} 
export default class Community_LWC_Flow_Params extends LightningElement {
@api URLBrandParamString;

connectedCallback(){
    const url = new URL(window.location.href);
    const params = new URLSearchParams(url.search); 
    const brand = params.get('brand');
    this.dynamicbrand1 = BRAND_VALUE[brand]; 
    this.dynamicbrandstring = BRAND_VALUE[brand]; 
    }
}

XML:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Best Component Ever</masterLabel>
    <targets>
            <target>lightningCommunity__Page</target>
            <target>lightningCommunity__Default</target>
            <target>lightning__FlowScreen</target>
      </targets> 
        <targetConfigs>
          <targetConfig targets="lightning__FlowScreen">
           <property name="dynamicbrandstring" label="Pass dynamicbrandstring to Flow" type="String" role="outputOnly"/>
       </targetConfig>
       </targetConfigs> 
</LightningComponentBundle>

1 Answer 1

1

The flow-input-variables attribute accepts an array of values, not a single String.

As per the lightning-flow documentation, this should be similar to the code below. Using this in the connected callback, I'd also recommend enclosing the Flow in a check to ensure that the connectedCallback method has completed

JavaScript:


inputVariables = [];
inputVariablesInitialised = false;

connectedCallback() {

    const url = new URL(window.location.href);
    const params = new URLSearchParams(url.search); 
    const brand = params.get('brand');
    this.dynamicbrand1 = BRAND_VALUE[brand]; 
    this.dynamicbrandstring = BRAND_VALUE[brand];
    this.inputVariables = [
        { 
            name: 'inputVariableFlow',
            type: 'String',
            value: dynamicbrandstring
        }
    ];
    this.inputVariablesInitialised = true;
}

HTML

<template if:true={inputVariablesInitialised}>
    <!-- Rest of your code -->
</template>
3
  • Hi @ Callum MacErlich. Thanks for your explanation. How can we re-add the "connectedCallback" function to your code? Without it, the variable renders a NULL value from the URL.
    – Taku
    Commented Aug 3, 2023 at 15:16
  • @Taku I've updated my answer to call this in the connectedCallback. Commented Aug 3, 2023 at 20:43
  • Perfect. Much appreciated, Callum
    – Taku
    Commented Aug 4, 2023 at 7:35

You must log in to answer this question.

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