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

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

• 事前入力を使用して、親 OmniScript から子 OmniScript に情報を渡す。
• HTML のスロットを使用して、標準コンポーネントの機能を拡張する方法を説明する。
• FlexCards と OmniScripts をカスタム 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 ファイルです。下表にコードの主要な部分に関する簡単な説明が示されています。 

caseSelectableItemLWC.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 ファイルを参照する必要があります。参照が設定されていない場合はスロットが機能しません。 

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

OmniScripts は、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 イベントへの登録を解除する

caseSelectableItemLWC.js

コードの最初の部分では、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 (ケースコメントを管理) に取り組みます。