How to configure Visual Flow Screen Aura components to use the same instance of Variable?

Question

I have a Visual Flow that consists of several Screen elements together with Lightning Aura components.

A general idea of the flow architecture is that there is a Decision element called Router, which decides what screen should a user see based on the activePathNodeName variable, which is the Flow variable.

The transitions between screens are implemented using custom JavaScript logic in the component that every Screen has:

When the user clicks on the Next button, the logic updates activePathNodeName and dispatch Navigate Next event. The router uses activePathNodeName to calculate an outcome and automatically renders the requested screen

The activePathNodeName variable bound to a component using input design attributes and Stored Output Values (Manually assign variables):

What works: activePathNodeName passed to the Next screen Issue: When the process navigates the user back, the activePathNodeName variable actual value gets lost. The flow loads last set value that was assigned into activePathNodeName. It means that I can't define shared state for all my Screen to define a flow pass it forward and back because every Screen element gets its own copy of the flow variable.

I've found that seems like it is valid behavior of the Flow: Flow variable is getting lost after clicking previous button

But, has anyone had a similar scenario, how to define shared state?

I appreciate any response. Thanks in advance.

Answer 1

The solution was really interesting and easy.

When the flow process navigates back - it retrieves the previous state of the screen components and their own copy of attribute values. I've updated the logic of navigation so even if a user click Back it actually navigates forward meaning - create new Flow process screen with its own copy of attribute values.