11

The LWC Dev Guide suggests that the FlowAttributeChangeEvent should allow us to trigger component visibility logic in a flow screen.

To notify the runtime of attribute changes, the component must fire the FlowAttributeChangeEvent event. Any code in a flow that requires a response must use this event. For example, use this event when using conditional visibility to render a flow screen when conditions are met or when mapping the value of output attributes to flow variables.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_build_for_flow_screens

I'm not able to get this behavior to work like I'd expect. For example, in this simple flow the display text component should become visible when the outputValue of the flowExample component is true.

enter image description here

flowExample.html

<!-- Flow Example -->
<template>
    Current value: {value}
    <button class="slds-button slds-button_brand" onclick={toggleOutput}>Toggle Ouput</button>
</template>

flowExample.js

import { LightningElement, api, track } from "lwc";
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

export default class FlowExample extends LightningElement {
  @track value = false;

  @api
  get outputValue() {
    return this.value;
  }

  toggleOutput() {
    this.value = !this.value;
    console.log('output: ', this.value);
    this.dispatchEvent(new FlowAttributeChangeEvent('outputValue', this.value));
  }
}

flowExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <description>Flow Example</description>
    <isExposed>true</isExposed>
    <masterLabel>Flow Example</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="outputValue" label="Output Value" type="Boolean" role="outputOnly"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Clicking the button in the flowExample component to toggle the outputValue has no effect on the visibility of the other components on the screen. What am I missing?

4
  • Are you using manual or automatic output mapping for the LWC component in your flow? Commented Oct 24, 2019 at 21:20
  • See See help.salesforce.com/… Commented Oct 24, 2019 at 21:28
  • @shannonsans is there an option for automatic output in custom components? Commented Oct 29, 2019 at 13:33
  • 1
    Adding a component to a flow screen in Winter '20 have it enabled by default (for Aura and LWC components) - there should be a checkbox at the bottom of the property editor to switch to manual. Existing components in a flow screen will still have their manual mapping, but again, there should be a checkbox to switch to automatic. Commented Oct 29, 2019 at 19:51

1 Answer 1

11

In order to use conditional visibility with custom LWC components, there are two things that need to happen.

  1. Dispatch the FlowAttributeChangeEvent when you want to notify the flow runtime that a change has been made.
  2. Use automatically assigned variables in the conditions that need to be notified of the change.

As per Flow Conditional Visibility Considerations in Salesforce Help.:

Any screen input component with Manually assign variables (advanced) selected isn’t available as a resource for conditional visibility on the same flow screen.

If you check the Manually assign variables (advanced) checkbox and map a variable resource to one of your outputs, and then use that variable resource in your condition, it won't work. The reason is that the actual value of the variable resource is not set until the information is sent back to the server (e.g. when the Next button is clicked). Only the values for actual screen components will trigger the check.

For example, in the image below, the Product Picker LWC component with the API name Bundle is using automatic variable assignment: the Manually assign variables (advanced) checkbox is unchecked. The Product Picker component has an attribute value. Another component has a condition that checks whether {!Bundle.value} is null. This will work when the two components are on the same screen.

Property editor for Bundle showing Manually assign variables checkbox unchecked. Property editor for condition on another component checking that Bundle.value is not null

In this image, the Product Picker component with the API name ManualBundle has the Manually assign variables (advanced) checkbox checked, and the Value attribute set to a variable resource {!bundleVar}. The condition checks whether {!bundleVar} is null. This condition will not work if both components are on the same flow screen. The condition would only work if the component with the visibility check is on a later screen in the flow, because {!bundleVar} is not actually set until it's sent to the server-side engine

Property editor for ManualBundle showing Manually assign variables checkbox checked. Property editor for condition on another component checking that the variable bundleVar is not null

Adding an Aura or LWC component to a flow screen in Winter '20 will have automatic variable assignment enabled by default.

9
  • 1
    Thank you for connecting these dots for me! Commented Dec 21, 2019 at 19:43
  • Thanks Shannon for explaining all this. Just a side note that I had to save the screen immediately after unchecking the "Manually assign" checkbox. Only then did the component show up when editing the visibility conditions elsewhere on the screen. Commented Apr 14, 2020 at 17:23
  • 1
    @JamesLoghry - unfortunately, as of this writing, the only thing that updates the list of components in a screen is adding/removing them, not updating other attributes. The team is looking at broader changes but it'll probably take some time to get there. Commented Apr 14, 2020 at 18:01
  • @shannonsans, thanks for explaining the logic. It is working superb when we are rendering the flow element on conditions. But when we are using another lightning component it is causing an issue. When we are coming back from previous or next screen. All the flow input variable are coming undefined Commented May 18, 2020 at 18:16
  • @Gaurav Check out this article on how next/previous works at unofficalsf.com: unofficialsf.com/… - next/previous has some very specific behaviours, I don't know if this will help in your case Commented May 19, 2020 at 19:19

You must log in to answer this question.

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