標準 Lookup コンポーネントを拡張して取引先とケースを表示する

学習の目的

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

• Omniscript 標準 Lookup コンポーネントを構成する。
  
• カスタム Lightning Web コンポーネントを使用して、標準 Omniscript コンポーネントの機能を拡張する。
  
• JS ファイルと XML ファイルのコードの目的について説明する。
  
• OmniscriptBaseMixin の用途を説明する。
  

取引先の選択について検討する

Case Management (ケース管理) Omniscript の構造を定義した Vijay は、続いてコンポーネントを 1 つずつ構成していきます。まずは、Omniscript ユーザーが取引先のリストから取引先を選択できるようにする標準 Lookup コンポーネントです。

ただし、選択できればそれで良いというわけではありません。

Vijay は、Omniscript ユーザーが取引先を選択したらすぐ、関連するケースが表示されるようにしたいと考えています。そんなことが可能なのでしょうか?

最初に Vijay が取引先を選択するための Lookup を構成する方法を確認し、続いてコンポーネントの動作を変更する方法を見ていきましょう。

Omniscript Lookup コンポーネントの基本的な構成

Omniscript Lookup はクエリを実行して、Lookup のプロパティで構成したパラメーターに基づいて Salesforce データを取得します。値/表示ラベルのペアで返されたレコードがドロップダウンリストに表示され、Omniscript ユーザーがそのリストから選択できます。

Lookup のプロパティを詳しく見ていきましょう。

まず、Lookup を構成します。 

1. [Name (名前)] (1) に SelectAccount、[Field Label (項目表示ラベル)] (2) に Select Account (取引先を選択) と入力します。
   
2. Salesforce オブジェクトからデータを取得するため、[Data Source Type (データソース種別)] (3) を [SObject] に設定します。
   

次に、ルックアップクエリを構成します。

1. [Lookup Order (ルックアップ順序)] (1) に 1 と入力して、複数のクエリがある場合の優先順位を設定します。
   
2. [Lookup Object (Lookup オブジェクト)] (2) で、クエリの対象となる SObject として [Account (取引先)] を選択します。
   
3. [Filter Operator (検索条件演算子)] (3) には、完全一致を返す [=] を選択します。
   
4. [Filter Value (検索条件値)] (4) に ‘Customer - Direct’ と入力し、この種別とマッチする取引先が返されるようにします。
   
5. [JSON Path (JSON パス)] (5) に Accounts と入力し、絞り込まれた値が返されるパスを設定します。
   
6. 作業を保存します。[Lookup Query Configuration (ルックアップクエリの構成)] ウィンドウが表示されます。
   

次に、Lookup コンポーネントのドロップダウンリストの表示ラベルを、クエリで返される JSON 値に設定します。ユーザーが表示ラベルを選択すると、Lookup の JSON ノードにその値が入力されます。

1. [Populate Lookup Element With Query Results (Lookup 要素にクエリ結果を入力)] セクションに進みます。
   
2. Lookup で値として使用する JSON パスに Accounts:Id を設定します (1)。
   
3. Lookup で表示ラベルとして使用する JSON パスに Accounts:Name を設定します (2)。
   

ケースを取得する Lookup コンポーネントの構成

Vijay は Omniscript でのここまでの作業をプレビューし、その出来に満足します。ドロップダウンリストに取引先が表示され、その 1 つを選択できることを確認します。次の作業は、選択した取引先のケースが表示されるようにすることです。 

Vijay は caseSelectableItemLWC というカスタム Lightning Web コンポーネントに、取引先のケースを取得するロジックがあることを知っています。けれども、ユーザーが取引先を選択した時点でこの Lightning Web コンポーネントに通知しなければなりません。標準 Omniscript コンポーネントではこの種の通知を容易に設定することができません。ルックアップが完了した時点を判断することが難しいためです。 

そこで Vijay は accountLookupLWC という Lightning Web コンポーネントを作成します。この目的は、ユーザーが取引先を選択した時点で、ケースを取得して表示するコンポーネントにそのことを知らせるメッセージを送信することです。 

Account Lookup 用のカスタム Lightning Web コンポーネント

Vijay は accountLookupLWC Lightning Web コンポーネントを作成する際、Lookup コンポーネントの機能を使用しますが、若干の変更を行います。Lookup コンポーネント全体を記述し直すわけではありません。1 つの関数を上書きするだけで、コードは端的でメンテナンスしやすい状態のまま維持されます。 

最初に、Omniscript Lookup コンポーネントをインポートし、export ステートメントで拡張してカスタムコンポーネントにします。これで、このコンポーネントに Omniscript Lookup のすべての機能が搭載されます。次に、selectOption メソッドを指定して、標準機能を若干変更します。この変更により、ユーザーが取引先を選択するたびに、selectOption イベントハンドラーがトリガーされます。このハンドラーは pubsub ステートメントを使用して、ユーザーが新しい取引先を選択したことを caseSelectableItemLWC に通知します。 

pubsub は、Flexcard から Omniscript に通信するデフォルトの手段です。pubsub は publish (公開) と subscribe (登録) を短縮したもので、Lightning Web コンポーネント間でメッセージを公開 (送信) する標準的な方法です。pubsub とイベントを使用して、ある Lightning Web コンポーネントから別の Lightning Web コンポーネントに通信します。 

機能に軽微な変更を加えるときは、インポートと拡張機能を使用できます。Lightning Web コンポーネントは一度に 1 つの要素しか拡張できませんが、アクションや pubsub などの要素を一度に多数インポートできます。

取引先ルックアップ JavaScript

以下は、標準の Lookup を変更する accountLookupLWC JavaScript ファイルの一例です。 

import { LightningElement } from 'lwc';
import pubsub from 'Omnistudio/pubsub';
import { OmniscriptBaseMixin } from 'Omnistudio/omniscriptBaseMixin';
import OmniscriptLookup from 'Omnistudio/omniscriptLookup';
export default class accountLookupLWC extends OmniscriptBaseMixin(OmniscriptLookup) {
selectOption(event) {
let attr = event.target.getAttribute('data-option-index');
const inputIndex = parseInt(attr, 10);
this.setSelected(inputIndex).then(()=> {
pubsub.fire("newAccountSelected", 'data', {"AccountId": this.lookupValue});
});
this.hideOptions();
}
}

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

では、OmniscriptBaseMixin をさらに詳しく見ていきましょう。

OmniscriptBaseMixin について学ぶ

Omniscript 内で使用するカスタム Lightning Web コンポーネントを構築するときに、OmniscriptBaseMixin をインポートして拡張します。これにより、コードベースが簡潔な状態に維持され、構築やメンテナンスの時間が節約されます。拡張された basemixin コンポーネントから関数をインポートすれば、新しいコードを記述する必要がありません。 

basemixin は、Lightning Web コンポーネントと Omniscript のやり取りを容易にする中間レイヤーと考えることができます。たとえば、JSON からデータを取り込む必要がある場合、OmniscriptBaseMixin は Omniscript のデータ JSON を更新して、パラメーターを渡す手段になります。バリデーション機能、ナビゲーション機能、「次へ」や「前へ」アクションなど、さまざまな機能を使用できます。 

取引先ルックアップ XML

以下は AccountLookup JS-meta.xml ファイルの一例で、その後にコードの要点を説明します。この構成ファイルは Lightning Web コンポーネントのメタデータ値を定義します。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>47.0</apiVersion>
<isExposed>true</isExposed>
<runtimeNamespace>Omnistudio</runtimeNamespace>
<targets>
<target>lightning__AppPage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
</LightningComponentBundle>

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

Lightning Web コンポーネントのデプロイ

カスタム Lightning Web コンポーネントを組織にデプロイしたら、Lookup のプロパティにある [LWC Component Override (LWC コンポーネントのオーバーライド)] 項目でそのコンポーネントを選択します。 

カスタムコンポーネントが組織の Omniscript に適切にデプロイされて表示されるよう設定するために、次のツールの使用を検討します。 

• Salesforce DX
  
• IDX Workbench
  

この両方のツールを使用して、ソースファイルと対象ファイルを比較することができます。IDX Workbench を Visual Studio Code と連携させれば、Omnistudio コンポーネントをある組織から別の組織に移行できます。

Account Lookup (取引先ルックアップ) コンポーネントが完成しました。Vijay は続いて取引先に関連するケースの作業に取りかかります。次の単元で、その手順を見ていきます。 

リソース

• Salesforce ヘルプ: Working with Lookup Query Configurations (ルックアップクエリの構成の操作) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Create a Custom Lightning Web Component for Omniscript (Omniscript のカスタム Lightning Web コンポーネントの作成) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Add Custom Lightning Web Components to an Omniscript (Omniscript へのカスタム Lightning Web コンポーネントの追加) (管理パッケージ用 Omnistudio)