Pass a variable out of LWC and up to Screen flow dynamically

Question

Scenario:

I'm trying to create data in a Lightning Web Component. Then populate an input field in the same Screenflow that the LWC is nested in.

I currently have the format as below. The intention is to (for now, just testing purposes) to populate the outputTest with a string that is declared and set in the LWC.

Here is the target config of the LWC for value 'outputTest'.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
    <target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightning__FlowScreen">
        <property name="outputTest" type="String" role="outputOnly"/>
    </targetConfig>
</targetConfigs>

I declare the variables using the @api keyword

@api outputTest;

I then use a FlowAttributeChangeEvent to set this variable

const attributeChangeEvent = new FlowAttributeChangeEvent('outputTest', 'TESTSTRING');
this.dispatchEvent(attributeChangeEvent);  

I'm more than happy to give more detail where needed but I'm intentionally trying to preserve some other functionality.

Problem: How can I pass a value from the LWC, up into the Screen flow dynamically?

Answer 1

You have correctly exposed the LWC's 'outputTest' property with @api annotation as well as declared it's role as outputOnly in the component meta definition file. (Digression: Omitting the role attribute entirely would also work, but would render the property as available for both input and output, meaning you could use it for passing values from flow to LWC and vice versa.)

The only thing you missed is checking the 'Manually assign variables' in the Advanced section, which would allow you to assign the output of your LWC to a variable in the flow.