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

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

1. [設定] から、[クイック検索] ボックスにアプリケーションビルダーと入力し、[Lightning アプリケーションビルダー] を選択します。
2. [新規] をクリックします。
3. [レコードページ] を選択して、後はウィザードの指示に従っていきます。
4. ページに「New Opportunity Page (新規商談ページ)」という名前を付け、[商談] を選択します。
   オブジェクト項目にオブジェクトの名前を入力してリストを絞り込むと、目的のオブジェクトをすばやく見つけることができます。
5. [ヘッダー、サブヘッダー、右サイドバー] テンプレートを選択して、[完了] をクリックします。
   コンポーネントペインには、商談レコードページに使用できるすべての標準コンポーネントと、組織にインストールしたすべてのカスタムコンポーネントが表示されます。
6. [設定] メニュー () から、[常にアイコンを表示] を選択します。
   パレットに表示されるアイコンには、各コンポーネントでサポートされるフォーム要素が表示されます。たとえば、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. [保存] をクリックして、[今回はダウンロードしない] をクリックします。

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. ページを保存して、[有効化] をクリックします。

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. [商談] をタップし、[商談成立] で更新した商談に移動します。
   予想どおりに、アクション、レコードの特長、パスが表示されます。ただし、少し下にスクロールしてみると...携帯で表示すると、タブコンポーネントのタブは積み重なっています。詳細を表示するにはタップすれば良いのですが、ちょっと待ってください。足りないものが 1 つあります。[活動] タブはどこに行ったのでしょうか? 活動コンポーネントは携帯電話ではサポートされていないため、ページから削除されています。ゆえに [活動] タブは空になるため、タブもページから削除されたのです。
   
   下の方には、商談を 100 万ドル以上に更新したときに表示されたコンポーネントがあります。ただし、その直下にはデスクトップでは表示されたなかったもの、モバイル専用のコンポーネントが表示されています。

• Lightning Experience のレコードページの作成および設定
• Lightning アプリケーションビルダーを使用した Lightning ページのタブの追加とカスタマイズ
• 動的 Lightning ページ
• Lightning アプリケーションビルダーの考慮事項