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);
}
}
}