Flow Support

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>47.0</apiVersion>
4    <isExposed>true</isExposed>
5
6    <masterLabel>Todos Component</masterLabel>
7    <description>This is a simple todos component</description>
8    <targets>
9        <target>lightning__FlowScreen</target>
10    </targets>
11
12    <targetConfigs>
13
14        <targetConfig targets="lightning__FlowScreen">
15            <property name="todos" type="String[]" label="Todos" description="list of todos"/>
16        </targetConfig>
17    </targetConfigs>
18</LightningComponentBundle>

1<template>
2    List of ToDos:
3    <template if:true={hasTodos} for:each={todosList} for:item="todo">
4        <div key={todo.id}>{todo.text}</div>
5    </template>
6    <lightning-input
7        label="New Todo"
8        type="text"
9        onchange={handleUpdatedText}
10    >
11    </lightning-input>
12    <lightning-button
13        label="Add Todo"
14        title="Add a new todo"
15        onclick={handleAddTodo}
16    >
17    </lightning-button>
18    <lightning-button
19        label="Go Next"
20        title="Finish todos, go next"
21        onclick={handleGoNext}
22    >
23    </lightning-button>
24</template>

1import { LightningElement, api, track } from "lwc";
2import { FlowAttributeChangeEvent, FlowNavigationNextEvent } from "lightning/flowSupport";
3
4export default class Todos extends LightningElement {
5  @api
6  availableActions = [];
7
8  @api
9  get todos() {
10    return this._todos;
11  }
12
13  set todos(todos = []) {
14    this._todos = [...todos];
15  }
16
17  @track _todos = [];
18
19  get todosList() {
20    return this._todos.map((todo) => {
21      return { text: todo, id: Date.now().toString() };
22    });
23  }
24
25  get hasTodos() {
26    return this._todos && this._todos.length > 0;
27  }
28
29  handleUpdatedText(event) {
30    this._text = event.detail.value;
31  }
32
33  handleAddTodo() {
34    this._todos.push(this._text);
35    // notify the flow of the new todo list
36    const attributeChangeEvent = new FlowAttributeChangeEvent("todos", this._todos);
37    this.dispatchEvent(attributeChangeEvent);
38  }
39
40  handleGoNext() {
41    // check if NEXT is allowed on this screen
42    if (this.availableActions.find((action) => action === "NEXT")) {
43      // navigate to the next screen
44      const navigateNextEvent = new FlowNavigationNextEvent();
45      this.dispatchEvent(navigateNextEvent);
46    }
47  }
48}