Salesforce Developers Meetup #29

1. Salesforce Developers Meetup #29
画面フローとLightningWebComponentの
ハイブリッド開発について
Toru Inoue

2. 自己紹介
井上 徹 （Inoue Toru）
所属： 株式会社テラスカイ
居住地：大阪 出身地：岡山
Salesforce歴：約6年
ロール：Salesforce開発プロジェクトのPM/PMO、アーキテクト
トピック：LWCの勉強始めました！
@tiaug30

3. 皆さんフロー使ってますか？？
コード開発しなくても色々作れて便利！！
かなり使えるようになっているけど、少し物足りない！！
複雑な機能は結局個別開発が必要なんじゃない？

4. • 標準コンポーネントだけだとやりたいことができない
• AppExchangeにあるものだと微妙に機能がマッチしない
• 画面フローでできないので、すべて個別開発で対応した
画面フローで使えるLWCを作ります
こんなことないですか？？
ないなら自分で作ってみよう！！

5. 画面フローとLWCの違い
画面フロー Lightning Web Component（LWC）
タイプ 標準機能（Low-Code） 個別開発（Pro-Code）
利用者 アドミン～開発者 開発者
難易度 〇
低～中
△
高
コスト 〇
低
△
高
自由度
△
基本的に標準設定の範囲内
〇
個別開発により自由度高
特性 シンプルな画面をスピーディに実現したいときに便利 複雑な機能や独自のUIを作り込める
どちらもメリット・デメリットがある

6. • 基本はフローベースで開発
• フローでは実装できない最低限の画面コンポーネントをLWCで開発する
• コーディングは最低限にとどめる（フローでできることはフローでやる）
• フローのお手軽さとLWCの自由度のおいしいところ取りをする
画面フローとLWCのハイブリッド開発のアプローチ
画面FLOW
標準コンポーネント
カスタムコンポーネント
（LWC）
標準コンポーネント

7. デモアプリ

8. デモアプリ
住所型項目（Summer’22新機能）
住所項目の地図を表示（フロー）
地図（LWC）

9. <template>
<lightning-map
map-markers={mapMarkers}
zoom-level={zoomLevel}>
</lightning-map>
</template>
flowMap.html
地図コンポーネントのLWC
import { api, LightningElement } from 'lwc';
export default class FlowMap extends LightningElement {
@api city;
@api country;
@api postalCode;
@api state;
@api street;
@api zoomLevel;
mapMarkers;
connectedCallback() {
let mapMarkers = [
{
location: {
City: this.city,
Country: this.country,
PostalCode: this.postalCode,
State: this.state,
Street: this.street
}
}
]
this.mapMarkers = mapMarkers;
}
}
flowMap.js
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Map Component In Flow</masterLabel>
<targets>
<target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__FlowScreen">
<property name="country" label="Country" type="String"/>
<property name="state" label="State" type="String"/>
<property name="city" label="City" type="String"/>
<property name="street" label="Street" type="String"/>
<property name="postalCode" label="PostalCode" type="String"/>
<property name="zoomLevel" label="Zoom Level" type="Integer"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
flowMap.js-meta.xml
フローから渡すパラメータを指定
LWC標準のタグを置くだけ
lightning-mapに渡す住所情報を構成
フローから渡されるパラメータを格納する変数
フローから呼び出し可能に設定

10. フローで指定したパラメータがLWCに受け渡される
パラメータ①
↓
パラメータ②
↓
パラメータ③
・
・
・
LWCのライフサイクルフローとパラメータの設定タイミング
constructor()
コンポーネントインスタンスの作成時に起動
connectedCallback()
コンポーネントが DOM に挿入されると起動
renderedCallback()
コンポーネントの表示フェーズが完了したら起動
パラメータはフロービルダーの表示順にセットされる。
LWC側のsetプロパティで何かしらの処理をする場合は
実行順序に注意が必要
※公式ドキュメントは未確認

11. デモアプリのフロー定義（Lightningページの地図）
パラメータのrecordIdを条件にレコードを取得
カスタムの地図コンポーネントを配置
住所項目から国、郵便番号、都道府県、市区群、
町名番地を地図コンポーネントに渡す。
① LWCがカスタムセクションに表示される
② 画面にカスタムコンポーネントを配置
③ LWCに渡すパラメータを指定

12. 住所型項目利用時の注意点
①住所型項目の国と都道府県は選択リストであり、データベース上はコード値（ラベルでない）で登録される。
レコードは州コード（API参照名）で登録される。
州コードは英数字のみ指定可
住所型項目の選択リスト値の設定
⇒ 住所型項目の選択リストのコードを地図コンポーネントが国、都道府県として認識されないコード体系で定義すると、
地図が正しく表示されない可能性があるので要注意！！（必要に応じてフローでコード変換する必要がでてくる）
②画面フロー標準の住所入力コンポーネントの選択リスト値は、住所型の選択リストの設定が適用されない。（フロー側で独自設定する）
住所型項目の値（コード値）を渡す場合は要注意！！

13. デモアプリ完成！！
あとはLightningアプリケーションビルダーでフローを配置するだけ

14. まとめ

15. • 画面フローとLWCを使ったハイブリッド開発を行うことで、フロー単独ではできないことができるようになる。
• プログラミング開発を最低限にすることで開発コストや難易度を低減させることができる。（フル個別開発＞ハイブリッド開発）
• 汎用的なコンポーネントを作成しておけば、様々なユースケースで再利用できる。
• プログラミング開発を外注している場合は、外注費用を下げることができる。（システム管理者やユーザにもメリットがある）
まとめ

16. 今回の手法を使えば画面フローでこんなこともできます！
まとめ
データテーブルコンポーネント リッチテキスト入力コンポーネント
<lightning-datatable> <lightning-input-rich-text>

17. 資料公開・解説記事
@tiaug30
@tiaug30