Lightning カスタムコンポーネントを使用する
学習の目的
この単元を完了すると、次のことができるようになります。
- Lightning カスタムコンポーネントをインストールする
- モバイルデバイスを使用して、Salesforce モバイルでアプリケーションをプレビューする
メモ
日本語で受講されている方へChallenge は日本語の Trailhead Playground で開始し、日本語の値をコピーして貼り付けます。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。
翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。
アクセシビリティ
この単元には、スクリーンリーダーユーザー向けの追加の説明が用意されています。この単元の詳細なスクリーンリーダー版を利用するには、以下のリンクをクリックしてください。
Lightning アプリケーションビルダーの Lightning カスタムコンポーネント
Lightning カスタムコンポーネントを作成するには、プログラミングのスキルが必要です。あるいは、AppExchange から既存の Lightning コンポーネントをインストールすることもできます。
この単元は、ポイント & クリック操作のみでシステムを組むシステム管理者でも学習できます。すでに設定済みのカスタムコンポーネントを用意しています。ですから、ご安心ください。このバッジを取得するのに、プログラミングスキルは必要ありません。
Lightning Web コンポーネントを使用してカスタム Lightning コンポーネントを作成できます。「Lightning Web コンポーネントの基本」モジュールを参照してください。
Lightning アプリケーションビルダーで使用するために設定された組織のカスタムコンポーネントは、Lightning コンポーネントペインに表示されます。
カスタム Lightning コンポーネントは、Lightning ページまたは Lightning アプリケーションビルダーで自動的に機能するわけではありません。カスタムコンポーネントを双方で使用できるようにするには、コンポーネントとコンポーネントバンドルを、Lightning アプリケーションビルダーおよび Lightning ページと互換性があるように設定します。詳細は、『Lightning Web Components Developer Guide』(Lightning Web コンポーネント開発者ガイド) を参照してください。
このモジュールで使用しているカスタムコンポーネントには、すでに Lightning アプリケーションビルダーが設定されています。
Lightning カスタムコンポーネントをインストールする
Lightning ページに追加できる商談アラートの Lightning カスタムコンポーネントが用意されています。では、これを組織にインストールしましょう。
ハンズオン Challenge がある任意の単元に移動し、ページの一番下までスクロールして [Launch (起動)] をクリックして、Trailhead Playground を起動します。組織に [Install a Package (パッケージのインストール)] というタブが表示されている場合は、このステップをスキップします。以下の手順に従います。
表示されていない場合は、アプリケーションランチャーアイコンをクリックしてアプリケーションランチャーを起動してから、[Playground Starter] をクリックして手順に従います。Playground Starter アプリケーションが表示されない場合は、こちらのパッケージのインストールリンクをクリックして、Salesforce ヘルプの「Trailhead の Challenge を完了するためのパッケージやアプリケーションのインストール」を参照してください。
-
[Install a Package (パッケージのインストール)] タブをクリックします。
- 項目に
04t2E00000161fSQAQを貼り付けます。
-
[Install (インストール)] をクリックします。
-
[Install for Admins Only (管理者のみのインストール)] を選択し、[Install (インストール)] をクリックします。
インストールが完了したら、次はページにコンポーネントを追加します。
アプリケーションページにカスタム Lightning コンポーネントを追加する
- [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに
App Builder(アプリケーションビルダー) と入力し、[Lightning App Builder (Lightning アプリケーションビルダー)] をクリックします。
- 前の単元で作成した [Top Accounts and Opportunities (重要な取引先と商談)] ページの横にある [Edit (編集)] をクリックします。
- 商談アラートコンポーネントをリストビューコンポーネントの上に追加します。
- プロパティペインで、[Days Since Last Modified (最終更新からの日数)] を
6に変更します。
コンポーネント内のテキストが新しい項目値に合わせて変更されたことに気づきましたか?
-
[進行中の ToDo あり] をオフにして、[Save (保存)] をクリックします。
ページは以前に有効化したため、もう一度有効化する必要はありません。
それでは、変更は、すぐに Lightning Experience およびモバイルアプリケーションに反映されます。次は、ページがどのように表示されるか見てみましょう。
カスタムコンポーネントをテストする
最初に、Salesforce モバイルアプリケーションで見てみましょう。
- モバイルデバイスでアプリケーションを開きます。
- 必要に応じて、Trailhead Playground のログイン情報を使用してログインします。
- セールスアプリケーションの [Top Accounts and Opportunities (重要な取引先と商談)] ページに移動し、新しいコンポーネントが表示されるまでスクロールダウンします。画面を更新しないと変更が表示されないことがあります。
組織に戻り、Lightning Experience で [Top Accounts and Opportunities (重要な取引先と商談)] ページを表示します。2 列テンプレートを使用してページを作成したため、デスクトップまたはタブレットでの表示には 2 列形式が使用されます。
お疲れさまでした。Lightning アプリケーションビルダーを使用してアプリケーションページを作成し、Lightning Experience のホームページや Lightning Experience のレコードページをカスタマイズしました。
これでみなさんは、Salesforce モバイルアプリケーションと Lightning Experience の利便性と機能を向上させるためのスキルを習得したことになります。ぜひカスタマイズしてみてください。
リソース
- Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド)
- Lightning Web Components 開発者ガイド: Lightning アプリケーションビルダーのコンポーネントの設定
- Salesforce ヘルプ: Lightning ページのカスタムコンポーネント