Description: A module that provides events that enable a component to control flow navigation and notify the flow of changes in attribute values.

Documentation Tab

Allows a component to control flow navigation and notify the flow of changes in attribute values.

Supported only in components where the target is lightning__FlowScreen. Events include:

  • FlowAttributeChangeEvent— Informs the runtime that a component property has changed.
  • FlowNavigationBackEvent—Requests navigation to the previous screen.
  • FlowNavigationNextEvent—Requests navigation to the next screen.
  • FlowNavigationPauseEvent—Requests the flow runtime to pause the flow.
  • FlowNavigationFinishEvent—Requests the flow runtime to terminate the flow.

Metadata

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>

    <apiVersion>47.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>Todos Component</masterLabel>

    <description>This is a simple todos component</description>

    <targets>

        <target>lightning__FlowScreen</target>  

    </targets>

    <targetConfigs>

        <targetConfig targets=”lightning__FlowScreen”>

            <property name=”todos” type=”String[]” label=”Todos” description=”list of todos”/>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

Markup

<template>

     <template if:true={hasTodos} for:each={todos} for:item=”todo”>

        <div key={todo.id}>

             {todo}

         </div>

    </template>

    <lightning-input

        label=”New Todo”

        type=”text”

        onchange={handleUpdatedText}>

    </lightning-input>

    <lightning-button

        label=”Add Todo”

        title=”Add a new todo”

        onclick={handleAddTodo}>

    </lightning-button>

    <lightning-button

        label=”Go Next”

        title=”Finish todos, go next”

        onclick={handleGoNext}>

    </lightning-button>

</template>

Controller

import { LightningElement, api, track } from ‘lwc’;

import { FlowAttributeChangeEvent, FlowNavigationNextEvent } from ‘lightning/flowSupport’;

export default class Todos extends LightningElement {

    @api

    availableActions = [];

    @api

    get todos() {

        return this._todos;

    }

    set todos(todos = []) {

        this._todos = todos;

    }

    @track _todos = [];

    get hasTodos() {

        return this._todos && this._todos.length > 0;

    }

    handleUpdatedText(event) {

        this._text = event.detail.value;

    }

    handleAddTodo() {

        this._todos.push(this._text);

        // notify the flow of the new todo list

        const attributeChangeEvent = new FlowAttributeChangeEvent(‘todos’, this._todos);

        this.dispatchEvent(attributeChangeEvent);

    }

    handleGoNext() {

        // check if NEXT is allowed on this screen

        if (this.availableActions.find(action => action === ‘NEXT’)) {

            // navigate to the next screen

            const navigateNextEvent = new FlowNavigationNextEvent();

            this.dispatchEvent(navigateNextEvent);

        }

    }

}