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

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

• 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. DataRaptor Post Action を追加して、ボタンとして表示します。
   
3. 新規ケースコメントを保存する DataRaptor 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)
  
• コメントを送信して保存する DataRaptor 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… (ケースコメントを入力…) と入力します。このテキストはユーザーにコメントの入力を促すメッセージで、デフォルトでユーザーに表示されます。
   

DataRaptor Post Action のプロパティを構成します。 

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

[DataRaptor Post Action Properties (DataRaptor 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 の作成時、データソース種別に DataRaptor を選択し、ケースコメントデータを取得する DataRaptor Turbo Extract を選択します。 

1. [Data Source Type (データソース種別)] (1) に [DataRaptor] を選択し、ケースコメントデータを取得する [sampleGetCaseComments] DataRaptor (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 のみが存在します。 

caseCommentDataTableLWC.html

<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 への双方向リンクが完備されます。 

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

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

caseCommentDataTableLWC.js

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 デザイナーで、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% と入力します。