Change flow variable with lwc, detect change with another lwc

Question

Is there any way to have two LWC's on a single flow screen update and detect changes made by one lwc to another?

For example, let's say I have a lwc1 and lwc2 on a flow screen. lwc1 is a simple toggle; if toggled, I set the public property formValid to true. If not toggled, set it to false. Updating the property and having the flow reflect it is easy enough; I have lwc1 use the FlowAttributeChangeEvent and updated the flow variable based on the toggle in the lwc. I tested this using a visibility condition and the flow variable updates without an issues:

The display text only shows when lwc1 sets the formValid property. I can sit there and toggle this all day long from LWC1 (setting formValid to true or false) and watch the display text show/hide.

The trouble I'm having is having lwc2 pick up on the change to the lwc1.formValid public property. LWC2 has its own public property, which I set the value of to the formValue of LWC 1:

I would expect formValid to have its value updated (as it does) and that be passed back to LWC2. LWC2 would detect the change to its public property and update accordingly. Then I could pick up the property change using a reactiveHandler and do my business (in this case, enable/disable a button).

In lwc2, I have the following property defined (to go along with the screenshot)

@api cmp1Valid = false;

I would expect this property to get updated whenever LWC1 updates its value. But it doesn't; I've tried listening using a reactiveHandler, using get/set, trying to intercept during renderCallback and rerenderCallback hooks...but to no vail. Whatever value LWC1 is setting isn't getting passed to LWC2.

Is this by design? It seems really odd, since the flow is clearly getting the update from LWC1. Can the flow only pass values to LWCs once, on initialization? What would be the best way to solve this issue? Fallback to pubsub to communicate between the two LWCs directly?

Thanks!

Answer 1

From the doc:

A design resource describes the design-time behavior of a Lightning component—information that visual tools require to allow adding the component to a page or app. Adding this resource is similar to adding it for the Lightning App Builder.

So, flow does not have reactivity to pass the changed properties dynamically and is only meant for design time binding.

However, you need not use pubsub which was unofficial way of communication between unrelated components. You can now use lightning messaging service through Communicate Across the DOM with Lightning Message Service released in summer 20 as GA