ケース用の カスタム Lightning Web コンポーネントを作成する

学習の目的

この単元を完了すると、次のことができるようになります。

• 事前入力を使用して、親 Omniscript から子 Omniscript に情報を渡す。
  
• HTML のスロットを使用して、標準コンポーネントの機能を拡張する方法を説明する。
  
• Flexcard と Omniscript をカスタム Lightning Web コンポーネントに組み込む。
  
• 共通アクションユーティリティとコールバック関数の目的を説明する。
  
• pubsub に登録/登録解除する方法を説明する。
  

ケースの作成と表示

Vijay は続いて、新しいカスタム Lightning Web コンポーネントを作成し、Create Case (ケース作成) Omniscript と Selectable Item (選択可能アイテム) Flexcard をこのコンポーネントに組み込みます。まず、HTML ファイルで作業します。その手順を見ていきましょう。

Selectable Item (選択可能アイテム) HTML

Selectable Item (選択可能アイテム) カスタム Lightning Web コンポーネントの HTML には、次のものが設定されています。

• Selectable Item (選択可能アイテム) Flexcard
  
• 取引先を選択したユーザーが新規ケースを作成するためのボタン
  
• 新規ケースを作成するためのモーダル
  
• Create Case (ケース作成) Omniscript を含むスロット
  

プレフィル

プレフィルは、親から子 Omniscript に渡す情報を指定するために使用するコンポーネントの属性です。

コンポーネントタグを使用して、子 Lightning Web コンポーネントを任意の親 Lightning Web コンポーネントに組み込みます。Omniscript と Flexcard を有効にし、組み込む Lightning Web コンポーネントのコンポーネントタグを収集したら、プレフィルを使用できるようになります。 

以下は、Selectable Item (選択可能アイテム) HTML ファイルです。下表にコードの主要な部分に関する簡単な説明が示されています。 

<template>
<!-- Button to create new case once account Id is selected -->
<div class="slds-m-top_large">
<Omnistudio-button
lwc:if={accountId}
variant="brand"
label="Create New Case"
onclick={openNewCaseModal}>
</Omnistudio-button>
</div>
<c-cf-sample-selectable-item lwc:if={accountId} record-id={accountId}></c-cf-sample-selectable-item>
<!-- Modal to create new case -->
<Omnistudio-modal lwc:if={prefill} title="Create New Case" size="large">
<div slot="content">
<c-sample-create-case-english lwc:if={showOS} layout="lightning" prefill={prefill}></c-sample-create-case-english>
</div>
</Omnistudio-modal>
</template>

この表に、コードの主要な部分の説明が示されています。

スロット 

スロットとは、標準 Lightning Web コンポーネントのマークアップを組み込んだり、拡張したりする目的で、独自のマークアップを入力するプレースホルダーです。スロットを使用すれば、コンポーネントを上書きしなくてもそのルックアンドフィールを強化することができます。 

スロットの呼び出しには 2 種類あり、そのいずれかを選択します。

• 名前なしスロットは、親コンポーネントの拡張マークアップを保持します。たとえば、OmniscriptStep を拡張してステップをオーバーライドして、<slot></slot> プレースホルダーを使用して子コンポーネントの要素を組み込みます。
  
• 名前付きスロットは、親コンポーネントの特定のセクション内にマークアップを追加します (例: <div slot=”header”>My Custom Header</div>)。

些細な変更であっても可能な限りスロットを使用してください。スロットによって、コンポーネントの構造や機能からカスタムコンテンツが隔離されます。このため、今後コンポーネントが変更されるときにコンテンツが保護され、メンテナンスが容易になります。さらに、HTML ファイルにスロットを追加するときは、JS ファイルの render 関数をオーバーライドして、HTML ファイルを参照します。参照が設定されていない場合はスロットが機能しません。 

共通アクションユーティリティ

Omniscript は、JavaScript クラスを使用して構築された Omniscript アクションフレームワークを使用してリモートコールを実行します。この機能を有効にするために、共通アクションユーティリティクラスを Lightning Web コンポーネントにインポートします。OmniscriptActionCommonUtil メソッドを使用して、サーバーへのリモートコールを実行します。 

最も一般的なアプローチは、リモートコールフローを開始する executeAction メソッドを使用することです。このメソッドを使用して、ユーザーが取引先を選択したときに関連するケースを取得します。OmniScriptActionCommonUtil JavaScript クラスのインスタンスを作成するには、this._actionUtilClass = new OmniscriptActionCommonUtil(); を使用します。JS コードベースでこの動作を確認できます。

Selectable Item (選択可能アイテム) JavaScript

Selectable Item (選択可能アイテム) カスタム Lightning Web コンポーネントの JavaScript の動作を理解するために、caseSelectableItemLWC コンポーネントのコードを 3 つに分割してみましょう。

最初の部分:

• OmniscriptBaseMixin をインポートして拡張する
  
• 共通アクションユーティリティクラスをインポートして、カスタム Lightning Web コンポーネントからリモートコールを実行する
  

2 番目の部分:

• Lookup コンポーネントからのイベントをリスンして、ユーザーが新しい取引先を選択したときにケースを取得する pubsub を登録する
  
• Flex Card コンポーネントからのイベントをリスンして、ケースを選択し、ユーザーが新規ケースを選択したときに次のステップにナビゲートする pubsub を登録する
  
• Create Case (ケース作成) Omniscript からのイベントをリスンして、モーダルを閉じ、ケースリストを更新する pubsub を登録する
  

3 番目の部分:

• Case Management (ケース管理) Omniscript のデータ JSON で AccountId をデフォルト値として使用する
  
• 新規ケースレコードを持つ取引先からケースを取得する
  
• 切断時に pubsub イベントへの登録を解除する
  

コードの最初の部分では、pubsub や OmniscriptBaseMixin など、コンポーネントが Omnistudio と連動するために必要なインポートを実行します。さらに、共通アクションユーティリティを実装します。

import { LightningElement, track } from 'lwc';
import pubsub from 'Omnistudio/pubsub';
import { OmniscriptBaseMixin } from 'Omnistudio/omniscriptBaseMixin';
import { OmniscriptActionCommonUtil } from 'Omnistudio/omniscriptActionUtils';
export default class CaseSelectableItemLWC extends OmniscriptBaseMixin(LightningElement) {
accountId;
caseList;
model;
omniJsonData;
showOS;
connectedCallback() {
// Create instance of OmniscriptActionCommonUtil utility class for use in this class
this._actionUtilClass = new OmniscriptActionCommonUtil();
}

この表に、コードの主要な部分の説明が示されています。

コードの 2 番目の部分には、特定のイベントをリスンする pubsub register ステートメントが含まれます。さらに、プレフィルを使用して AccountId を Create Case (ケース作成) Omniscript に渡します。 

connectedCallback() {
// Register pubsub to listen to event from lookup component to fetch cases when a new account is selected
this._fetchCasesFromAccount = {
data: this.fetchCasesFromAccount.bind(this)
};
pubsub.register("newAccountSelected", this._fetchCasesFromAccount);
// Register pubsub to listen to event from the Flexcard component to select a case and navigate to the next step when a new case is selected
this._selectCase = {
data: this.selectCase.bind(this)
};
pubsub.register("newCaseSelected", this._selectCase);
// Register pubsub to listen to event from create case child OS to close the modal and refresh case list
this._createCaseCallback = {
data: this.createCaseCallback.bind(this)
};
pubsub.register("omniscript_action", this._createCaseCallback);
}

この表に、コードの主要な部分の説明が示されています。

pubsub を設定する際のベストプラクティスは、ローカル変数インスタンスを確立して関数に設定し、リスンする pubsub イベントにバインドすることです。

コードの 3 番目の部分は、カスタム Lightning Web コンポーネントに次のとおり指示します。

• Case Management (ケース管理) Omniscript のデータ JSON で、AccountId を pubsub result のデフォルト値として使用します。
  
• 次のステップに自動的に進みます。
  
• ウィンドウを開きます/閉じます。
  
• 切断時に pubsub イベントへの登録を解除します。
  

サンプルコードを次に示します。

fetchCasesFromAccount(pubsubResult) {
// If pubsub result is not defined, default to the accountId in the data JSON
this.accountId = pubsubResult? pubsubResult.AccountId : this.omniJsonData["SelectAccountAndCase"]["SelectAccount"];
this.prefill = { "AccountId": this.accountId };
}
selectCase(evt) {
if (evt && evt.CaseId) {
this.omniApplyCallResp({"SelectedCaseId": evt.CaseId});
this.omniNextStep();
}
}
// Open Create Case Modal
openNewCaseModal() {
// this.prefill = { "AccountId": this.accountId };
this.showOS = true;
let modal = this.template.querySelector("Omnistudio-modal");
modal.openModal();
}
// Close Create Case Modal
closeNewCaseModal() {
let modal = this.template.querySelector("Omnistudio-modal");
modal.closeModal();
this.showOS = false;
}
createCaseCallback() {
// Fetch cases from account with the newly created case record
// Close Modal
this.closeNewCaseModal();
}
disconnectedCallback() {
// Unregister pubsub event on disconnect
pubsub.unregister("newAccountSelected", this._fetchCasesFromAccount);
pubsub.unregister("omniscript_action", this._createCaseCallback);
pubsub.unregister("newCaseSelected", this._createCaseCallback);
}
}

この表に、コードの主要な部分の説明が示されています。

カスタム Lightning Web コンポーネントのプロパティ

Omniscript デザイナーで、独自のカスタム Lightning Web コンポーネントを記述して Omniscript に組み込むときは、Custom Lightning Web Component 要素を使用します。この入力要素を設計ウィンドウにドラッグすると、プロパティを構成できます。

1. [Name (名前)] (1) と [Field Label (項目表示ラベル)] (2) に、Custom Lightning Web Component 要素の名前と表示名を入力します。
   
2. [Lightning Web Component Name (Lightning Web コンポーネント名)] (3) 項目に、カスタム Lightning Web コンポーネントの名前を入力します。この例では、名前は caseSelectableItemLWC です。
   
3. カスタムコンポーネントで OmniscriptBaseMixin を拡張しない場合のみ、[Standalone LWC (スタンドアロン LWC)] チェックボックス (4) をオンにします。スタンドアロンの Lightning Web コンポーネントは Omniscript とは独立して動作します。このモジュールの例は該当しないため、チェックボックスをオフのままにします。
   

Vijay は Case Management (ケース管理) Omniscript のステップ 1 の構成を完成させました。次は、ステップ 2 Manage Case Comments (ケースコメントを管理) に取り組みます。

リソース

• Salesforce ヘルプ: Common Action Utility for Remote Calls (リモートコールの共通アクションユーティリティ) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Pubsub Component (Pubsub コンポーネント) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Extend the OmniscriptBaseMixin Component (OmniscriptBaseMixin コンポーネントの拡張) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Custom Lightning Web Component Properties (カスタム Lightning Web コンポーネントのプロパティ) (管理パッケージ用 Omnistudio)