アプリケーションホーム Lightning ページを作成する

学習の目的

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

• Lightning ページにコンポーネントを追加する。
  
• Lightning ページおよび Lightning コンポーネントのプロパティを設定する。
  
• Lightning ページにアクションを追加する。
  
• Lightning Experience とモバイルアプリケーションに Lightning ページを追加する。
  

メモ

日本語で受講されている方へChallenge は日本語の Trailhead Playground で開始し、日本との値をコピーして貼り付けます。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

アクセシビリティ

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

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

アプリケーションホーム Lightning ページ

アプリケーションのカスタムホームページを Salesforce モバイルアプリケーションと Lightning Experience アプリケーションのナビゲーションバーに追加します。ユーザーはこのページを使用して、アプリケーションの中で最も重要なオブジェクトや項目に簡単にアクセスできます。

アプリケーションページを作成する

次は、営業チーム向けのアプリケーションホームページを作成しましょう。

営業チームは、パイプラインで最も重要な商談を確認できるように、主要な詳細事項を一目で把握できる視覚的インターフェースを必要としています。最近表示した商談を確認し、1 回のタップやクリックでレコードの詳細を表示できるようにする必要があります。さらに、外出先で活動を記録したり、取引先や商談を作成したりする機能も必要です。

では始めましょう。

1. [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに App Builder (アプリケーションビルダー) と入力し、[Lightning App Builder (Lightning アプリケーションビルダー)] を選択します。
   
2. [新規] をクリックします。
   
3. [アプリケーションページ] を選択し、[次へ] をクリックします。
   
4. Lightning ページに Top Accounts and Opportunities (重要な取引先と商談) という名前を付けます。
   
5. [Two Regions (2 つの範囲)] テンプレートを選択して、[Done (完了)] をクリックします。
   Lightning アプリケーションビルダーのウォークスルーがポップアップした場合は閉じます。
   
6. [リストビュー] コンポーネントを一番目の範囲にドラッグします。
   
7. [プロパティ] ペインで、オブジェクトに [取引先] を選択し、[プラチナおよびゴールド SLA 顧客] 条件を選択して、表示するレコードの数を「5」に設定します。
   
8. 2 番目の範囲に [最近使ったデータ] コンポーネントを追加します。
   
9. [Recent Items (最近使ったデータ)] コンポーネントのプロパティペインで、カスタム表示ラベルを Recent Opportunities (最近の商談) に変更します。
   
10. プロパティペインのオブジェクト [Select (選択)] をクリックし、利用可ウインドウにある [商談] を選択済みウインドウへ移行させ、この [商談] のみが含まれるようにします。
    
11. [プロパティ] ペインで、[ページ] をクリックし、[選択] をクリックしてページに次のアクションを追加します。
    

• 活動の記録
  
• 新規取引先
  
• 新規商談
  Lightning アプリケーションページに追加できるのは、グローバルアクションのみです。
  

12. ツールバーで、ビューを [タブレット - 横] に変更します。
    
13. [保存] をクリックして、[今回はダウンロードしない] をクリックします。
    

これで、ページの作成が完了し、Lightning Experience およびモバイルアプリケーションに追加する準備がほぼ整いました。

Lightning Experience と Salesforce モバイルアプリケーションにアプリケーションページを追加する

他のページと同様に、ページを有効にしないとユーザーはページにアクセスできません。有効化するタイミングで、ページのカスタムタブ表示ラベルをカスタマイズしたり、表示を調整したり、Salesforce モバイルアプリケーションや Lightning Experience アプリケーションのナビゲーションバー内での位置を設定したりすることができます。これらはすべて 1 か所で行えます。

1. [有効化] をクリックします。
   
2. アプリケーション名は変更しないでください。デフォルトでは、Lightning ページに付けた表示ラベルが、カスタムタブの表示ラベルとして使用されます。
   
3. アイコンを青い稲妻アイコンに変更します。ここで選択するアイコンは、モバイルアプリケーションと Lightning Experience のページのアイコンとして使用されます。
   
4. タブの表示はそのまま、すべてのユーザーに表示する設定にします。
   [システム管理者のみを対象に有効化] の設定は、Lightning ページで作業をしているときに便利です。システム管理者だけにページを表示できるよう制限すると、システム管理者はページを表示してテストすることができる一方で、公開する準備ができるまでユーザーには見えないようにできます。
   
5. [Lightning Experience] タブをクリックします。
   
6. Sales アプリケーションを選択して [アプリケーションにページを追加] をクリックします。 
   

メニューに追加するページは、デフォルトでは 2 番目の位置に表示されますので、そのままにしておきます。ページを最上位の位置にすると、そのページはすべての Lightning Experience ユーザーのランディングページになります。

7. [モバイルナビゲーション] タブをクリックします。
   
8. [Mobile Navigation Menu (モバイルナビゲーションメニュー)] を選択して [Add page to app (アプリケーションにページを追加)] をクリックします。
   

これで Salesforce モバイルアプリケーションの「モバイル専用」 Lightning アプリケーションのモバイルナビゲーションにアプリケーションページが追加されます。先ほどやったように Lightning Experience の Sales アプリケーションにページを追加すると、Salesforce モバイルアプリケーション内の Sales アプリケーションにもアプリケーションページが表示されるようになります。デフォルトでは、「モバイル専用」アプリケーションに追加された新しいページは、[Smart Search Items (スマート検索項目)] メニュー項目の下に表示されます。[Top Accounts and Opportunities (重要な取引先と商談)] ページをそのままにしておくと、メニューの [アプリケーション] セクションに表示されます。それは望ましくないため、上に移動しましょう。

9. ページを [Today (今日)] メニュー項目の下にドラッグします。 
   

10. [保存] をクリックします。
    

これで、モバイルおよび Lightning Experience ユーザー向けのアプリケーションのホームページの準備が整いました。

Lightning Experience でのアプリケーションページをテストする

ページの作成と有効化が完了しました。では、実際に確認してみましょう。

1. アプリケーションビルダーがまだ表示されている場合は、[戻る] をクリックして [設定] に戻ります。
   
2. アプリケーションランチャー () で、[Sales (セールス)] を見つけて選択します。
   
3. アプリケーションのナビゲーションバーにある [Top Accounts and Opportunities (上位の取引先と商談)] をクリックします。
   これが、作成した Lightning ページです。稲妻アイコンがここにも表示され、追加した 3 つのアクションが強調表示パネル内にあります。 
   

Salesforce モバイルアプリケーションのアプリケーションページをテストする

次は、携帯電話でページを見てみましょう。

1. Salesforce モバイルアプリケーションを開きます。
   
2. Trailhead Playground のログイン情報を使用してログインします。(Trailhead Playground のログイン情報がわからない場合は、こちらの記事を参照してください)。
   
3. メニューから、アプリケーションランチャーをタップして、Sales アプリケーションを開きます。
   変更が反映されるには、Sales アプリケーションをプルして更新する必要がある場合があります。
   
4. [Top Accounts and Opportunities (上位の取引先と商談)] をタップします。
   これが、作成した Lightning ページです。選択した稲妻アイコンがあり、追加した 3 つのアクションがアクションバーに表示されています。 
   

5. ページを使用してみましょう。上下にスクロールしてコンポーネントを確認し、アクションアイコンをタップしてどうなるか見てみましょう。
   

リソース

• Salesforce ヘルプ: カスタムアプリケーションページの作成: 全体像
  
• Salesforce Help: Lightning アプリケーションページの有効化
  
• Salesforce ヘルプ: Lightning ページの標準コンポーネント