Dreamforce2019 day4：LWC と Flow の融合

Dreamforce day4
街中がDreamforce一色となったサンフランシスコ。想像以上の盛り上がりに、気持ちも高ぶりますね！

そんな感じで、意気揚々とDreamforceを満喫している井上が、HotなLWCの気になったセッションを紹介します！

LWC × Apex × Flow

winter'20 からついに Flow から LWC を使えるようになりました！その具体的な使い方に関して、セッションを聞いてきましたので、紹介いたします。

ちなみにセッションのスライドには ApexとLWCとFlowの力を解き放つと、かなりインパクトのあるタイトルで紹介されていました。

FlowにLWCを組み込めるようになることで、より強力なワークフローを実現できると強調されていました。
中でも、
・視覚的な要素（LWC）と、複雑なロジック（Apex）をFlowに取り入れることで、複雑なワークフローを構築できる。
・異なるシステムからデータソースをワークフローで利用できる。

AppExchangeからLWCを利用できるので、コードが書けなくてもOK！てきなことも言っていました。

コード例

さて本題ですが、FlowからLWCを利用する方法を紹介します。

まず、FlowでLWCを利用する場合、
meta.xmlのtargetに "lightning__FlowScreen" を指定します。
LWCに入出力したい値はtargetConfigで "property" 要素を定義してあげれば、利用可能です。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen" category="sample category">
            <property name="sampleName" type="String" label="sampleName" role="inputOnly"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

lwcSample.js-meta.xml

補足ですが、"property" 要素内の "role" 属性に "inputOnly" または "outputOnly" を指定することで、Lightningレコードページから値の入出力制限ができます。
※ "role" 属性を指定しない場合は、入力と出力を許可します。

JSでは "lightning/flowSupport" をimportし、Flowに通知したいイベントを定義するだけです。

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

export default class sampleFlowComponent extends LightningElement {

    @api
    availableActions = [];

    @api
    sampleName;

    handleAttributeChange() {
        const attributeChangeEvent = new FlowAttributeChangeEvent('sampleName', this.sampleName);
        this.dispatchEvent(attributeChangeEvent);
    }

    handleNext() {
        if (this.availableActions.find(action => action === 'NEXT')) {
            const navigateNextEvent = new FlowNavigationNextEvent();
            this.dispatchEvent(navigateNextEvent);
        }
    }
}

lwcSample.js

Flowイベントの種類

・FlowAttributeChangeEvent
　コンポーネントのプロパティが変更されたことをフローに通知します。
・FlowNavigationBackEvent
　フローの前画面へのイベントを通知します。
・FlowNavigationNextEvent
　フローの次画面へのイベントを通知します。
・FlowNavigationPauseEvent
　フローの一時停止イベントを通知します。
・FlowNavigationFinishEvent
　フローの終了イベントを通知します。

あとは、Flowに画面コンポーネントでLWCを指定するだけです。
難しい設定は不要！あっという間ですね！