Skip to main content
Trailblazer Community は 2023/12/09/ AM 6:00 PST から 2023/12/09/ AM11:00 PST まで使用できなくなります。適宜、活動を計画してください。

Salesforce を試してみる

ビジネス成長を加速する準備が整っていますか? Salesforce をお試しください。

無料トライアルの有効化
予想時間

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

学習の目的

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

メモ

このバッジのハンズオン Challenge は日本語、スペイン語 (LATAM)、ポルトガル語 (ブラジル) に対応しています。Playground の言語を変更するには、こちらの指示に従ってください。日本語等、翻訳された言語と英語に差異がある可能性があります。英語以外の言語での指示に従って Challenge に合格できなかった場合は、[言語] と [地域] をそれぞれ [English]、[アメリカ合衆国] に切り替えてからもう一度お試しください。

メモ

アクセシビリティ

この単元には、スクリーンリーダーユーザー向けの追加の説明が用意されています。この単元のスクリーンリーダーバージョンを利用する場合は、以下のリンクをクリックしてください。

Trailhead スクリーンリーダーの説明を開く

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

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

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 万ドル以上に更新したときに表示されたコンポーネントがあります。ただし、その直下にはデスクトップでは表示されたなかったもの、モバイル専用のコンポーネントが表示されています。
これで完了です。広い世界に最初の一歩を踏み出しました。

次はアプリケーションページに進みましょう。
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる