Lightning カスタムコンポーネントを使用する

学習の目的

この単元を完了すると、次のことができるようになります。
  • Lightning カスタムコンポーネントをインストールする
  • モバイルデバイスを使用して、Salesforce モバイルでアプリケーションをプレビューする

Lightning アプリケーションビルダーの Lightning カスタムコンポーネント

Lightning カスタムコンポーネントを作成するには、プログラミングのスキルが必要です。あるいは、AppExchange から既存の Lightning コンポーネントをインストールすることもできます。

メモ

この単元は、ポイント & クリック操作のみでシステムを組むシステム管理者でも学習できます。すでに設定済みのカスタムコンポーネントを用意しています。ですから、ご安心ください。このバッジを取得するのに、プログラミングスキルは必要ありません。

カスタム Lightning コンポーネントを作成するには、Lightning Web コンポーネントと Aura コンポーネントの 2 つのプログラミングモデルを使用できます。詳細は、「Aura コンポーネントの基本」モジュールと「Lightning Web コンポーネントの基本」モジュールを参照してください。

Lightning アプリケーションビルダーで使用するために設定された組織のカスタムコンポーネントは、Lightning コンポーネントペインに表示されます。

Lightning アプリケーションビルダーのコンポーネントペイン
カスタム Lightning コンポーネントは、Lightning ページまたは Lightning アプリケーションビルダーで自動的に機能するわけではありません。カスタムコンポーネントを双方で使用できるようにするには、コンポーネントとコンポーネントバンドルを、Lightning アプリケーションビルダーおよび Lightning ページと互換性があるように設定します。詳細は、使用している Lightning コンポーネントプログラミングモデルに応じて、『Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)』または『Lightning Web Components Developer Guide (Lightning Web コンポーネント開発者ガイド)』を参照してください。

このモジュールで使用しているカスタムコンポーネントには、すでに Lightning アプリケーションビルダーが設定されています。

Lightning カスタムコンポーネントをインストールする

Lightning ページに追加できる商談アラートの Lightning カスタムコンポーネントが用意されています。これを組織にインストールしましょう。

ハンズオン Challenge がある任意の単元に移動し、ページの一番下までスクロールして [起動] をクリックして、Trailhead Playground を起動します。組織に [パッケージのインストール] というタブが表示されている場合は、以下の手順に従います。

表示されていない場合は、アプリケーションランチャーアイコンをクリックしてアプリケーションランチャーを起動してから、[Playground Starter] をクリックして手順に従います。Playground Starter アプリケーションが表示されない場合は、こちらのパッケージのインストールリンクをクリックして、Trailhead ヘルプの「Trailhead の Challenge を完了するためのパッケージやアプリケーションのインストール」を参照してください。

  1. [パッケージのインストール] タブをクリックします。
  2. 項目に 04t2E00000161fSQAQ を貼り付けます。
  3. [インストール] をクリックします。
  4. [管理者のみのインストール] を選択し、[インストール] をクリックします。

インストールが完了したら、次はページにコンポーネントを追加します。

アプリケーションページにカスタム Lightning コンポーネントを追加する

  1. [設定] から、[クイック検索] ボックスにアプリケーションビルダーと入力し、[Lightning アプリケーションビルダー] をクリックします。
  2. 前の単元で作成した [Top Accounts and Opportunities (重要な取引先と商談)] ページの横にある [編集] をクリックします。
  3. 商談アラートコンポーネントをリストビューコンポーネントの上に追加します。
  4. [プロパティ] ペインで、[最終更新からの日数] を 6 に変更します。
    コンポーネント内のテキストが新しい項目値に合わせて変更されたことに気づきましたか?
  5. [進行中の ToDo あり] をオフにして、[保存] をクリックします。
メモ

ページは以前に有効化したため、もう一度有効化する必要はありません。

それでは、変更は、すぐに Lightning Experience およびモバイルアプリケーションに反映されます。ページがどのように表示されるか見てみましょう。

カスタムコンポーネントをテストする

まず、Salesforce モバイルアプリケーションで見てみましょう。
  1. モバイルデバイスでアプリケーションを開きます。
  2. 必要に応じて、Trailhead Playground のログイン情報を使用してログインします。
  3. セールスアプリケーションの [Top Accounts and Opportunities (重要な取引先と商談)] ページに移動し、新しいコンポーネントが表示されるまでスクロールダウンします。画面を更新しないと変更が表示されないことがあります。Salesforce1 でカスタムコンポーネントをテストする
  4. 組織に戻り、Lightning Experience で [Top Accounts and Opportunities (重要な取引先と商談)] ページを表示します。
    2 列テンプレートを使用してページを作成したため、デスクトップまたはタブレットでの表示には 2 列形式が使用されます。Lightning Experience でカスタムコンポーネントをテストする
お疲れさまでした。Lightning アプリケーションビルダーを使用してアプリケーションページを作成し、Lightning Experience のホームページや Lightning Experience のレコードページをカスタマイズしました。

これでみなさんは、Salesforce モバイルアプリケーションと Lightning Experience の利便性と機能を向上させるためのスキルを習得したことになります。ぜひカスタマイズしてみてください。

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