Developer Note: Flow Screen Components Are Gradually Getting Treated More Strictly When It Comes to Change Event Dispatch

As of this writing, in Summer ’21, there’s a behind-the-scenes transformation starting to happen to the Flow Runtime. This is the javascript component that gets loaded when a screen needs to be rendered in a screen flow. The Flow Runtime is also the ‘Flow’ component that shows up in the palette of App Builder. Although the Flow Builder itself was written from the ground up in 2018 in LWC, the Flow Runtime mostly still uses Salesforce’s older Aura javascript framework.

That’s starting to change, and various component elements of the Flow Runtime are getting converted to LWC. One goal for this effort is for Flows to run in Community pages created in the upcoming new Experience Builder, which is also built in LWC (generally, you can’t load an Aura component in an LWC parent, and the new Community pages and Experience builder are 100% LWC, for faster page loads.).

The heart of the Flow Runtime is a component called Body which forms the basis for flow screen rendering. Salesforce has elected to do a partial deployment of the new LWC version of the Body component. Basically, if you add one of the new Sections to a flow screen, the Section and everything in it is rendered in the new LWC Body. If you add anything to the screen that is not inside a section, it is rendered by the ‘old’ Aura Body component.

It’s a goal of the Flow team to carry out this transition in a way that makes it unnecessary to even explain these things. In other words, behavior should be the same when a flow is run, regardless of the version or technology used in any given combination of Flow Runtime components. However, we’ve encountered our first issue where behavior changes. It affects developers of Flow Screen Components built using LWC and so we want to discuss it here.

A key principle of LWC is that children components don’t get to modify their parents. There are a lot of architectural reasons for this; suffice to say it leads to faster performance. For that reason, when you create a Flow Screen Component in LWC, one of our key instructions is to dispatch FlowChangeEvents whenever an output value changes due to some interaction with a user or some other internal calculation. If you do an event dispatch every time you change an output value in your component, then you can basically ignore this memo and carry on your business.

We have determined though that there are some great lwc Flow Screen Components out there in the wild that are working outside of Sections but erroring inside of Sections. If you experience that symptom, it’s likely that there’s at least one place in your component where you are not dispatching an event. You might reasonably ask at this point “if I wasn’t dispatching an event, why does my component function properly when it’s outside of a Section? Why has it not broken in the past?” The answer is that the Aura Body component handled coordination automatically on behalf of child LWC’s, but the LWC Body is strict in its adherence to LWC guidance, and does not do any automatic coordination.

So if your component is generating errors when used in Sections, we strongly encourage you to review your code, add event dispatches where you find them missing, and retest.