アプリケーションホーム Lightning ページを作成する
学習の目的
- Lightning ページにコンポーネントを追加する。
- Lightning ページおよび Lightning コンポーネントのプロパティを設定する。
- Lightning ページにアクションを追加する。
- Lightning Experience とモバイルアプリケーションに Lightning ページを追加する。
メモ
このバッジのハンズオン Challenge は日本語、スペイン語 (LATAM)、ポルトガル語 (ブラジル) に対応しています。Playground の言語を変更するには、こちらの指示に従ってください。日本語等、翻訳された言語と英語に差異がある可能性があります。英語以外の言語での指示に従って Challenge に合格できなかった場合は、[言語] と [地域] をそれぞれ [English]、[アメリカ合衆国] に切り替えてからもう一度お試しください。
翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。
アクセシビリティ
この単元には、スクリーンリーダーユーザー向けの追加の説明が用意されています。この単元のスクリーンリーダーバージョンを利用する場合は、以下のリンクをクリックしてください。
アプリケーションホーム Lightning ページ
アプリケーションページを作成する
営業チーム向けのアプリケーションホームページを作成しましょう。
営業チームは、パイプラインで最も重要な商談を確認できるように、主要な詳細事項を一目で把握できる視覚的インターフェースを必要としています。最近表示した商談を確認し、1 回のタップやクリックでレコードの詳細を表示できるようにする必要があります。さらに、外出先で活動を記録したり、取引先や商談を作成したりする機能も必要です。
それでは始めましょう。
- [設定] から、[クイック検索] ボックスに
アプリケーションビルダーと入力し、[Lightning アプリケーションビルダー] を選択します。 - [新規] をクリックします。
- [アプリケーションページ] を選択し、[次へ] をクリックします。
- Lightning ページに
Top Accounts and Opportunities(重要な取引先と商談) という名前を付けます。 -
[Two Regions (2 つの範囲)] テンプレートを選択して、[Done (完了)] をクリックします。
Lightning アプリケーションビルダーのウォークスルーがポップアップした場合は閉じます。 - [リストビュー] コンポーネントを一番目の範囲にドラッグします。
- [プロパティ] ペインで、オブジェクトに [取引先] を選択し、[プラチナおよびゴールド SLA 顧客] 条件を選択して、表示するレコードの数を「5」に設定します。
- 2 番目の範囲に [最近使ったデータ] コンポーネントを追加します。
- [最近使ったデータ] コンポーネントの [プロパティ] ペインで、[選択] をクリックし、[選択済み] リストを設定して商談のみが含まれるようにします。
- [プロパティ] ペインで、[ページ] をクリックし、[選択] をクリックしてページに次のアクションを追加します。
- 活動の記録
- 新規取引先
- 新規商談
Lightning アプリケーションページに追加できるのは、グローバルアクションのみです。
- ツールバーで、ビューを [タブレット - 横] に変更します。
- [保存] をクリックして、[今回はダウンロードしない] をクリックします。
これで、ページの作成が完了し、Lightning Experience およびモバイルアプリケーションに追加する準備がほぼ整いました。
Lightning Experience と Salesforce モバイルアプリケーションにアプリケーションページを追加する
他のページと同様に、ページを有効にしないとユーザーはページにアクセスできません。有効化するタイミングで、ページのカスタムタブ表示ラベルをカスタマイズしたり、表示を調整したり、Salesforce モバイルアプリケーションや Lightning Experience アプリケーションのナビゲーションバー内での位置を設定したりすることができます。これらはすべて 1 か所で行えます。
- [有効化] をクリックします。
- アプリケーション名は変更しないでください。デフォルトでは、Lightning ページに付けた表示ラベルが、カスタムタブの表示ラベルとして使用されます。
- アイコンを青い稲妻アイコンに変更します。ここで選択するアイコンは、モバイルアプリケーションと Lightning Experience のページのアイコンとして使用されます。
- タブの表示はそのまま、すべてのユーザーに表示する設定にします。
[システム管理者のみを対象に有効化] の設定は、Lightning ページで作業をしているときに便利です。システム管理者だけにページを表示できるよう制限すると、システム管理者はページを表示してテストすることができる一方で、公開する準備ができるまでユーザーには見えないようにできます。 - [Lightning Experience] タブをクリックします。
- Sales アプリケーションを選択して [アプリケーションにページを追加] をクリックします。
メニューに追加するページは、デフォルトでは 2 番目の位置に表示されます。これは、そのままにしましょう。ページを最上位の位置にすると、そのページはすべての Lightning Experience ユーザーのランディングページになります。 - [モバイルナビゲーション] タブをクリックします。
-
[Mobile Navigation Menu (モバイルナビゲーションメニュー)] を選択し、[Add page to app (アプリケーションにページを追加)] をクリックします。
これで Salesforce モバイルアプリケーションの「モバイル専用」 Lightning アプリケーションのモバイルナビゲーションにアプリケーションページが追加されます。先ほどやったように Lightning Experience の Sales アプリケーションにページを追加すると、Salesforce モバイルアプリケーション内の Sales アプリケーションにもアプリケーションページが表示されるようになります。
デフォルトでは、「モバイル専用」アプリケーションに追加された新しいページは、[スマート検索項目] メニュー項目の下に表示されます。[Top Accounts and Opportunities (重要な取引先と商談)] ページをそのままにしておくと、メニューの [アプリケーション] セクションに表示されます。それは望ましくないため、上に移動しましょう。
- ページを [今日] メニュー項目の下にドラッグします。
- [保存] をクリックします。
Lightning Experience でのアプリケーションページをテストする
ページの作成と有効化が完了しました。次に、実際に確認してみましょう。
- アプリケーションビルダーがまだ表示されている場合は、[戻る] をクリックして [設定] に戻ります。
- アプリケーションランチャー (
) で、[Sales (セールス)] を見つけて選択します。 - アプリケーションのナビゲーションバーにある [Top Accounts and Opportunities (上位の取引先と商談)] をクリックします。
これが、作成した Lightning ページです。稲妻アイコンがここにも表示され、追加した 3 つのアクションが強調表示パネル内にあります。
Salesforce モバイルアプリケーションのアプリケーションページをテストする
次は、携帯電話でページを見てみましょう。
- Salesforce モバイルアプリケーションを開きます。
- Trailhead Playground のログイン情報を使用してログインします。(Trailhead Playground のログイン情報がわからない場合は、こちらの記事を参照してください)。
- メニューから、アプリケーションランチャーをタップして、Sales アプリケーションを開きます。
変更が反映されるには、Sales アプリケーションをプルして更新する必要がある場合があります。 -
[Top Accounts and Opportunities (上位の取引先と商談)] をタップします。
これが、作成した Lightning ページです。選択した稲妻アイコンがあり、追加した 3 つのアクションがアクションバーに表示されています。
- ページを使用してみましょう。上下にスクロールしてコンポーネントを確認し、アクションアイコンをタップしてどうなるか見てみましょう。
