進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

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

学習の目的

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

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

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

重要

重要

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

カスタム Lightning コンポーネントを作成するには、Lightning Web コンポーネントと Aura コンポーネント の 2 つのプログラミングモデルを使用できます。詳細は、「Aura コンポーネントの基本」モジュールと「Lightning Web Components Basics (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 でも [私のドメイン] はデフォルトですでに有効です。

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

本番組織では、[私のドメイン] で組織に固有のサブドメインを作成できます。[私のドメイン] で、Salesforce から割り当てられたインスタンス URL (https://na17.lightning.force.com など) を、各自が選択したサブドメイン (https://mydomainname.lightning.force.com など) に置換します。

組織でカスタム Lightning コンポーネントを作成する場合やシングルサインオン (SSO) を設定する場合は、[私のドメイン] が必要です。[私のドメイン] についての詳細は、こちらのナレッジ記事を参照してください。本番組織で有効にする方法については、「ユーザ認証」モジュールを参照してください。

Lightning カスタムコンポーネントのインストール

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

  1. https://login.salesforce.com/packaging/installPackage.apexp?p0=04t2E00000161fSQAQ をコピーし、ブラウザのナビゲーションバーに貼り付けて、Enter キーを押します。
  2. [インストール] をクリックします。
    しばらくするとインストールが完了します。
  3. [完了] をクリックします。

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

アプリケーションページへのカスタム Lightning コンポーネントの追加

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

    ヒント

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

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

カスタムコンポーネントのテスト

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

Salesforce モバイルアプリケーションおよび Lightning Experience がユーザにとってより便利で効果的なものにするためのスキルを習得しました。ぜひカスタマイズしてみてください。