動的ページの表示ルールを追加する

学習の目的

この単元を完了すると、次のことができるようになります。

• コンポーネント、項目、項目セクションの表示ルールを作成する。
• 表示ルールを使用して、ページをどのようにユーザーにとって便利にできるかを説明する。

始める前に

この単元は、前の 2 つの単元で作成してカスタマイズしたレコードページに基づきます。まず前の 2 つの単元を完了してください。同じレコードページを使用してこの単元を説明していきます。

コンポーネントの表示ルールを追加する

Lightning レコードページにコンポーネントが表示されるタイミングをコントロールできることをご存知ですか? これは、コンポーネントの表示条件とロジックをプロパティに追加することで可能になります。

コンポーネントの表示設定のプロパティは、Lightning アプリケーションビルダーでレコードページ、アプリケーションページまたはホームページのコンポーネントを選択すると表示されます。この動作は、標準コンポーネント、カスタムコンポーネント、AppExchange のコンポーネントでも同じです。カスタムコンポーネントには何もする必要はありません。すべて Lightning アプリケーションビルダーによって処理されます。条件を定義しない場合、コンポーネントは通常どおりに Lightning ページに表示されます。コンポーネントに検索条件を定義し、検索条件ロジックを設定すると、そのコンポーネントは検索条件を満たすまで非表示になります。

それでは、試してみましょう。商談の金額が 100 万ドル以上で、フェーズが商談成立の場合に、リッチテキストコンポーネントが表示される検索条件を作成します。

1. [設定] から、[クイック検索] ボックスにアプリケーションビルダーと入力し、[Lightning アプリケーションビルダー] を選択します。
2. [New Opportunity Page (新規商談ページ)] を開きます。
3. ページの Chatter コンポーネントの上にリッチテキストコンポーネントを追加します。
4. コンポーネントに A million dollar opportunity closed!Oh yeah! (100 万ドルの商談成立!) というテキストを入力します。
5. コンポーネントのプロパティで、テキストを太字、中央揃え、18 ポイントのサイズに設定し、好きなフォントに変更します。
6. [Display as card (カードとして表示)] は選択したままにします。
   この設定では、透明ではなく白の背景を追加することで、Lightning ページ上でコンポーネント内のテキストが読みやすくなります。設定をオフに切り替えてみると、その意味がわかります。
7. [検索条件を追加] をクリックします。
8. [項目] を [金額] に設定します。
9. [演算子] を [＞＝] に設定します。[Value (値)] に 1000000 と入力します。 
   
10. [Done (完了)] をクリックします。
11. もう一度、[Add Filter (検索条件を追加)] をクリックして、[Stage (フェーズ)] [Equal (等号)] [Closed Won (商談成立)] という別の検索条件を作成します。
    表示ルールでは、項目値に基づいてコンポーネントを表示するかどうかを制御する以外にもできることがあります。表示ルールを使用すれば、ページを表示しているフォーム要素 (またはデバイス) に基づいてページにコンポーネントを表示するかどうかを制御することもできます。それでは、ページを携帯電話で表示する場合にのみ、コンポーネントが表示されるようなルールを設定してみましょう。
12. 最初のコンポーネントの直下に別のリッチテキストコンポーネントを追加します。
13. コンポーネントに「This component is for mobile users only」 (このコンポーネントはモバイルユーザー専用)というテキストを入力します。
14. テキストを好きなようにカスタマイズして、[検索条件を追加] をクリックします。
15. [エンティティ種別] で、[デバイス] をクリックします。
16. [値] 項目を [電話] に設定して [完了] をクリックします。
17. ページを保存します。

項目と項目セクションに表示ルールを追加する

[Field (項目)] コンポーネントと [Field Section (項目セクション)] コンポーネントで表示条件を設定することにより、Lightning レコードページをさらに動的にできます。たとえば、特定のプロファイルや権限を持つユーザーがページにアクセスするまで項目または一連の項目を非表示にできます。または、別の項目が特定の値に設定されている場合にのみ項目を表示できます。

[Delivery/Installation Status (配送/設置状況)] 項目が [In progress (進行中)] または [Completed (完了)] に設定されるまで、レコードページの [Tracking Number (追跡番号)] が非表示になる表示ルールを作成しましょう。

1. [More Details (その他の詳細)] タブをクリックし、[Additional Information (追加情報)] セクションの [Tracking Number (追跡番号)] 項目を選択します。
2. [Tracking Number (追跡番号)] 項目のプロパティペインで、[Add Filter (検索条件を追加)] をクリックします。
3. 検索条件を作成します。
   1. Field (項目): Delivery/Installation Status (配送/設置状況)
   2. Operator (演算子): Equal (等号)
   3. Value (値): In progress (進行中)
4. [Done (完了)] をクリックします。
5. [Add Filter (検索条件を追加)] をもう一度クリックして、別の検索条件を作成します。
   1. Field (項目): Delivery/Installation Status (配送/設置状況)
   2. Operator (演算子): Equal (等号)
   3. Value (値): Completed (完了)
6. [Done (完了)] をクリックします。
7. [Show component when (次の場合にコンポーネントを表示)] で、[Any filters are true (いずれかの検索条件が該当する)] を選択します。この選択によって、いずれかの検索条件を満たすと項目が表示されます。
8. ページを保存します。[Tracking Number (追跡番号)] 項目の新しいアイコンに気づきましたか? この眼のアイコン () は、コンポーネントまたは項目に表示条件が割り当てられていることを示します。

このモジュールでは、レコードページの動的フォームへの移行と一部の項目の配置変更を行い、さらに表示ルールを使用してページをより動的にしました。ユーザーには実際にどのように表示されるのでしょうか? 調べてみましょう。

結果を確認する

作業の結果を確認してみましょう。まずはデスクトップでページを見てみます。

1. アプリケーションビルダーヘッダーの [戻る] () をクリックします。
2. アプリケーションランチャー () で [セールス] を見つけて選択し、[商談] タブをクリックします。
3. [All Opportunities (すべての商談)] リストビューを開きます。
4. [Dickenson Mobile Generators] を選択します。
   レコードページで行った変更を表示するために、商談ページを更新する必要のある場合があります。

レコードページは次のようになります。レコードページを有効化したときにシステム管理者プロファイルに割り当てたことによって、システム管理者はこのページを表示できますが、組織の他のユーザーは表示できません。カスタムレコードページを作成して、アプリケーション、レコードタイプ、ユーザープロファイル別に割り当てれば、ユーザーごとに操作環境をカスタマイズできます。営業マネージャーには営業担当とは異なる商談のビューを設定します。標準の法人取引先ページとは異なる非営利団体ページを設定します。

[Details (詳細)] タブでは、ページが以前よりも簡潔になり、項目がより整理されています。一部の項目が [Details (詳細)] タブから移動したため、ページの読み込みが少し速くなりました。

また、[More Details (その他の詳細)] タブをクリックすると、ユーザーには [Tracking Number (追跡番号)] 項目が非表示になっていることがわかります。これは、表示の検索条件をまだ満たしていないからです。 

表示ルールの動作を確認する

[Tracking Number (追跡番号)] 項目の表示条件は、[Delivery/Installation Status (配送/設置状況)] 項目が [In progress (進行中)] か [Completed (完了)] のいずれかに設定されていることに基づきます。表示ルールがトリガーされたときにページで何が起こるかを見てみましょう。

1. まだ表示していない場合は、[More Details (その他の詳細)] タブをクリックします。
2. [Delivery/Installation Status (配送/設置状況)] 項目の をクリックして、インライン編集を開きます。
3. [Additional Information (追加情報)] セクションに注目しながら、[Delivery/Installation Status (配送/設置状況)] の値を [In progress (進行中)] に変更します。[Tracking Number (追跡番号)] 項目が表示されましたか? 表示ルールの検索条件を満たすと、ルールがトリガーされて項目が表示されます。
4. 変更内容を保存します。

項目値に基づいてコンポーネントまたは項目が表示されるかどうかの制御は、表示ルールでできることの 1 つに過ぎません。表示ルールを使用すれば、表示しているユーザーのプロファイルや権限、またはページを表示しているフォーム要素 (デバイス) に基づいてページにコンポーネントを表示するかどうかを制御することもできます。

ちょっと待ってください。ページに 2 つのリッチテキストコンポーネントを追加しましたが、表示されていません。その理由は、1 つのコンポーネントについては、デスクトップでページを表示しているからです。これについては、後で説明します。もう 1 つのコンポーネントについては、商談が設定した条件を満たしていないからです。条件を変更してみましょう。

1. 強調表示パネルのページレベルアクションから [編集] を選択します。
2. 商談の金額を 100 万ドル以上、フェーズを [Closed Won (商談成立)] に変更し、[Save (保存)] をクリックします。
   見てください! ページを更新する必要すらありません。変更を保存し、検索条件を満たすとすぐに、ページは自動的に更新され、リッチテキストコンポーネントとメッセージが表示されます。

今度は、Salesforce モバイルアプリケーションでページを見てみましょう。

1. スマートフォンでアプリケーションを開きます。
2. Trailhead Playground のユーザー名とパスワードを使用してログインします。
   Playground のユーザー名とパスワードがわからない場合は、「Trailhead Playground の管理」モジュールで取得方法を確認してください。
3. メニューを開いて、[App Launcher (アプリケーションランチャー)] をタップし、[Sales (セールス)] アプリケーションを開きます。
4. [Opportunities (商談)] をタップし、Dickenson Mobile Generators 商談に移動します。
   予想どおりに、アクション、レコードの特長、パスが表示されます。ただし、少し下にスクロールしてみると...
   携帯で表示すると、タブコンポーネントのタブは積み重なっています。詳細を表示するにはタップすれば良いのですが、ちょっと待ってください。足りないものが 1 つあります。[活動] タブはどこに行ったのでしょうか? 活動コンポーネントは携帯電話ではサポートされていないため、ページから削除されています。ゆえに [活動] タブは空になるため、タブもページから削除されたのです。
   
   下の方には、商談を 100 万ドル以上に更新したときに表示されたコンポーネントがあります。ただし、その直下にはデスクトップでは表示されたなかったもの、モバイル専用のリッチテキストコンポーネントが表示されています。

リソース

• Salesforce ヘルプ: 動的な Lightning ページ
• Salesforce ヘルプ: Lightning ページ表示ルールの考慮事項