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

学習の目的

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

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

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

Vijay はここで Case Management (ケース管理) Omniscript にケースを表示して新規作成する方法を検討します。

このためには、次の作業を行う必要があります。

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

この要件は Vijay にとって間違いなく最も複雑なものであるため、この単元と次の単元で 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)
  
• ステップ外の Data Mapper Post Action (4)。このアクションは Data Mapper Load を呼び出してケースを作成します。
  

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

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

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

Data Mapper Post Action を構成する

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

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

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

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

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

• [Pub/Sub] チェックボックス (1) をオンにして、Omniscript とカスタム Lightning Web コンポーネントが通信できるようにします。キー/値ペアによって、コンポーネントのカスタム動作をトリガーするイベントが渡されます。
  
• [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 コンポーネントに組み込むところを見ていきますので、このモジュールを先に進めてください。

リソース

• Salesforce ヘルプ: Add Elements to a Flexcard (Flexcard への要素の追加) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Add a Field to a Flexcard (Flexcard への項目の追加) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Omnistudio Data Mapper Post Action (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Trigger a Pubsub Event from an Action on a Flexcard (Flexcard のアクションからの Pubsub イベントのトリガー) (管理パッケージ用 Omnistudio)
• Salesforce ヘルプ: Enable Omniscript Support on a Flexcard (Flexcard での Omniscript サポートの有効化) (管理パッケージ用 Omnistudio)