【フロー演習問題2】商談の更新画面
公開日: 2021.11.08
※本番環境に変更を適用する際は事前にSandboxで動作を確認してください
フローの概要
アクションがクリックされた際に商談の更新画面を表示し、入力された値で商談を更新します。
フローの全体像
下図が完成したフローです
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534597/MFDAAAZrmt2/6wmqZmrnIRrjiOx_hLZN2g.png)
フローの作成手順
「画面フロー」を選択します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534600/MFDAAAZrmt2/NtHXH9ZE4ND0nhlt__GDsg.png)
「自由形式」を選択します ※「自動レイアウト」を選択しても問題ありません
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534603/MFDAAAZrmt2/WA2u-edmi7depU-H1N_9JA.png)
「マネージャ」タブを選択し、新規リソースを選択します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534604/MFDAAAZrmt2/aYOO-2L45skPQR7AvaJMqw.png)
下図のように新規リソースを設定します
※「recordId」変数に画面で開いているレコード情報が格納されます 詳しくはこちら
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534606/MFDAAAZrmt2/cdR7hJy_gVYMd8zIRFvarg.png)
要素から「画面」を選択し追加します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534608/MFDAAAZrmt2/9y_JN3yBrL-iRW7EX9zaAQ.png)
画面の設定で以下のコンポーネントを追加します
- テキスト
- 数値
- 日付
- ロングテキストエリア 2つ
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534610/MFDAAAZrmt2/pHjUPzsJa9Vy6RXFPZd_1w.png)
「ヘッダー」を選択し、画面のプロパティの表示ラベル、API参照名を入力します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534612/MFDAAAZrmt2/NUT4Sis-Bl_BWus7bo0pcQ.png)
フッターの設定を開き、「[前へ]を非表示」、「[一時停止]を非表示」を選択します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534614/MFDAAAZrmt2/v8eoL_Xg3NV4DcHx6h2jNA.png)
テキストのコンポーネントを選択し、下図の設定を行います
※デフォルト値に{!recordId.Name}を設定することにより、画面で開いている商談の商談名がデフォルトで入力されます
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534616/MFDAAAZrmt2/z3eKVsJJBMlbkM4EnGuI5A.png)
数値のコンポーネントを選択し、下図の設定を行います
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534618/MFDAAAZrmt2/YGwDsc3OwUsDkKTbg5ZWmQ.png)
日付のコンポーネントを選択し、下図の設定を行います
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534619/MFDAAAZrmt2/F8VG9w9GpF5RXKcYd-07vA.png)
1つ目のロングテキストエリアのコンポーネントを選択し、下図の設定を行います
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534621/MFDAAAZrmt2/iosFvi8RhybSgxgqoiZ1Pg.png)
2つ目のロングテキストエリアのコンポーネントを選択し、下図の設定を行います
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534623/MFDAAAZrmt2/gl6x7KxEQzqVUa_ojVKEjQ.png)
「完了」をクリックします
「割り当て」のコンポーネントを追加します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534625/MFDAAAZrmt2/ifVIgpvjhdyB3NG1TtSp4w.png)
下図のように設定を行い、「recordId」変数の各項目に画面で入力された値を割り当てます
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534628/MFDAAAZrmt2/mj8zDYFsXR2F3spnz8ncLg.png)
要素から「レコードを更新」を追加します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534630/MFDAAAZrmt2/D3F9sKJg4YyQaN4i0aRUfw.png)
下図のように設定し、商談レコードを更新します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534632/MFDAAAZrmt2/NQaGz50pUuk8pwWmIRI34g.png)
各要素を接続します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534635/MFDAAAZrmt2/jiFaVd3KsF29zo6xLEnVuA.png)
画面右上の「保存」をクリックし、フローの表示ラベル、フローのAPI参照名に任意の値を入力し保存します
画面右上の「有効化」をクリックします
アクションの作成
オブジェクトマネージャで「商談」を選択し、「新規アクション」をクリックします
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534636/MFDAAAZrmt2/kCgH8td_pptVT58K4ZNnRA.png)
アクション種別に「フロー」を選択し、作成したフローを選択します
任意の表示ラベルと名前を設定し保存します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534638/MFDAAAZrmt2/E65-oYG97zW2ZDR4-W_ZjA.png)
任意のページレイアウトに作成したアクションを追加します
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534641/MFDAAAZrmt2/gNGjkLAbUnk1bL2nDI85Ew.png)
商談の画面から「商談の更新」をクリックします
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534642/MFDAAAZrmt2/FXHmkH-Zlr98dcYuPIE1hQ.png)
商談の更新画面が表示されます
入力した値でレコードが更新されるか確認してみてください
![image.png](https://res.cloudinary.com/hqvhlyexn/image/upload/v1683534644/MFDAAAZrmt2/F0Sauh9HgjssPxUkl-65Vw.png)
公開日: 2021.11.08
この情報は役に立ちましたか?
ご意見お待ちしております。
フィードバックありがとうございます。
より役に立つために
役に立たなかった一番の理由を教えてください。