進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Lightning Experience および Salesforce モバイルアプリケーションにカスタマイズされたレコードページを作成する

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning Experience および Salesforce モバイルアプリケーションにカスタマイズされたオブジェクトレコードページを作成する。
  • レコードページコンポーネントに表示ルールを追加する。
  • カスタムレコードページをユーザに対して有効にする。

Lightning Experience のレコードページのカスタマイズ

Lightning アプリケーションビルダーを使用して、レコードページにコンポーネントの追加、削除、並び替えを行うことによって、各オブジェクトのレコードのユーザへの表示をカスタマイズできます。さらに、レコードページをカスタマイズして特定の Lightning アプリケーションに割り当て、ユーザが操作するアプリケーションのコンテキスト用に特別にカスタマイズされたレコードページにアクセスできるようにすることも可能です。

レコードページ

ホームページと同様に、カスタムレコードページを作成する方法は複数あります。テンプレートを使用して最初から作成する方法、他のカスタムレコードページを複製する方法、そして既存のページを編集する方法です。ただし、ホームページとは異なり、カスタムレコードページは、デスクトップの Lightning Experience だけではなく、Salesforce モバイルアプリケーションでもサポートされています。ここでは、テンプレートを使用してレコードページを作成し、デスクトップと携帯電話でどのように表示されるかを見てみましょう。

カスタム Lightning レコードページの作成

カスタム商談レコードページを最初から作成しましょう。

しくみを理解するために、標準レコードページのレイアウトを少し変更します。ここで操作に慣れれば、レコードページを好きなようにカスタマイズできるようになります。では始めましょう。

  1. [設定] から、[クイック検索] ボックスに「アプリケーションビルダー」と入力し、[Lightning アプリケーションビルダー] を選択します。
  2. [新規] をクリックします。
  3. [レコードページ] を選択して、後はウィザードの指示に従っていきます。
  4. ページに「New Opportunity Page (新規商談ページ)」という名前を付け、[商談] を選択します。
    ヒント

    ヒント

    オブジェクト項目にオブジェクトの名前を入力してリストを絞り込むと、目的のオブジェクトをすばやく見つけることができます。

  5. [ヘッダー、サブヘッダー、右サイドバー] テンプレートを選択して、[完了] をクリックします。
    コンポーネントペインには、商談レコードページに使用できるすべての標準コンポーネントと、組織にインストールしたすべてのカスタムコンポーネントが表示されます。
  6. [設定] メニュー (Lightning アプリケーションビルダーのコンポーネントペイン設定メニューアイコン) から、[常にアイコンを表示] を選択します。
    パレットに表示されるアイコンには、各コンポーネントでサポートされるフォーム要素が表示されます。たとえば、Chatter フィードコンポーネントをページに追加すると、デスクトップと Salesforce モバイルアプリケーションのいずれでページを表示した場合でも、このコンポーネントが表示されます。ただし、Chatter パブリッシャーはデスクトップのみでサポートされているため、モバイルでは表示されません。後で完成したページで実際にこの動作を確かめてみましょう。
  7. [強調表示パネル] コンポーネントをページの上の範囲にドラッグします。
    コンポーネントのプロパティペインで [動作を確認] をクリックすると、強調表示パネルのコンテンツがどこから取得されているかを調べることができます。
  8. パスコンポーネントを強調表示パネルの下の領域に追加します。
  9. Chatter コンポーネントを右下の範囲に追加します。
  10. [タブ] コンポーネントを左下の範囲に追加します。
    [タブ] コンポーネントの追加

    [タブ] コンポーネントにはデフォルトでいくつかのタブが配置されています。さらに追加しましょう。

  11. [タブ] コンポーネントの詳細ぺインで [タブを追加] をクリックします。
    デフォルトでは、もう 1 つ [詳細] タブが追加されます。しかしすでに [詳細] タブはあるので、これを何か違うものにしましょう。
  12. 2 つ目の [詳細] タブをクリックします。[タブの表示ラベル] ドロップダウンメニューから [カスタム] を選択し、新しい表示ラベルを「Recent Items (最近使ったデータ)」とします。
    新しいタブの追加
  13. [完了] をクリックします。
  14. [活動] タブを作成します。
  15. プロパティペインで [Recent Items (最近使ったデータ)] タブをタブリストの最上部にドラッグします。
    これで、[Recent Items (最近使ったデータ)] タブがタブコンポーネントの最初の位置に配置されました。クリックしてタブを切り替えることはできますが、タブにはコンポーネントは含まれていないため、何も変化はありません。これは、コンポーネントがタブに割り当てられておらず、タブが空であるためです。これを修正しましょう。
  16. [詳細] タブを選択します。
  17. [詳細] タブのすぐ下のレコード詳細コンポーネントを緑の強調表示領域にドラッグします。
    詳細コンポーネントの追加
  18. [関連リスト] コンポーネントを [関連] タブに追加し、[活動] コンポーネントを [活動] タブに追加し、[最近使ったデータ] コンポーネントを [Recent Items (最近使ったデータ)] タブに追加します。
  19. キャンバスでタブコンポーネントを選択し、プロパティペインでタブの順序を [詳細]、[活動]、[最近使ったデータ]、[関連] の順に変更します。
    コンポーネントの内部のタブをドラッグして移動することはできません。プロパティペインでは調整のみが可能です。
  20. [保存] をクリックして、[今回はダウンロードしない] をクリックします。

レコードページを動的にする

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

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

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

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

ユーザへのカスタムレコードページのロールアウト

素晴らしい成果を広める準備ができました。ページを有効にしましょう。何も難しいことはありません。

レコードページの有効化

有効化には 4 つのオプションがあります。
  • ページを組織のオブジェクトのデフォルトにする。
  • ページを特定の Lightning アプリケーションのデフォルトのオブジェクトレコードページにする。
  • ページを Lightning アプリケーション、レコードタイプ、およびプロファイルの組み合わせに割り当てる。
  • ページをデスクトップや電話などのフォーム要素に割り当てる。

リストの最後の項目に注目です。ユーザのニーズに合わせてカスタマイズされたページを作成できるだけでなく、さらに一歩進めて、ユーザがアクセスする方法に基づいてページをカスタマイズできるのです。移動中や現場でモバイルユーザに必要な情報のみが含まれた、モバイルユーザ専用の独自にカスタマイズされたレコードページを作成できます。同時に、PC やノート PC で作業をするユーザのニーズに応じたデスクトップ専用のレコードページも作成できます。

このページを特定のアプリケーション、レコードタイプ、およびプロファイルを割り当ててみましょう。デスクトップと携帯電話で表示されるように、両方のフォーム要素に割り当てるようにします。

  1. [アプリケーション、レコードタイプ、およびプロファイル] タブをクリックします。
  2. [アプリケーション、レコードタイプ、およびプロファイルに割り当て] をクリックします。
  3. ページをセールスアプリケーション、デスクトップおよび携帯電話のフォーム要素、マスタレコードタイプ、およびシステム管理者プロファイルに割り当てます。
  4. ページ割り当てを確認します。
    [新規ページ] 列に、有効化するページの名前 [New Opportunity Page (新規商談ページ)] が入力されています。
  5. [保存] をクリックします。
ほら、もうできました。これで、カスタマイズしたレコードページを使用できます。では、実際に試してみましょう。
ヒント

ヒント

ところで「これはよく出来ているけど、気が変わって カスタムページを無効にしたくなったらどうするのだろう?」と思っているかもしれません。それも簡単です。[有効化] をクリックして [アプリケーション、レコードタイプ、およびプロファイル] タブをクリックし、[割り当てを削除] をクリックします。

結果の確認

ページの作成と有効化が完了しました。では、実際に確認してみましょう。まずはデスクトップで見てみます。

  1. アプリケーションビルダーヘッダーの [戻る] をクリックします。
  2. アプリケーションランチャー (アプリケーションランチャーアイコン) で [セールス] を見つけて選択し、[商談] タブをクリックします。
  3. 100 万ドル未満の進行中の商談を選択します。
    レコードページで行った変更を表示するには、商談ページを更新する必要がある場合があります。

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

    サンプル商談レコード

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

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

    コンポーネントが表示されました!

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

  6. スマートフォンでアプリケーションを開きます。
  7. 必要に応じて、Trailhead Playground のログイン情報を使用してログインします
  8. メニューを開いて、アプリケーションランチャーをタップし、Sales アプリケーションを開きます。
  9. [商談] をタップし、[商談成立] で更新した商談に移動します。
    予想どおりに、アクション、レコードの特長、パスが表示されます。ただし、少し下にスクロールしてみると...Salesforce モバイルアプリケーションの [商談] ページ

    携帯で表示すると、タブコンポーネントのタブは積み重なっています。詳細を表示するにはタップすれば良いのですが、ちょっと待ってください。足りないものが 1 つあります。[活動] タブはどこに行ったのでしょうか? 活動コンポーネントは携帯電話ではサポートされていないため、ページから削除されています。ゆえに [活動] タブは空になるため、タブもページから削除されたのです。

    下の方には、商談を 100 万ドル以上に更新したときに表示されたコンポーネントがあります。ただし、その直下にはデスクトップでは表示されたなかったもの、モバイル専用のコンポーネントが表示されています。

これで完了です。広い世界に最初の一歩を踏み出しました。

次はアプリケーションページに進みましょう。