標準 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. [Save (保存)] をクリックします。[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 コンポーネントではこの種の通知を容易に設定することができません。ルックアップが完了した時点を判断することが難しいためです。 

そこで 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 ファイルの一例です。 

accountLookupLWC.js

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 コンポーネントのメタデータ値を定義します。

AccountLookup.js-meta.xml

<?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 セキュリティが有効になっている場合は、runtimeNamespace を使用しないでください。

• LWS が有効になっている場合、コンポーネントに runtimeNamespace を設定すると、"Cannot use runtime namespace 'somename' in module c-someComponentName" (c-someComponentName モジュールでランタイム名前空間 'somename' は使用できません) のようなエラーが表示されます。組織で LWS が有効かどうかを確認するには、「組織での Lightning Web セキュリティの有効化」を参照してください。
  
• LWS では cross-namespace usage/imports がサポートされていますが、LWC で runtimeNamespace が指定されると破損します。cross-namespace コンポーネントを正常に使用するには、a) runtimeNamespace を使用せず、かつ b) LWS をオンにする必要があります。
  

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

Case Management (ケース管理) OmniScript 用に作成したカスタム Lightning Web コンポーネントの XML ファイルを再利用します。

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

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

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

• Salesforce DX
  
• IDX Workbench
  

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

Account Lookup (取引先ルックアップ) コンポーネントが完成しました。Vijay は続いて取引先に関連するケースの作業に取りかかります。 

リソース

• Trailhead: OmniStudio Developer Tools (OmniStudio 開発者ツール)