2019.11.24

Dreamforce2019 day4:LWC と Flow の融合

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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を指定するだけです。
難しい設定は不要!あっという間ですね!

さいごに

いかがでしたか?

今回のバージョンアップで、Flowの進化も凄まじいですが、LWCの活用領域が広がったことに感激しています!
今後の発展に、ますます期待が持てますね!

24 件

関連する記事