ケース用の OmniStudio コンポーネントを構築する

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

• OmniScript でカスタム Lightning Web コンポーネントのプロパティを構成する。
  
• OmniScript のメッセージングフレームワークのプロパティを設定する。
  
• PubSub イベントアクションを FlexCard に追加する。
  
• FlexCard で PubSub イベントリスナーを作成する。
  

ケースを表示して作成する

Vijay はここで Case Management (ケース管理) OmniScript にケースを表示して新規作成する方法を検討します。このためには、次の作業を行う必要があります。

• ケースを作成するための OmniScript を新規作成する。
  
• ケースを表示する FlexCard を作成する。
  
• この 2 つのコンポーネントを新しいカスタム Lightning Web コンポーネントに組み込む。
  
• これらすべてのコンポーネントが相互に通信する方法を構成する。
  

この要件は Vijay にとって間違いなく最も複雑なものであるため、次の 2 つの単元で Vijay がどのように対処するのか、お好きな飲み物でも飲みながらゆっくり見ていきましょう。

新規にケースを作る OmniScript

Vijay は Create Case (ケース作成) という 2 つ目の OmniScript を作成します。Case Management (ケース管理) OmniScript ユーザーが [Create Case (ケースを作成)] ボタンをクリックすると、モーダルウィンドウに Create Case (ケースを作成) OmniScript が開きます。 

ステップに Field 要素とボタンを構成する

では、このワンステップの OmniScript を構成するコンポーネントを見ていきましょう。 

この OmniScript は次の要素で構成されます。

• ステップ内の [Case Subject (ケース件名)] (1) と [Case Details (ケースの詳細)] (2) の 2 つのテキスト入力
  
• ステップ内の [Create Case (ケースを作成)] ボタン (3)
  
• ステップ外の DataRaptor Post Action (4)。このアクションは DataRaptor Load を呼び出してケースを作成します。
  

[Step Properties (ステップのプロパティ)] に、[Button Properties (ボタンのプロパティ)] セクションがあります。

[Button Properties (ボタンのプロパティ)] で次のように設定します。

1. [Next Label (「次」ボタン表示ラベル)] プロパティ (1) に Create Case (ケースを作成) と入力します。
   
2. [Next Width (「次」ボタンの幅)] プロパティ (2) でボタン幅を [3] に設定します。
   

DataRaptor Post Action を構成する

[DataRaptor Post Action Properties (DataRaptor Post Action のプロパティ)] で、新規ケースのデータを保存する DataRaptor Load にリンクします。

[DataRaptor Post Action Properties (DataRaptor Post Action のプロパティ)] で次のように設定します。

1. [Name (名前)] (1) に CreateCase、[Field Label (項目表示ラベル)] (2) に Create Case (ケースを作成) と入力します。
   
2. [DataRaptor Interface (DataRaptor インターフェース)] (3) で、[sampleCreateCase] DataRaptor Load を選択します。この DataRaptor が新規ケースを保存します。
   

[DataRaptor Post Action Properties (DataRaptor Post Action のプロパティ)] にはメッセージングフレームワークのセクションがあります。

1. メッセージングフレームワークのプロパティで、次の操作を実行します。
   

1. [Pub/Sub] チェックボックス (1) をオンにして、OmniScript とカスタム Lightning Web コンポーネントが通信できるようにします。キー/値ペアによって、コンポーネントのカスタム動作をトリガーするイベントが渡されます。
   
2. [Key (キー)] (2) に CaseCreated、[Value (値)] (3) に %DRId_Case% と入力します。
   

2. OmniScript を有効にしてコンパイルし、スタンドアロンの Lightning Web コンポーネントとしてデプロイします。
   
3. OmniScript が有効になったら、[How to Launch (起動方法)] ウィンドウを開き、コンポーネントタグをコピーします。
   
4. このタグをカスタム Lightning Web コンポーネントに組み込みます。このステップは次の単元で取り上げます。
   

新規ケースを作成する OmniScript が出来上がったところで、Vijay はケースを表示して作成する FlexCard デザイナーに戻ります。

ケースを選択する FlexCard

各ケースの Selectable Item (選択可能アイテム) FlexCard をどのように表示するかについて、Vijay には明確な構想があります。

Selectable Item (選択可能アイテム) FlexCard には [Subject (件名)] 項目と [Status (状況)] 項目 (1)、そして [Select Case (ケースを選択)] ボタン (2) が表示されます。 

データソースを構成する

Vijay は FlexCard の作成時、データソース種別に [Integration Procedure] を選択し、ケースデータを取得する Integration Procedure を選択します。 

[Data Source Type (データソース種別)] (1) は [Integration Procedures] で、Integration Procedure の [Name (名前)] (2) は sample_getCaseList です。

Field 要素を構成する

[Subject (件名)] と [Status (状況)] は Field 要素です。各項目の出力は、データソースである sample_getCaseList Integration Procedure から取り込まれます。

[Subject (件名)] 項目のプロパティを次のように構成します。 

1. [Label (表示ラベル)] (1) に Subject (件名) と入力し、[Field Type (データ型)] (2) で [Text (テキスト)] を選択します。
   
2. [Output (アウトプット)] (3) で [CaseSubject] を選択します。
   

[Status (状況)] 項目のプロパティを次のように構成します。 

1. [Label (表示ラベル)] (1) に Status (状況) と入力し、[Field Type (データ型)] (2) で [Text (テキスト)] を選択します。
   
2. [Output (アウトプット)] (3) で [CaseStatus] を選択します。
   

PubSub イベントアクションを構成する

[Select Case (ケースを選択)] ボタンによって pubsub イベントアクションがトリガーされます。pubsub は、FlexCard から OmniScript に通信するデフォルトの方法です。ユーザーがボタンをクリックすると、このイベントが、ユーザーがケースを選択したことを OmniScript に伝えます。これにより、Case Management (ケース管理) OmniScript は、自動的にステップ 2 の Manage Case Comments (ケースコメントを管理) にナビゲートされます。では、設定する必要があるアクションのプロパティを確認しましょう。 

Select Case (ケースを選択) アクションのプロパティを次のように構成します。

1. [Action Type (アクション種別)] では、実行するアクションの種別である [Event] (1) を選択します。イベントが生じたときに pubsub イベントを起動して、ページやアプリケーション上の別のコンポーネントに通知する場合はこのアクション種別を使用します。
   
2. アクションの表示ラベル (2) には Select Case (ケースを選択) と入力します。エンドユーザーにはこのラベルが表示されます。
   

アクションには他のプロパティも構成できます。

1. [Event Type (イベント種別)] ドロップダウンリスト (1) から [PubSub] を選択します。
   
2. [Channel Name (チャネル名)] (2) に newCaseSelected と入力すると、イベントを post するチャネルが更新されます。
   
3. [Event Name (イベント名)] (3) には、イベントの名前である data と入力します。
   

reload、updatedatasource、remove は予約語であるため、イベントにこの 3 つの名前を使用しないでください。

4.コンテキストデータをキー/値ペアとして渡すには、[+Add New (+新規追加)] (4) をクリックします。

5.[Key (キー)] 項目 (5) に CaseId という変数値を入力し、[Value (値)] 項目 (6) に {CaseId} という変数値を入力します。

6.[Display As Button (ボタンとして表示)] チェックボックスをオンにして、このアクションをボタンとして表示します。 

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

イベントリスナーは、コンポーネントが起動したイベントをリスンし、そのイベントに応じたアクションを実行します。

• pubsub イベントは、同じ Lightning ページ上の別のコンポーネント (別の FlexCard など) が起動したイベントをリスンします。
  
• カスタムイベントは、子 FlexCard が起動したイベントや、FlexCard 上の要素が起動したイベントをリスンします。
  

Selectable Item (選択可能アイテム) FlexCard にはイベントリスナーが 2 つあります。 

最初のイベントリスナーは、Create Case (ケースを作成) OmniScript が新しいケースを追加した時点をリスンし、追加されたら FlexCard を再読み込みします。

このイベントリスナーを次のように構成します。

1. [Event Type (イベント種別)] (1) で [Pubsub] を選択します。
   
2. [Channel Name (チャネル名)] (2) に omniscript_action と入力します。
   
3. [Event Name (イベント名)] (3) に data と入力します。
   
4. [Action Name (アクション名)] (4) に Reload Card と入力します。
   
5. [Action Type (アクション種別)] (5) で [Card] を選択します。
   
6. [Type (種別)] (6) で [Reload] を選択します。
   

2 番目のイベントリスナーは、ユーザーが新規取引先を選択した時点をリスンします。このイベントリスナーには 2 つのアクションがあります。

最初のアクションは、データソースの更新をリスンすることです。ユーザーが FlexCard から新規ケースを作成すると、取引先のケースリストのデータソースの更新がトリガーされます。

Update Datasource イベントリスナーを構成します。 

1. [Event Type (イベント種別)] (1) で [Pubsub] を選択します。
   
2. [Channel Name (チャネル名)] (2) に newAccountSelected と入力します。
   
3. [Event Name (イベント名)] (3) に data と入力します。
   
4. [Action Type (アクション種別)] (4) で [Card] を選択します。
   
5. [Type (種別)] (5) で [Update Datasource] を選択します。
   
6. [Data Source Type (データソース種別)] (6) に Integration Procedures と入力します。
   
7. [Name of the Integration Procedure (Integration Procedure の名前)] (7) で、[sample_getCaseList] を選択します。
   

2 番目のアクションは、FlexCard をリロードします。データソースが更新されると、この取引先のケースリストデータがすぐに再読み込みされ、選択した取引先の新規ケースが表示されます。  

2 番目のイベントリスナーのアクションのプロパティを次のように構成します。[Type (種別)] に Reload と入力します。このリスナーは [Update Datasource] 種別ではないため、データソースを構成するためのプロパティは表示されません。

FlexCard が OmniScript と対話できるようにする

この FlexCard を有効にする前に、Vijay には最後にもう 1 つ構成する作業があります。 

[Setup (設定)] パネルで、[OmniScript Support (OmniScript サポート)] チェックボックスをオンにして、FlexCard が OmniScript Lightning Web コンポーネントと対話できるようにします。 

FlexCard を有効にする

FlexCard を有効にしてコンパイルし、スタンドアロン Lightning Web コンポーネントとしてデプロイします。FlexCard から Lightning Web コンポーネントを作成すると、cf 名前空間で有効になり、<c-cf- というプレフィックスになります。このプレフィックスの後はすべて、各単語がダッシュでつながれたコンポーネント名となります。有効な FlexCard を Lightning Web コンポーネントに組み込むときは、このタブ構文を使用します。この点は後ほど取り上げます。

これでケースの表示、選択、作成に必要な標準の OmniStudio Lightning Web コンポーネントが出来上がりました。けれども、Vijay の作業はこれで終わりではありません。Vijay がこれらの新しいコンポーネントをカスタム Lightning Web コンポーネントに組み込むところを見ていきますので、このモジュールを先に進めてください。