Skip to main content

レコードページのコンポーネントと項目をカスタマイズする

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning ページを作成、カスタマイズ、管理する。
  • Lightning アプリケーションビルダーを使用する。
  • プロファイルに Lightning ページレイアウトを割り当てる。
メモ

メモ

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

翻訳版の Trailhead を活用する方法については、自分の言語の Trailhead バッジをご覧ください。

メモ

アクセシビリティ

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

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

レコードページ

初めて Salesforce にログインしたときに表示される内容は、ほんの出発点にすぎません。Lightning アプリケーションビルダーとページレイアウトを組み合わせて使用すると、オブジェクトレコードページを多様にカスタマイズできます。

ホームページやレコードページなど、Lightning Experience で表示されるページのほとんどは Lightning ページです。Lightning ページは、ページ上の領域に割り当てられたコンポーネントの集まりです。Lightning アプリケーションビルダーを使用して、ページの構造、コンポーネントの位置、ページに表示されるレコード詳細項目をカスタマイズできます。(詳細は、Trailhead の「Lightning アプリケーションビルダー」モジュールを参照してください)

ページに表示されるボタン、リンク、アクション、関連リストなどの他のページコンテンツは、ページレイアウトエディターと呼ばれる別のツールで制御されます。

この単元では、Lightning アプリケーションビルダーとページレイアウトエディターの両方を操作して、Lightning レコードページのカスタマイズ方法を確認します。

Lightning アプリケーションビルダーでは、次のことができます。

  • Lightning ページに表示されるコンポーネントを制御する
  • さまざまなアプリケーションやユーザー向けにカスタム Lightning ページを作成する
  • レコードページに表示される項目を制御する
ページレイアウトエディターでは次のことができます。
  • ユーザーに表示する関連レコードのリストとカスタムリンクを制御する。
  • レコードおよび関連リストに表示する標準ボタンとカスタムボタンを制御する。
  • ページに表示するクイックアクションを制御する。

さて、ボタン、リスト、レコードの詳細とは一体何でしょうか。まずは取引先責任者レコードを例にページレイアウトを見てから、ページのカスタマイズに進みましょう。

レコードページの次の部分をカスタマイズして、組織内のさまざまなチームやプロセスに合わせてパーソナライズされたビューを作成できます。
  • 前の単元では、コンパクトレイアウトを使用してレコードの特長 (1) および表示される項目をカスタマイズする方法について学びました。レコードの特長領域には、ボタンとアクション (2) のセットも含まれています。これについては、後続の単元でカスタマイズ方法を学びます。
  • [関連] タブ (3) には、表示しているレコードに関連付けられている他のレコードのリストである、関連リストが示されます。たとえば、取引先には関連する商品、取引先責任者、商談、その他のカスタムレコードがあります。
  • [詳細] タブ (4) には、レコードに関する情報が表示されます。ここには、デフォルトで項目とリンクが表示されます。たとえば、取引先責任者レコードの詳細ページには、名前、住所、所有者、取引先に加え、取引先責任者および他の関連レコードに関する情報を保存するためのその他の項目が表示されます。 [関連リスト] ページ

ボタン、リンク、アクションについてはすでに取り上げていますが、その詳細と Lightning ページで変更する方法については、後続の単元で説明します。この単元では、ページ構造、コンポーネント、レコードの詳細項目、関連リストのカスタマイズを中心に説明します。

カスタム Lightning レコードページを作成する

Maria は、営業チーム専用の Energy Audit レコードページを作成して、営業チームのユーザーが Energy Audit レコードを表示したときに、必要な項目と関連リスト情報が表示されるようにしたいと考えています。

Energy Audit カスタムオブジェクトを作成すると、システムデフォルトの Energy Audit レコードページも作成されます。現在、Energy Audit レコードを閲覧する組織のユーザーすべてに対して、そのデフォルトレイアウトの情報が表示されます。Maria は、営業担当専用のカスタマイズされたレコードページを作成することにしました。

それでは見てみましょう。

  1. アプリケーションランチャー () で [Energy Consultations (エネルギーコンサルティング)] を見つけて選択し、[Energy Audits (エネルギー監査)] タブをクリックします。
  2. [All (すべて)] リストビューを開きます。
  3. [Burlington evaluation] を選択します。
  4. ページの [設定] メニュー (設定) から、[編集ページ] を選択します。
    Lightning アプリケーションビルダーでページが開きます。
  5. ページのプロパティで、[表示ラベル] を [Energy Audit Record Page for Sales (営業用の Energy Audit レコードページ)] に変更します。
  6. [API 参照名] を Energy_Audit_Record_Page_for_Sales に変更します。
  7. キャンバス の [詳細] タブをクリックして、[レコード詳細] コンポーネント (項目のある場所) をクリックします。
    Energy Audit オブジェクトのすべての項目が表示されますが、カスタマイズ不可能な 1 つのブロックにまとめられています。これは、ボタンを 1 つクリックするだけで変更できます。
  8. プロパティペインで、[今すぐアップグレード] をクリックして、動的フォーム移行ウィザードを開始します。[今すぐアップグレード] ボタンが表示されている動的フォームへのアップグレードメッセージ動的フォームを使用すると、既存のレコードページの項目とセクションを個別のコンポーネントに移行できます。そうすることで、ページ上の他のコンポーネントと同じように、この項目とセクションを設定 (追加、一部の削除、さまざまな場所への移動) して、ユーザーが必要とする項目やセクションのみを表示できるようになります。
  9. ウィザードの手順に従って、[Energy Audit Layout (エネルギー監査レイアウト)] を選択し、[完了] をクリックします。
    右側の列に項目がほとんどありません。また、項目の順序も改善の余地があります。これを修正しましょう。
  10. [Audit Notes (監査メモ)] 項目をクリックして、右側の列の [所有者] の上にドラッグします。
  11. [Type of Installation (設置場所種別)] 項目も同じようにします。
  12. まだであれば、[取引先] を [Energy Audit Name (エネルギー監査名)] の下に移動します。
  13. [Save (保存)] をクリックして、[今回はダウンロードしない] をクリックします。
    ページを有効化すると、ユーザーが利用できるようになります。ただし、このページはまだユーザーが利用できる状態ではありません。Maria は関連リストを追加したいと考えています。

Energy Audit はカスタムオブジェクトであるため、まだ関連リストがありません。追加しましょう。この操作は、ページレイアウトエディターで行えます。

  1. アプリケーションビルダーヘッダーの [戻る] (戻る) をクリックします。
  2. [設定] メニュー (設定) から [設定] を選択します。
    新しいブラウザータブで [設定] が開きます。
  3. [オブジェクトマネージャー] をクリックして、オブジェクトのリストで [Energy Audit (エネルギー監査)] を見つけてクリックします。
  4. [ページレイアウト] をクリックして、[Energy Audit Layout (エネルギー監査レイアウト)] をクリックします。
  5. [関連リスト] セクションまでスクロールします。
  6. パレットで [関連リスト] をクリックして、[ファイル] 要素を [関連リスト] セクションにドラッグします。
    [ファイル] 関連リストを使用すると、Ursa Major Solar の営業担当がレコードにファイルを追加して、レコードに関連するファイルのリストを確認できるようになります。
  7. [適用] をクリックして、[はい] をクリックします。

ページを有効化する

これでページのカスタマイズは完了しましたが、まだ誰も表示することができない状態です。それでは、Lightning ページを有効化して、営業ユーザーが利用できるようにします。

  1. [設定] で [ホーム] タブをクリックします。
  2. [クイック検索] ボックスに App Builder (アプリケーションビルダー) と入力し、[Lightning アプリケーションビルダー] を選択します。
  3. [Energy Audit Record Page for Sales (営業用の Energy Audit レコードページ)] の横にある [編集] をクリックします。
  4. [有効化] をクリックします。

[Activation: Energy Audit Record Page for Sales (有効化: 営業用の Energy Audit レコードページ)] にある 3 つのオプション ([組織のデフォルト]、[アプリケーションのデフォルト]、[アプリケーション、レコードタイプ、およびプロファイル])。

有効化には 4 つのオプションがあります。

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

Maria は、Ursa Major Solar の営業担当に新しいページレコードを見てもらいたいと考えています。そのためには、営業チームのユーザープロファイルにページレイアウトを割り当てて、営業担当が Energy Audit レコードを表示したときに新しい項目のビューと関連リストが表示されるようにします。また、デスクトップと携帯電話の両方のフォーム要素にもページレイアウトが割り当てられるようにします。これで、ユーザーはデスクトップで作業しているときに表示することも、外出先でモバイルデバイスから表示することもできます。では始めましょう。 

  1. [アプリケーション、レコードタイプ、およびプロファイル] タブをクリックします。
  2. [アプリケーション、レコードタイプ、およびプロファイルに割り当て] をクリックします。
  3. ウィザードの手順を実行し、ページを Energy Consultations (エネルギーコンサルティング)、デスクトップと携帯電話のフォーム要素、マスターレコードタイプ、Custom: Sales Profile (カスタム: セールスプロファイル)、システム管理者プロファイルの両方に割り当てます。
    Maria の場合は通常、[Custom: Sales Profile (カスタム: セールスプロファイル)] のみを選択しますが、ここではシステム管理者としてログインしているため、新しいページレイアウトの外観を確認するために [システム管理者] も選択します。
  4. ページ割り当てを確認します。
    [新規ページ] 列に、有効化するページの名前 [Energy Audit Record Page for Sales (営業用の Energy Audit レコードページ)] が入力されています。
  5. [Save (保存)] をクリックします。
これで、Maria のカスタマイズ済みのレコードページを使用できます。では、実際に試してみましょう。

カスタマイズされたページを表示する

  1. アプリケーションビルダーヘッダーの [戻る] (戻る) をクリックします。
  2. アプリケーションランチャー (アプリケーションランチャー) から [Energy Audits (エネルギー監査)] を見つけて選択し、監査レコードを開きます。
    ページを更新しないと変更が表示されないことがあります。
  3. [詳細] タブを確認します。まとまって見やすくなっていることがわかります。

    変更前 変更後
    元の項目構成の [詳細] タブ 新しい項目構成の [詳細] タブ
  4. [関連] タブをクリックします。
    [ファイル] 関連リストが表示されて、ユーザーがアップロードできるようになっています。

Lightning ページのカスタマイズに慣れてきたところで、今度はユーザーに必要な情報のみを表示するページを作成してみましょう。論理セクションにコンポーネントと項目を配置することで、ユーザーはビジネスにとって重要なデータを容易に保存および管理できます。

リソース

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