ケースコメントを表示して送信する

学習の目的

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

• Flexcard に Datatable 要素を構成する。
  
• Flexcard からのコールバックロジックを元の Omniscript にリンクする。
  

ケースコメントの開始

Vijay はついに、ユーザーがケースコメントを表示したり、作成したりする Case Management (ケース管理) Omniscript の 2 ページ目に取り組む準備が整いました。Vijay はまず、このステップの要件を確認します。

カスタマーサービス担当者として、ケースを選択したら、2 ページ目に移動し、次の操作を実行できるようにしたいと考えています。

• 既存のケースコメントを表形式で表示する。
  
• 新規コメントを送信すると、ただちに既存のコメントのテーブルに表示される。
  

Vijay はすでに、Case Management (ケース管理) Omniscript に 2 番目の Manage Case Comments (ケースコメントを管理) ステップを追加しています。このステップでは、次のタスクを完了する必要があります。

1. Omniscript デザイナーを使用して次の操作を行います。
   

1. ケースコメント用の Text Area コンポーネントを追加します。
   
2. Data Mapper Post Action を追加して、ボタンとして表示します。
   
3. ケースコメントを保存する Data Mapper Load に Post Action をリンクします。
   

2. Flexcard デザイナーを使用して、Datatable 要素を設定した Flexcard を作成します。
   
3. Datatable Flexcard を含むカスタム Lightning Web コンポーネントを作成します。
   
4. このカスタム Lightning Web コンポーネントを Case Management (ケース管理) Omniscript にリンクします。
   

彼と一緒にプロジェクトを実行しましょう。

Manage Case Comments (ケースコメントを管理) ステップの構成

Manage Case Comments (ケースコメントを管理) ステップの構造を確認しましょう。

Manage Case Comments (ケースコメントを管理) ステップは、次のコンポーネントで構成されます。

• ケースコメントを入力する Text Area 入力要素 (1)
  
• コメントを送信して保存する Data Mapper Post Action (2)
  
• カスタム Lightning Web コンポーネントを Omniscript にリンクする Custom LWC (3) 要素
  

まず、テキストエリアのプロパティを構成します。

1. [Name (名前)] 項目 (1) に CaseComments と入力します。
   
2. [Field Label (項目表示ラベル)] (2) に Enter Case Comment (ケースコメントを入力) と指定します。
   
3. [Placeholder (プレースホルダー)] (3) に Enter Case Comment… (ケースコメントを入力…) と入力します。このテキストはユーザーにコメントの入力を促すメッセージで、デフォルトでユーザーに表示されます。
   

次に、Data Mapper Post Action のプロパティを構成します。 

1. [Name (名前)] に CreateCaseComment と入力します。
   
2. [Field Label (項目表示ラベル)] に Submit (送信) と入力します。
   
3. [Data Mapper Interface (Data Mapper インターフェース)] 項目 (3) で [sampleCreateComment] を選択します。この Data Mapper Load はケースコメントデータを保存します。
   

[Data Mapper Post Action Properties (Data Mapper Post Action のプロパティ)] の [Messaging Framework (メッセージングフレームワーク)] セクションを拡張します。 

1. [Pub/Sub] (1) をオンにして、Omniscript とカスタム Lightning Web コンポーネントが通信できるようにします。
   
2. メッセージのキー/値ペアを次のとおり設定します。[Key (キー)] (2) に caseCommentCreated、[Value (値)] (3) に %DRId_CaseComment% と入力します。
   

Vijay は Flexcard デザイナーを開いて Datatable Flexcard を作成します。

ケースコメント用の Datatable Flexcard

Case Comment Datatable Flexcard には Flexcard の標準の Datatable 要素があり、3 つの列が設定されています。

データソースを構成する

Vijay は Flexcard の作成時、データソース種別に Data Mapper を選択し、ケースコメントデータを取得する Data Mapper Turbo Extract を選択します。 

1. [Data Source Type (データソース種別)] (1) に [Data Mapper] を選択し、ケースコメントデータを取得する [sampleGetCaseComments] Data Mapper (2) を選択します。このデータにはコメント、作成日、公開/非公開が含まれます。
   
2. キー/値ペアの [Key (キー)] (3) に CaseId、[Value (値)] (4) に {RecordId} と入力します。
   

Datatable 列のプロパティを構成する

Datatable 要素をキャンバスに追加したら、列のプロパティを構成します。 

次の表で、列のプロパティについて説明します。

続けて、Datatable のプロパティをさらにいくつか構成します。

1. [Records (レコード)] 項目 (1) に {records} と入力します。
   
2. [Attributes (属性)] セクション (2) で [Is Sortable (並び替え可能)] を選択します。
   

イベントリスナーを構成する

この pubsub イベントリスナーは、ユーザーが新規ケースコメントを追加したときに、Flexcard がデータをテーブルに再読み込みして更新するようにします。

1. [Event Type (イベント種別)] (1) で [Pubsub] を選択します。
   
2. [Channel Name (チャネル名)] (2) に omniscript_action と入力します。これは標準装備されているデフォルトの Omniscript pubsub イベントで、Omniscript アクションが実行されるたびにトリガーされます。
   
3. [Event Name (イベント名)] (3) に data と入力します。チャネル名に omniscript_action、イベント名に data を使用すると、Flexcard がこのイベントを受信したときに Omniscript の任意のアクションをキャッチし、追加のアクションをトリガーできるようになります。
   
4. [Action Type (アクション種別)] (4) で [Card] を選択します。
   
5. [Type (種別)] (5) で [Reload] を選択します。
   

Flexcard が Omniscript と対話できるようにする

この Flexcard は Case Management (ケース管理) Omniscript の一部であるカスタム Lightning Web コンポーネントに組み込むため、[Omniscript Support (Omniscript サポート)] をオンにします。

Flexcard を有効にする

Flexcard を有効にしてコンパイルし、スタンドアロン Lightning Web コンポーネントとしてデプロイします。 

Vijay はコンポーネント名をメモして、この後で構築するカスタム Lightning Web コンポーネントに有効な Flexcard を組み込めるようにします。

ケースコメント用のカスタム Lightning Web コンポーネント

Vijay は CommentDataTableLWC カスタム Lightning Web コンポーネントを作成して、Case Comment Datatable Flexcard を HTML に組み込みます。この HTML ファイルには、組み込まれた Datatable Flexcard のみが存在します。  サンプルコードを次に示します。

<template>
<c-cf-sample-case-comment-data-table lwc:if={caseId} record-id={caseId}></c-cf-sample-case-comment-data-table>
</template>

有効な Flexcard の Lightning Web コンポーネント名を使用して、Flexcard を別のカスタム Lightning Web コンポーネント内に組み込みます。有効な Flexcard には cf というプレフィックスが表示されます。 

JavaScript で、Vijay は Flexcard に、ユーザーが新規ケースコメントを送信するたびに更新されるデータテーブルを設定する必要があります。

このデータソースを Flexcard に配置するために、Omniscript の変数を 2 つの Flexcard にリンクしてから、Flexcard からのコールバックロジックを元の Omniscript にリンクします。この処理により、Flexcard から Omniscript と Omniscript から元の Flexcard への双方向リンクが完備されます。 

Vijay の Case Comment Datatable JavaScript ファイルには、次のものが含まれます。

• 共通アクションユーティリティ: Omniscript へのリモートコールに使用する
  
• caseId 変数: Omniscript で渡すことができる
  
• pubsub import ステートメント: pubsub リスナーとアクションイベントを機能させる
  

JavaScript ファイルのサンプルを次に示します。

import { LightningElement, api } from 'lwc';
import { OmniscriptBaseMixin } from 'Omnistudio/omniscriptBaseMixin';
import { OmniscriptActionCommonUtil } from 'Omnistudio/omniscriptActionUtils';
import pubsub from 'Omnistudio/pubsub';
export default class CaseCommentDataTableLWC extends OmniscriptBaseMixin(LightningElement) {
caseId;
connectedCallback() {
this.caseId = this.omniJsonData.SelectedCaseId;
}
}

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

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

Omniscript デザイナーで、Vijay の caseCommentDataTableLWC を保持する Custom Lightning Web Component 要素のプロパティを構成します。

1. [Name (名前)] (1) と [Field Label (項目表示ラベル)] (2) に、Custom LWC 要素の名前と表示名を入力します。
   
2. [Lightning Web Component Name (Lightning Web コンポーネント名)] (3) 項目に、カスタム Lightning Web コンポーネントの名前を入力します。この例の名前は caseCommentDataTableLWC です。
   
3. [Property Name (プロパティ名)] (4) に column、[Property Source (プロパティソース)] (5) に %columns% と入力します。
   

まとめ

これで完了です。Vijay は新しい Omnistudio プロジェクトの要件を満たすことができました。

Vijay がカスタム Lightning Web コンポーネントを使用して Omnistudio 内に 2 ページのケース管理ワークフローを設計して構築するところを見てきました。また、Omnistudio 管理パッケージのベストプラクティス、コンポーネントオーバーライドとコンポーネント間通信のための pub/sub メッセージングの使用、データの取得と保存のための Data Mapper、標準コンポーネントを拡張するためのスロットの活用について学習しました。

今度は、これらの手法を独自の管理パッケージ用 Omnistudio プロジェクトに適用して、ワークフローを強化し、そのメンテナンス性を向上させてください。

リソース

• Salesforce ヘルプ: Display Flexcard Data in a Tabular Structure (表形式構造での Flexcard データの表示) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Enable Omniscript Support on a Flexcard (Flexcard での Omniscript サポートの有効化) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Custom Lightning Web Component Properties (カスタム Lightning Web コンポーネントのプロパティ) (管理パッケージ用 Omnistudio)