今回は画面フローで取引先の詳細画面から取引先責任者に一括メールを送信する機能を実装してみました。
フロー初心者の方にも分かるように手順を追って解説しているので、ぜひ参考にしてみてください。
完成イメージ
取引先詳細画面の「一括メール送信」ボタンを押下すると、関連する取引先責任者全員にメールが送信される。
![](https://atsudayo.com/wp-content/uploads/2023/09/46.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/47.png)
取引先に関連する取引先責任者が存在しない、もしくはメールアドレスの設定のある取引先責任者が存在しない場合は以下の画面が表示されます。
![](https://atsudayo.com/wp-content/uploads/2023/09/49.png)
フローの作成
設定のクイック検索に「フロー」と入力し、フローを選択。
右上の「新規フロー」ボタンを選択します。
![](https://atsudayo.com/wp-content/uploads/2023/09/1.png)
「画面フロー」を選択し、「作成」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/2-1024x445.png)
レイアウトを「自由形式」に変更します。
![](https://atsudayo.com/wp-content/uploads/2023/09/3.png)
ツールボックスの要素から「レコードを取得」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/1-1.png)
①~⑧のに値を入力します。
![](https://atsudayo.com/wp-content/uploads/2023/09/3-1.png)
⑧については、「新規リソース」を選択後、①~⑤の値を設定し、「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
「recordId」というAPI参照名を指定することでプロセスを開始した現在のレコードIDを取得することができます。
![](https://atsudayo.com/wp-content/uploads/2023/09/2-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/2-1.png)
①~③の情報も設定し、「完了」をクリック
![](https://atsudayo.com/wp-content/uploads/2023/09/4-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/4-1.png)
ツールボックスの要素から「画面」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/5-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/5-1.png)
「画面プロパティ」の①~③に値を入力します。
![](https://atsudayo.com/wp-content/uploads/2023/09/6-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/6-1.png)
「コンポーネント」から「表示テキスト」を選択し、画面のメインエリアにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/7-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/7-1.png)
①~③に値を設定します。
![](https://atsudayo.com/wp-content/uploads/2023/09/8-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/8-1.png)
「ヘッダーを設定」にて「ヘッダーを表示」のチェックを外します。
![](https://atsudayo.com/wp-content/uploads/2023/09/9-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/9-1.png)
「フッター設定」にて「完了」ボタンのみを表示させます。
![](https://atsudayo.com/wp-content/uploads/2023/09/10-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/10-1.png)
「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/11-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/11-1.png)
ツールボックスの要素から「レコードを取得」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/13-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/13-1.png)
①~④の値を設定します。
![](https://atsudayo.com/wp-content/uploads/2023/09/12-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/12-1.png)
①を設定し、「条件を追加」をクリック。
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
STEP2で取得した取引先に関連する取引先責任者を取得します。
![](https://atsudayo.com/wp-content/uploads/2023/09/14-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/14-1.png)
以下の条件を追加します。
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
メールアドレスを持っている取引先責任者を取得したいので条件を追加します。
![](https://atsudayo.com/wp-content/uploads/2023/09/15-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/15-1.png)
①~③に値を設定し、「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
関連する取引先責任者全員にメールを送りたいので、「保存するレコード数」はすべてのレコードを選択します。
![](https://atsudayo.com/wp-content/uploads/2023/09/16-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/16-1.png)
ツールボックスの要素から「決定」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/17-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/17-1.png)
①~⑤に値を設定し、「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/18-1-1024x536.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/18-1-1024x536.png)
ツールボックスの要素から「画面」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/19-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/19-1.png)
「画面プロパティ」の①~③に値を入力します。
![](https://atsudayo.com/wp-content/uploads/2023/09/20-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/20-1.png)
「コンポーネント」から「表示テキスト」を選択し、画面のメインエリアにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/7-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/7-1.png)
①~③に値を設定します。
![](https://atsudayo.com/wp-content/uploads/2023/09/21-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/21-1.png)
「ヘッダーを設定」にて「ヘッダーを表示」のチェックを外します。
![](https://atsudayo.com/wp-content/uploads/2023/09/9-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/9-1.png)
「フッター設定」にて「完了」ボタンのみを表示させます。
![](https://atsudayo.com/wp-content/uploads/2023/09/10-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/10-1.png)
「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/22-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/22-1.png)
ツールボックスの要素から「ループ」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/25-1-1024x691.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/25-1-1024x691.png)
プログラムに何度も同じことを行わせる処理。
①~⑥に値を設定し、「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
![](https://atsudayo.com/wp-content/uploads/2022/10/IMG_9333-150x150.jpg)
先ほど取得した取引先責任者(複数)を1レコードずつ処理していくためのループです。
![](https://atsudayo.com/wp-content/uploads/2023/09/26-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/26-1.png)
ツールボックスの要素から「アクション」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/23-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/23-1.png)
「メール」を選択し、①~③に値を設定します。
![](https://atsudayo.com/wp-content/uploads/2023/09/27-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/27-1.png)
続けて①~③に値を設定し、「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/28-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/28-1.png)
③の本文については、「新規リソース」を選択後、①~④に値を設定し「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/29-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/29-1.png)
ツールボックスの要素から「画面」を選択して、キャンバスにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/30-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/30-1.png)
「画面プロパティ」の①~③に値を入力します。
![](https://atsudayo.com/wp-content/uploads/2023/09/31-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/31-1.png)
「コンポーネント」から「表示テキスト」を選択し、画面のメインエリアにドラッグ。
![](https://atsudayo.com/wp-content/uploads/2023/09/7-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/7-1.png)
①~③に値を設定します。
![](https://atsudayo.com/wp-content/uploads/2023/09/32-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/32-1.png)
「ヘッダーを設定」にて「ヘッダーを表示」のチェックを外します。
![](https://atsudayo.com/wp-content/uploads/2023/09/9-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/9-1.png)
「フッター設定」にて「完了」ボタンのみを表示させます。
![](https://atsudayo.com/wp-content/uploads/2023/09/10-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/10-1.png)
「完了」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/33-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/33-1.png)
「〇」をドラッグしてつなげたい要素に接続する。
![](https://atsudayo.com/wp-content/uploads/2023/09/34-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/34-1.png)
画面右上の「保存」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/35-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/35-1.png)
①~③を入力し、「保存」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/00.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/00.png)
作成したフローが正しく機能するか、有効化する前に確認すること。
「デバッグ」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/36-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/36-1.png)
検証したい既存取引先レコードIdを設定し「実行」をクリックします。
![](https://atsudayo.com/wp-content/uploads/2023/09/37-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/37-1.png)
取引先レコードIdとは、取引先詳細画面を開いた際のURLに記載された一意のIdのことです。
![](https://atsudayo.com/wp-content/uploads/2023/09/38-1.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/38-1.png)
「次へ」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/39.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/39.png)
取引先に関連する取引先責任者が存在し、メールアドレスの設定もある場合は以下の画面が表示されます。
![](https://atsudayo.com/wp-content/uploads/2023/09/40.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/40.png)
取引先に関連する取引先責任者が存在しない、もしくはメールアドレスの設定のある取引先責任者が存在しない場合は以下の画面が表示されます。
![](https://atsudayo.com/wp-content/uploads/2023/09/41.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/41.png)
「有効化」をクリックし、フローを使用可能な状態にします。
![](https://atsudayo.com/wp-content/uploads/2023/09/42.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/42.png)
続いて、作成したフローを取引先詳細画面から呼び出すためのボタンを作成します。
取引先のオブジェクトマネージャより「ボタン、リンク、およびアクション」を選択後、「新規アクション」を選択。
![](https://atsudayo.com/wp-content/uploads/2023/09/43.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/43.png)
次の情報を設定し、「保存」をクリック。
![](https://atsudayo.com/wp-content/uploads/2023/09/44.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/44.png)
取引先ページレイアウトに作成したボタンを追加して、保存します。
![](https://atsudayo.com/wp-content/uploads/2023/09/45-1024x638.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/45-1024x638.png)
取引先詳細画面に作成したボタンが表示されます。
![](https://atsudayo.com/wp-content/uploads/2023/09/46.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/46.png)
これでフローとフローを呼び出すためのボタンが完成です!
おわりに
今回は、フローを使用して取引先責任者に一括メールを送信する処理を実装してみました。
条件分岐やループ処理など、フローを使用する上では基本となる要素が含まれているのぜひ自在に扱えるようになりましょう!
今回は以上です。
![](https://atsudayo.com/wp-content/uploads/2023/09/sample-12-1-300x183.png)
![](https://atsudayo.com/wp-content/uploads/2023/09/sample-12-1-300x183.png)
コメント