Lightning Web Componentsでダイアログを表示する

Salesforceでオリジナルアプリを作る開発環境がすごく良くなっています。

Visualforce PageからLightning Aura Componentsへ、そしてLightning Web Componentsへと。正直、Lightning Aura Componentsになったときは、制約の多さにびっくりして諦めました。それがLightning Web Componentsになったら、しっかり世界標準に合わせてきて安心しました。

さて、そんなLighting Web Componentsでダイアログを表示する方法を紹介します。

ダイアログを表示するかどうかのフラグを設定する

Javascriptのクラスの中にダイアログを表示するのかどうかのフラグを追加します。

下記サンプルでは、modeがその役割を担っています。@trackを付けていますので、この変数の値が変わるとLightning Web Compomentsが再描画されます。

    /**
    * モード
    * 0: 表示
    * 1: 編集
    */
   @track mode = 0;

   /**
    * 編集モードかどうかを返す
    */
   get isEdit() {
       return (this.mode === 1);
   }

HTMLにダイアログが表示されるように記述する

htmlにダイアログを表示するように記述していきます。ここでは、ダイアログ上にテーブルを作成して、リストを一覧表示するようにしています。

<!-- Edit Modal Dialog -->
<template if:true={isEdit} >
   <div style="height: 640px;">
       <section role="daialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
           <div class="slds-modal__container">
               <header class="slds-modal__header">
                   <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleEditClick}>
                       <lightning-icon icon-name="utility:close" size="medium">
                       </lightning-icon>
                       <span class="slds-assistive-text">閉じる</span>
                   </button>
                   <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">マイ銘柄リスト編集</h2>
               </header>
               <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                   <div class="slds-m-around_medium">
                       <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                           <thead>
                               <tr class="slds-line-height_reset">
                                   <th class="slds-text-title_caps" scope="col">
                                       <div class="slds-truncate" title="選択">選択</div>
                                   </th>
                                   <th class="slds-text-title_caps" scope="col">
                                       <div class="slds-truncate" title="銘柄">銘柄</div>
                                   </th>
                                   <th class="slds-text-title_caps" scope="col">
                                       <div class="slds-truncate" title="単価">単価</div>
                                   </th>
                               </tr>
                           </thead>
                           <tbody>
                               <template for:each={allList} for:item="item">
                                   <tr key={item.Id} class="slds-hint-parent">
                                       <td data-label="選択">
                                           <div class="slds-truncate">
                                               <lightning-input type="checkbox" checked={item.isSelected__c}></lightning-input>
                                           </div>
                                       </td>
                                       <td data-label="銘柄">
                                           <div class="slds-truncate">{item.Name}</div>
                                       </td>
                                       <td data-label="単価">
                                           <div class="slds-truncate">{item.UnitPrice__c}</div>
                                       </td>
                                   </tr>
                               </template>
                           </tbody>
                       </table>
                   </div>
               </div>
               <footer class="slds-modal__footer">
                   <lightning-button label="Cancel" variant="neutral" onclick={handleEditClick}></lightning-button>    
                   <lightning-button label="Save" variant="brand" onclick={handleEditClick}></lightning-button>
               </footer>
           </div>
       </section>
       <div class="slds-backdrop slds-backdrop_open"></div>
   </div>
</template>

ポイントは、<template if:true={isEdit} > です。Angularをやっている人だと、*ngIfです。Vue.jsだとv-ifです。isEditがtrueだったらtemplate内のhtmlを表示します。template内にダイアログの内容を記述すればOKです。

保存されたとき、閉じる時には、mode変数を切り替えるようにしておけば、上記template内のhtmlの表示が切り替わります。

/**
* 編集ボタン押下時の処理
*/
handleEditClick(event) {
   // モードを変更する
   this.mode = (this.mode === 0) ? 1 : 0;
}

Lightning Web Componentsは、SalesforceのLightning環境での開発の敷居をグンと下げてくれます。