Flow Component Samples は、カスタム画面フローコンポーネントのコードサンプル集です。標準では提供されていないあると便利なコンポーネントを作成してみました。一部のコンポーネントはカスタムプロパティエディタも実装しています。 ロック解除済みパッケージとしても公開しているので、すぐにインストールして試すこともできます。
| 機能 | 内容 |
|---|---|
| CmOutputField （表示用コンポーネント） | レコードと項目を指定するだけで標準の Lightning と同じ形式で出力できるコンポーネントです。住所は地図リンクになり URL はリンクをクリックで画面遷移できる仕組みとなります。 |
| CmTable （入力表示用コンポーネント） | レコード一覧を指定するだけ簡単にテーブル表示できるコンポーネントです。チェックボックス表示の ON/OFF 機能もあるので入力用にも使えます。 |
| CmBorder （表示用コンポーネント） | 画面フローに区切り用の線を引きたいと思った時に利用できるコンポーネントです。何も指定しなくてもシンプルな灰色の線を追加できます。色やサイズ、太さなど調整可能です。 |
以下の URL を実行して指定の組織にインストールしてください。
https://login.salesforce.com/packaging/installPackage.apexp?p0=04t5F000000NPzpQAG
https://test.salesforce.com/packaging/installPackage.apexp?p0=04t5F000000NPzpQAG
このパッケージは、UnofficialSF が公開している 2022 年 4 月時点のソースコードを利用して開発しております。よって、UnofficialSF が公開しているロック解除済みパッケージ「FlowScreenComponentsBasePack」がインストールされている組織ではインストールに失敗して利用できないため、ご了承ください。
| コンポーネント名 | コンポーネントの種類 |
|---|---|
| cmBorder | Lightning Web コンポーネントバンドル CM Border コンポーネント |
| cmTable | Lightning Web コンポーネントバンドル CM Table コンポーネント |
| customDatatable | Lightning Web コンポーネントバンドル CM Table 関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません） |
| customDatatableAddress | Lightning Web コンポーネントバンドル CM Table 関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません） |
| customDatatablePicklist | Lightning Web コンポーネントバンドル CM Table 関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません |
| customDatatableRecordLink | Lightning Web コンポーネントバンドル CM Table 関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません） |
| cmOutputField | Lightning Web コンポーネントバンドル CM OutputField コンポーネント |
| cmOutputFieldEditor | Lightning Web コンポーネントバンドル CM OutputField カスタムプロパティエディタ用のコンポーネント（画面フローのカスタムコンポーネント一覧には表示されません。） |
| fsc_flowCombobox | Lightning Web コンポーネントバンドル CM OutputField カスタムプロパティエディタ関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません）(*1) |
| fsc_flowComboboxUtils | Lightning Web コンポーネントバンドル CM OutputField カスタムプロパティエディタ関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません）(*1) |
| fsc_fieldSelector | Lightning Web コンポーネントバンドル CM OutputField カスタムプロパティエディタ関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません）(*1) |
| fsc_pickObjectAndField | Lightning Web コンポーネントバンドル CM OutputField カスタムプロパティエディタ関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません）(*1) |
| fsc_pickObjectAndFieldUtils | Lightning Web コンポーネントバンドル CM OutputField カスタムプロパティエディタ関連コンポーネント（画面フローのカスタムコンポーネント一覧には表示されません）(*1) |
| FieldPickerController | Apex クラス CM OutputField カスタムプロパティエディタ関連ファイルです。(*2) |
| FieldPickerControllerTest | Apex クラス CM OutputField カスタムプロパティエディタ関連ファイルです。(*2) |
| FieldSelectorController | Apex クラス CM OutputField カスタムプロパティエディタ関連ファイルです。(*2) |
| FieldSelectorControllerTest | Apex クラス CM OutputField カスタムプロパティエディタ関連ファイルです。(*2) |
(*1:UnofficialSF の 2022 年 4 月時点での公開ソースを利用しています。関係するパッケージは FlowScreenComponentsBasePack です。) (*2:UnofficialSF の 2022 年 4 月時点での公開ソースを利用しています。関係するパッケージは FlowActionsBasePack です。)
root
├── config/
│ └── data/ … サンプルデータ格納
├── scripts/ … スクリプトファイル格納
└── force-app/ … 組織にデプロイするソースコード格納
├── managed … パッケージ内に格納するソースコード格納
│ ├── CmBorder/ … CmBorderコンポーネントの関連コード格納
│ ├── CmOutputField/ … CmOutputFieldコンポーネントの関連コード格納
│ ├── CmTable/ … CmTableコンポーネントの関連コード格納
│ └── UnofficialSF/ … カスタムプロパティエディタで使用しているUnofficialSFのコード格納
└── unmanaged … パッケージに格納しない開発時に扱うソースコード格納
以下の対応は事前に行なっているものとする
- DevHub 組織の設定
git clone git@github.com:co-meeting/flow-component-samples.git
cd flow-component-samples
スクラッチ組織が作成できるように DevHub 組織を認証
sfdx force:auth:web:login --setdefaultdevhubusername -a cm-devhub
制限チェック用
sfdx force:limits:api:display -u cm-devhub
npm パッケージのインストール
npm install
LWC テスト用の環境をセットアップ
sfdx force:lightning:lwc:test:setup
npm run setup
※スクラッチ組織の作成に失敗したら、devhub 組織の作成可能な有効なスクラッチ組織数を確認してみること。不要なスクラッチ組織があったら削除する
npm run setupd
npm run org:open
npm run org:user:password:generate
npm run deploy
npm run test:apex
sfdx force:package:create --name "Flow Component Samples" --path force-app/managed --packagetype Unlocked
scripts/shell/package-org-install.shを開き、発行されたパッケージ ID に変更する。
sfdx-project.json を開き、以下のプロパティをリリース状況に応じて変更
"versionName": "ver 0.1",
"versionNumber": "0.1.0.NEXT"
以下コマンドを実行してパッケージバージョンを作成する
npm run package:version:create
npm run package:version:list
上記コマンド実行時に、もしERROR running force:package:version:list: The encrypted data is not properly formatted. というエラーメッセージが発生したら devhub 組織を意図的にログアウトして、認証しなおしましょう。ログアウト:sfdx auth:logout --targetusername cm-devhub >> DevHub 組織の再認証:sfdx force:auth:web:login --setdefaultdevhubusername -a cm-devhub
npm run package:org:create
npm run package:org:delete
このコマンドを実行する前に、scripts/shell/package-org-install.shを開き、パッケージ ID が正しいか確認すること
最新のパッケージをインストール用スクラッチ組織へインストール
古いパッケージバージョンがあればアンインストールしてインストールする
npm run package:org:install
npm run package:org:open
以下の URL の<パッケージバージョンID>を置換して、ブラウザのアドレスバーに URL を貼り付けて、パッケージをインストールする。
// 本番組織にインストールする用URL
https://login.salesforce.com/packaging/installPackage.apexp?p0=<パッケージバージョンID>
// sandbox組織にインストールする用URL
https://test.salesforce.com/packaging/installPackage.apexp?p0=<パッケージバージョンID>
※<パッケージバージョン ID>：sfdx-project.jsonを開き、packageAliases記載の パッケージバージョン ID を使って、パッケージインストール用の URL を手動で作成してください。
MIT License LICENSE
Flow Component Samples では、 Flow Action and Screen Component BasePacks – UnofficialSF にて、 Alex Edelstein が公開してくれている以下サポートツールのソースコードを、CmOutputField コンポーネントのカスタムプロパティエディタ構築の際に利用してます。
該当ソースコード(force-app/managed/main/UnofficialSF)は名前空間以外、そのまま改変せず利用しており、当フォルダ配下はBSD 3-Clause Licenseです。
License: BSD 3-Clause License, https://github.com/alexed1/LightningFlowComponents/blob/master/LICENSE