Lightning カスタムコンポーネントの使用

学習の目的

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

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

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

メモ

メモ

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

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

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

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

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

Trailhead Playground で [私のドメイン] はすでにオン

どの Trailhead Playground でも [私のドメイン] はデフォルトですでに有効です。Trailhead Playground で [私のドメイン] をオンにしたり、設定を変更しようとしないでください。[私のドメイン] の設定を変更すると、Playground 組織がロックされることがあります。

Trailhead Playground URL で強調表示された [私のドメイン] の名前

組織のログイン URL に Salesforce インスタンス (https://na17.salesforce.com など) が含まれている場合に、[私のドメイン] をリリースすると、会社固有のログイン URL (https://mydomainname.my.salesforce.com) に置き換えられます。


組織でカスタム Lightning コンポーネントを作成する場合やシングルサインオン (SSO) を設定する場合は、[私のドメイン] が必要です。Winter ’21 以降に作成されたすべての本番組織、Developer Edition 組織、トライアル組織には、デフォルトで [私のドメイン] が用意されています。[私のドメイン] を本番組織で有効にする方法については、「ユーザ認証」モジュールを参照してください。[私のドメイン] と Trailhead Playground についての詳細は、こちらのナレッジ記事を参照してください。

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 がユーザにとってより便利で効果的なものにするためのスキルを習得しました。ぜひカスタマイズしてみてください。