Lightning コンソールアプリケーションを作成する

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

次は、インスタント通知アプリケーションの最初の静的バージョンを定義し、それを Lightning コンソールアプリケーションとしてリリースします。

Lightning Web コンポーネントを作成する

1. notificationConsole と言う名前で Lightning Web コンポーネントを作成します。
   1. Visual Studio Code で、force-app/main/default の下にある lwc フォルダーを右クリックし、[SFDX: Create Lightning Web Component (SFDX: Lightning Web コンポーネントを作成)] を選択します。
   2. 新しいコンポーネントの名前として notificationConsole と入力します。
   3. Enter キーを押してからもう一度 Enter キーを押して、デフォルトの force-app/main/default/lwc を受け入れます。
      
      
2. notificationConsole.js の内容を次のコードで置き換えます。

   import { LightningElement, track } from "lwc";
   import { ShowToastEvent } from "lightning/platformShowToastEvent";
   export default class NotificationConsole extends LightningElement {
     @track
     notifications = [];
     async connectedCallback() {
       this.dispatchEvent(
         new ShowToastEvent({
           variant: "success",
           title: "Ready to receive notifications"
         })
       );
       this.notifications = [
         { id: "id1", time: "00:01", message: "Greetings Trailblazer!" },
         { id: "id2", time: "00:02", message: "Congratulations on building this first version of the app." },
         { id: "id3", time: "00:03", message: "Beware of the bears." }
       ];
     }
     handleClearClick() {
       this.notifications = [];
     }
     get notificationCount() {
       return this.notifications.length;
     }
   }

   コードのポイント:
   • notifications には、受信した通知が格納されます。現時点ではハードコーディングされたサンプル値で初期化されます。
   • connectedCallback は、アプリケーションが初期化されたことを示すトーストを表示します。
3. ファイルを保存します。
4. notificationConsole.html を開いて、template タグの間に次のコードを追加します。

   <div class="container">
     <!-- Header -->
     <div class="slds-p-around_x-small slds-border_bottom slds-theme_shade">
       <div class="slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
         <span class="slds-badge slds-badge_inverse">{notificationCount}</span>
         <lightning-button-icon
           onclick={handleClearClick}
           icon-name="utility:delete"
           title="Clear notifications"
           alternative-text="Clear notifications"
           variant="border-filled"
         ></lightning-button-icon>
       </div>
     </div>
     <!-- Notification list -->
     <div class="slds-container_fluid slds-scrollable_y content">
       <template for:each={notifications} for:item="notification">
         <div key={notification.id} class="slds-p-around_small slds-border_top">
           <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
             <p>{notification.message}</p>
             <p class="slds-text-color_weak slds-p-left_x-small">{notification.time}</p>
           </div>
         </div>
       </template>
     </div>
   </div>

   コードのポイント:
   コンポーネントには 2 つの部分が含まれています (これらはサブコンポーネントにすることができます)。
   • 通知カウンターと通知をクリアするためのボタンが含まれるヘッダー。
   • メッセージとメッセージの受信時刻が含まれる通知リスト。
5. ファイルを保存します。
6. コンポーネントを Lightning ユーティリティ項目として使用できるようにするには、notificationConsole.js-meta.xml を開いて isExposed タグを次の行に置き換えます。

   <isExposed>true</isExposed>
   <targets>
     <target>lightning__UtilityBar</target>
   </targets>

   コードのポイント:
   • isExposed を true に設定すると、コンポーネントが Lightning アプリケーションビルダーに公開されます。
   • また、lightning__UtilityBar ターゲットにより、コンポーネントが Lightning ユーティリティ項目として追加されます。
7. ファイルを保存します。
8. 次のコードを使用して、notificationConsole フォルダーに notificationConsole.css ファイルを作成します。

   .container {
     height:100%;
   }
   .content {
     height:calc(100% - 49px);
   }

   コードのポイント:
   • 複数の通知がある場合に垂直スクロールバーでリストを展開してもヘッダーの位置が変わらないように、特別なスタイルルールを設定します。
9. ファイルを保存します。
10. lwc フォルダーを右クリックし、[SFDX: Deploy Source to Org (SFDX: 組織にソースをリリース)] を選択して、コンポーネントを組織にリリースします。

Lightning コンソールアプリケーションのリリース

1. [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに App Manager (アプリケーションマネージャー) と入力し、[App Manager (アプリケーションマネージャー)] を選択します。
2. Lightning 対応のセールスアプリケーションを見つけます。([App Type (アプリケーション種別)] 列が [Lightning] で、その横の [Visible in Lightning (Lightning で参照可能)] にチェックマークがあるものを探します。)右側の下矢印をクリックし、[Edit (編集)] を選択します。
3. [Utility Items (Desktop Only) (ユーティリティ項目 (デスクトップのみ))] に移動します。
4. [Utility Items (ユーティリティ項目)] の横にある [Add Utility Item (ユーティリティ項目を追加)] をクリックします。
5. コンポーネントのリストをスクロールダウンし、[Custom (カスタム)] の下にある [notificationConsole] を選択します。
6. コンポーネントのプロパティを次のように設定します。
   • Label (表示ラベル): Notifications (通知)
   • Icon (アイコン): announcement
   • Panel Width (パネルの幅): 340 (デフォルト値)
   • Panel Height (パネルの高さ): 300
   • [Start automatically (自動的に開始)] の隣にあるチェックボックスをオンにします。

1. [Save (保存)] をクリックして、[Back (戻る)] をクリックします。

アプリケーションランチャー () で、[Sales (セールス)] を見つけて選択します。[Ready to receive notifications (通知を受信する準備ができました)] というトーストが表示され、画面下部には [Notifications (通知)] Lightning コンソールアプリケーションが表示されます。[Notifications (通知)] アプリケーションをクリックすると、下に示すように、ハードコードされた 3 つの通知が展開されます。