LWCによる画面フローのカスタマイズ@Japan Dreamin' 2022

Japan Dreamin' 2022（オンラインイベント）で発表した内容です。
https://www.japandreamin.com/

セッション動画はこちら
https://www.co-meeting.co.jp/japan-dreamin2022-session-20220122/

Transcript

1. 代表取締役CEO 木村 篤彦 LWCによる 画面フローのカスタマイズ
2. 自己紹介 ⚫ カレンダーアプリ「Calsket」、人材紹介業界向け地図アプリ 「MatchingMap」など複数のAppExchangeアプリを開発。 ⚫ 顧問Salesforceプログラマとして他社のAppExchangeアプリ開 発にも携わる。 ⚫ SWTT登壇3回、Salesforceハックチャレンジ2014最優秀賞。 ⚫ 個人ではSOQL構築ツール「LWC SOQL Builder」をリリース（ぜ ひ使ってください）。 株式会社co-meeting 代表取締役CEO 木村 篤彦 @atskimura
3. https://lwc-soql-builder.github.io/ LWC SOQL Builder
4. Happy Work! Happy Life! 株式会社co-meetingについて 4 Salesforce関連アプリの開発と提供を2014年10月から行っています。 主な事業 ⚫ Salesforce AppExchangeアプリの開発（9本リリース） ⚫ 顧問Salesforceプログラマ（開発支援サービス）の提供 ⚫ Salesforceの利用を促進させる機能開発 ⚫ AppExchangeアプリの開発/技術支援 ⚫ コピペテック（本気で取り組む課外活動）
5. エンジニア募集中！！ Happy Work! Happy Life! どんな会社か ⚫ 少人数でフルリモートの会社 ⚫ 楽しく仕事をしようと努めている ⚫ 製品を作るのが好き 熊本県 プログラマ 石川県 プログラマ 東京都 プログラマ x 2 セールス/マーケ/サポート... x 1 総務 x 1 三重県 マーケティング
6. アジェンダ 1. 画面フローのどこをカスタマイズできるのか 2. サンプルデモ: 近くの取引先に活動を記録するフロー 3. 画面フローコンポーネントの作り方 4. カスタムプロパティエディタの作り方 5. UnofficialSF 6. 終わりに
7. 画面フローのどこを カスタマイズできるのか
8. カスタマイズできるところは４つ 画面フローコンポーネント 画面フローコンポーネントの カスタムプロパティエディタ Apexアクション Apexアクションの カスタムプロパティエディタ
9. 画面フローコンポーネント ヘッダー/フッターは固定（非表示は可） 入力と簡易的な表示のコンポーネントしかない 標準 画面フローコンポーネント LWCで作れるので何でも表現できる 次へ/前へもフッター以外のから実行可能
10. 画面フローコンポーネントの プロパティエディタ セクション 項目プルダウン スライダー 標準では設定から自動 生成されるフラットな 入力フォーム LWCで作ることができるので どんな表現も可能 標準 カスタムプロパティエディタ
11. アクション ⚫ アクションとしてApexクラスを指定できます。 ＝Apexでできることはほぼ何でもフローでできる。 ⚫ ユースケース ⚫ フローでは実現できない処理を実行する ⚫ TwilioでSMSを送る ⚫ 距離が近いレコードを取得 ⚫ フローでもできるが複雑な処理を品質を高める ためにApexアクションで作成する
12. Apexアクションのプロパティエディタ LWCで作ることができるのでどんな表現も可能 標準ではメソッド定義から自動生成 されるフラットな入力フォーム 標準 カスタムプロパティエディタ
13. サンプルデモ: 近くの取引先に活動を記録するフロー
14. サンプルシナリオ 1. 営業がお客様先を訪問する。 2. モバイルから「取引先チェックイン」フローを起動。 3. 現在地近くの取引先が地図上に表示される。 4. 取引先を選択して活動を登録する。
15. デモ
16. フロー 現在地取得コンポーネント 地図表示コンポーネント レコード遷移 コンポーネント 近くのレコード取得 Apexアクション この４つがカスタムで作った コンポーネント/アクション
17. 現在地取得コンポーネント ⚫ デバイスの現在地を取得し、 フローの出力変数に保存し、 自動的に次の画面に進みます。
18. 近くのレコード取得アクション ⚫ 指定した緯度経度から半径 N km以内に位置するレコードを 近い順に取得する。 ⚫ 取得する項目の設定などをわ かりやすいUIで設定できる。
19. 地図表示コンポーネント ⚫ レコード型のコレクション変数を入 力とし、地図上にプロットする。 ⚫ 選択したレコードを出力変数に保存 する。 ⚫ 項目選択/スライダーなどわかりや すいUIで設定できる。
20. レコード遷移 コンポーネント ⚫ 指定したレコードに自動遷移 するコンポーネント。
21. 画面フロー コンポーネントの作り方
22. 普通のLWCと異なるところは4つ ⚫ meta.xmlでisExposed=true、targetをlightning__FlowScreenにする。 ⚫ 入出力プロパティをmeta.xmlにtargetConfigs/targetConfig/propertyに定義する。 ⚫ 入出力プロパティは@apiで宣言する。 ⚫ 出力プロパティをフローに渡すときにFlowAttributeChangeEventイベントを呼ぶ そんなに難しくない
23. ちょっと作ってみましょう ⚫ 入力のレコード一覧をラジオ ボタンで表示 ⚫ 選択したレコードを出力変数 に保存
24. htmlファイル HTMLは特別なところはない
25. meta.xmlの定義 isExposed=trueにする targetをlightning__FlowScreen にする 入出力プロパティを定義
26. jsファイル 入出力プロパティを@apiで宣言 出力はFlowAttributeChangeEvent でフローに通知
27. 完成品 プロパティエディタは自動生成される 渡したレコード一覧が表示される
28. 汎用オブジェクト対応 ⚫ propertyTypeを設定すると入出力に使用するオブ ジェクトを設定できる。 ⚫ 他のコードは変更不要。 ⚫ もちろん項目名がハードコードされていた場合な どは要対応。
29. 画面遷移 ⚫ 標準画面フローのフッターの次へ/前へなどは lightning/flowSupportモジュールで自由に呼び出すことができる。
30. カスタムプロパティ エディタの作り方
31. 画面フローにカスタムプロパティエディタ（CPE） を追加する手順 1. 画面コンポーネントのmeta.xmlのconfigurationEditorでCPEコンポーネントを指定する。 2. CPEコンポーネントではフローからデータを受け取れるようにする。 ⚫ budilerContext, inputVariables, automaticOutputVariables, genericTypeMappingsを@apiで 定義する。 3. フロービルダーで入力変数を使用してプロパティを設定できるようにする入力フォームを追加。 4. 値が変更されたらフロービルダーに変更を通知する。 けっこう難しい…
32. Apexアクションにカスタムプロパティエディタ を追加する手順 1. ApexメソッドのconfigurationEditorでCPEコンポーネントを指定する。 2. CPEコンポーネントではフローからデータを受け取れるようにする。 ⚫ budilerContext, inputVariables, automaticOutputVariables, genericTypeMappingsを@apiで 定義する。 3. フロービルダーで入力変数を使用してプロパティを設定できるようにした入力フォームを追加。 4. 値が変更されたらフロービルダーに変更を通知する。 ほとんど変わらない
33. 入力プロパティの保存と読み込み 画面フロー コンポーネント カスタムプロパティ エディタコンポーネント 入力データ inputVariables 入力変更通知 configuration_editor_input _value_changed 入力プロパティの 設定フォームを提供
34. 汎用オブジェクト対応 画面フロー コンポーネント カスタムプロパティ エディタコンポーネント 入力オブジェクト名 genericTypeMappings オブジェクト名変更通知 configuration_editor_generic _type_mapping_changed オブジェクト名設定 フォームを提供
35. シンプルに作ると劣化する ただの入力フォームになってしまい、変数など使えない。
36. カスタムプロパティエディタの開発で大変なこと 変数および直接入力に対応したフォーム オブジェクトの選択フォーム property定義から自動生成される入力フォームが使えなくなる
37. 変数の利用可能なフォームの作成 Flow Builder カスタムプロパティ エディタコンポーネント 手動変数/定数定義等 builderContext 自動定義変数 automaticOutputVariables この2つのAPI属性に変数定義情報が あるので、この情報を元に標準UIの ようなフォームを作る必要がある。 大変すぎる
38. Flow Combobox by UnofficialSF ⚫ Flow Comboboxを使うと標準の入力フォームに近い変 数選択可能なUIを実現できる。 https://unofficialsf.com/develop-custom-property-editors-quickly-with-flowcombobox/
39. Object & Field Picker by UnofficialSF ⚫ 汎用オブジェクト対応コンポーネントを作る際のオブ ジェクト選択フォームに使える。 ⚫ CPEを作りたくなる一番の要件である項目の選択プルダ ウンを簡単に実現できる。 https://unofficialsf.com/add-an-object-and-field-picklist-pair-to-your-flow/
40. UnofficialSF
41. UnofficialSFには画面フローコンポーネントもたくさん ⚫ Datatable ⚫ Flow Button Bar ⚫ Carousel ⚫ FIle Upload Improved ⚫ Quick Choice ⚫ Quick Lookup ⚫ などなど https://unofficialsf.com/flow-screen-components/
42. フローアクションもたくさん ⚫ Date & Datetime Functions ⚫ Execute SOQL Query ⚫ Export to CSV Files ⚫ Import from CSV Files ⚫ Launch Specified Flow ⚫ Navigate Everywhere ⚫ Open URL ⚫ などなど https://unofficialsf.com/flow-actions/
43. 終わりに
44. 終わりに ⚫ カスタムコンポーネント/アクションがあればローコードで作れる範囲がより広がる。 ⚫ フローでできないこともまるっと作るのではなくフローと開発の組み合わせでできないか考え てみるとよいかも。 ⚫ カスタムプロパティエディタの開発はちょっと大変。ISVベンダー向けかもしれません。 ⚫ CPEまで作らなくても十分使えるものは作れます。作るときはUnofficialSFを活用してください。 弊社もフロー用コンポーネント集をリリースしようかと企画中です。お楽しみに。
45. https://www.co-meeting.co.jp/