【Lightning Web Component】画面フローでのオブジェクト指定を試してみました

こんにちは、アンダーソンです。
今回は画面フローを使う際にオブジェクトを指定して
LWCに渡すことができるようになったようなので、実際に試してみました。

画面フローでLWCを使う

まずは、画面フローでのLWCの使い方からやっていきます。
LWCのメタデータを更新すればOKです。
やり方は下記のようにメタデータを更新します。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

これで画面フローで使える状態になりました。
次に、プロパティを決めていきます。
今回はオブジェクトを指定し、
そのオブジェクトのコレクションを指定するようにします。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <propertyType name="record" extends="sObject" label="オブジェクトを選択する"/>
            <property name="records" label="レコードリスト" type="{record[]}"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

これでOKです。
ちなみにこのコードは8/7に行われた
Summer ’20 ピックアップ新機能ウェブセミナー 〜開発者向け〜
のコードを参考にさせていただいています。

今回は入ってきたレコードのNameを単純に表示するのみの簡単なHTMLにしています。

<template>
    <template for:each={records} for:item="record">
        <li key={record.Id}>
            {record.Name}
        </li>
    </template>
</template>

ここで注意なのが、設定したプロパティはjs側で
@apiデコレータを使用する必要があります。

import { LightningElement, api } from 'lwc';
    
export default class MyComponent extends LightningElement {
    @api records;
}

フロー側で設定する

では先ほど作成したコンポーネントを
画面フローに配置してみます。

あらかじめ、TestやAccountsという変数に
レコードのコレクションをセットしています。

これでデバック表示してみると下記のようになります。

うまくできてます。
これを使えば、より汎用的なLWCを作成することができますね。

デプロイできなかった。。

実は今回少し引っかかったとこがありました。
※時間はかかってないんですが、あ、なるほどみたいなことです。

画面フローですでに使用されている場合、
VSC側からメタデータの変更はできないようになっていました。
(そりゃそうか)

なので、VFやApexが参照関係にあると削除できないのと同じで、
どこかに使用されていれば変更できないのでそこは気をつけましょう。
ちなみに下記がエラーのキャプチャです。

変更する際は使われていないかの確認を忘れないようにしましょう。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。