Example: Custom Lightning Web Component to Standard Flow Component

Make your custom text component react to a standard Flow component.

1. Create a public field with the @api decorator as referenced in customText.js example.
2. Add the target configuration in the .js-meta.xml file with the appropriate type as referenced in the customText.js-meta.xml example.
3. Add an input field attached with an event handler to store the user input.
4. In the event handler, fire a FlowAttributeChange event defined in the flow-support component. The FlowAttributeChange event name must match the name of the public field in order for reactivity to work. Due to the nature of the Flow Runtime, the setter method is called after the FlowAttributeChange event is fired and it is invoked when reactivity leads to a change to the public field.
5. After you create the custom component, add the component to the Flow builder with a label.
6. To make the Text component react to the custom component, configure the default value’s source on the Text component to the custom component’s public property.