問題
サービスマネージャーは、オープンケースの経過日数に応じた色のコード要件をアプリケーションビルダーに提供しました。
- 新しいケースは緑色のフラグを表示
- 1日経過したケースは黄色のフラグを表示
- 3日経過したケースは赤色のフラグを表示
アプリケーションビルダーはこの要件をどのように実装すればよいですか。
- Lightning Web コンポーネント
- クイックアクション
- カスタムボタン
- 数式項目
正解
- Lightning Web コンポーネント
- クイックアクション
- カスタムボタン
- 数式項目
解説
それぞれの選択肢の理由について説明します。
□ Lightning Web コンポーネント
これは不正解です。Lightning Web コンポーネントは柔軟なUIカスタマイズが可能ですが、この要件を満たすにはオーバースペックです。ケースの経過日数に応じた色付きのフラグ表示は、標準機能の数式項目で簡単に実装できます。LWCは開発負荷が高く、メンテナンスコストも増加するため、このケースには適していません。
□ クイックアクション
これは不正解です。クイックアクションは、特定のアクションを実行するためのものであり、レコードの表示に応じた動的なUI変更を行うためのものではありません。ケースの経過日数ごとにフラグの色を変更するという要件には適していません。
□ カスタムボタン
これは不正解です。カスタムボタンは、ユーザーがクリックして初めて機能するものであり、自動的に色を変える用途には向いていません。動的に変化する情報を表示するには、ボタンではなく別の方法を使用する必要があります。
□ 数式項目
これは正解です。数式項目を使用すれば、IMAGE()関数を利用して、ケースの作成日からの経過日数に応じた異なる色のフラグを表示することが可能です。Salesforceの数式機能では、条件に応じて異なる画像を表示できるため、この要件に最も適した方法です。
実践
Salesforceでの数式項目を使用して、特定の条件に基づいてカラーコードされた画像(この場合はフラグ)を表示する手順は以下の通りです。
- 新しい数式項目の作成
- 「オブジェクトマネージャー」 > 「ケース」を選択します。
- 「項目とリレーション」に移動し、「新規」を選択します。
- データ型として「数式」を選択し、「次へ」をクリックします。
- 数式の設定
- 項目に名前を付けます(例えば、「Case Status Indicators」)。
- 数式の戻り値のデータ型として、「テキスト」を選択します。
- 「次へ」をクリックして、数式エディターに進みます。
- 数式の入力
- ケースの作成日からの経過日数を計算し、それに応じたフラグを表示する条件式を設定します。以下の条件に基づき、フラグの色が変わります。
※以下の画像はSalesforceに標準で組み込まれている画像のため、別途用意する必要はありません。- 0日 : 緑
- 1,2日 : 黄
- 3日以上 : 赤
- ケースの作成日からの経過日数を計算し、それに応じたフラグを表示する条件式を設定します。以下の条件に基づき、フラグの色が変わります。
CASE(
FLOOR(TODAY() - DATEVALUE(CreatedDate)),
0, IMAGE("/img/samples/flag_green.gif", "Green", 30, 30),
1, IMAGE("/img/samples/flag_yellow.gif", "Yellow", 30, 30),
2, IMAGE("/img/samples/flag_yellow.gif", "Yellow", 30, 30),
IMAGE("/img/samples/flag_red.gif", "Red", 30, 30) /* 3日以上は赤 */
)
- 数式の保存と配置
- [構文を確認]を押下し、数式を確認して、保存します。
- ケースのページレイアウトに数式項目を追加して、ユーザーが表示できるようにします。ページレイアウト編集画面で、作成した数式項目を適切なセクションにドラッグ&ドロップします。
- 変更を保存し、必要に応じて複数のページレイアウトに対して同じ変更を適用します。
参考:画像リンクの数式サンプル
次の問題へ

前の問題へ

1問目から復習する

コメント