Case Management (ケース管理) OmniScript を設計して構築する

学習の目的

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

• OmniStudio コンポーネントの実装におけるベストプラクティスについて説明する。
  
• カスタム Lightning Web コンポーネントを使用して OmniStudio の標準機能を拡張すべき状況を判断する。
  

前提条件

このモジュールを開始する前に、必須の前提条件を満たしていることを確認してください。また、モジュールの学習に役立つ推奨事項についても検討してください。

必須

次のモジュールの修了:

• Lightning Web コンポーネントの基本
  
• OmniScripts
  
• OmniStudio FlexCards
  

推奨

• 「OmniStudio 開発者ツール」モジュールを受講して、開発者が OmniStudio コンポーネントを管理したり、変更を他の環境に移行したりするために使用するツールについて学習する。
  
• Salesforce 拡張機能パックとともに Visual Studio Code をインストールして Lightning Web コンポーネントをカスタマイズし、ファイルを組織にデプロイできるようにする。
  

Vijay の新しいユースケース

Cloud Kicks の認定 OmniStudio デベロッパーである Vijay Lahiri が、OmniScripts や FlexCards などの OmniStudio コンポーネントを使用する実装プロジェクトについて検討しています。

Vijay はお客様から次の要件を伴うユースケースについて相談を受けました。

カスタマーサービスエージェントとして、取引先のケースを管理できる次のようなワークフローを求めています。 

1 ページ目では、次の操作を実行したいと考えています。

• 取引先のリストから取引先を選択する。
  
• 選択した取引先に関連するすべてのケースを表示する。
  
• 新規ケースを作成すると、ただちにケースのリストに表示される。
  
• ケースのリストからケースを選択する。
  

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

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

Vijay のところにまた一筋縄ではいかない仕事がやってきました。このすべてを実現することは可能でしょうか?

OmniStudio の実装におけるベストプラクティス

Vijay はアプリケーションの設計に取りかかる前に、「このアプリケーションを巧妙なものにするために、OmniStudio 実装のベストプラクティスを確認しておこう」と考えます。Vijay はこれまでにも OmniStudio の仕事を請けたことがあるため、WYSIWYG 機能を備えたドラッグアンドドロップ方式の OmniScript や FlexCard のデザイナーを使用して、お客様のワークフローをすべて OmniStudio で構築する術を心得ています。 

時として、OmniStudio デザイナーでは対応できない機能の構築を要するユースケースを依頼されることがあります。こうした場合には、コードベースを最小限に抑える必要があります。コードが最小限のアプリケーションは動作が速いだけでなく、お客様の Salesforce システム管理者がメンテナンスしやすくなります。Vijay は、軽快に機能する次のアプリケーションを構築したくてウズウズしています。

そこで早速、OmniStudio プロジェクトのベストプラクティスの概要を確認します。

ユースケースの要件

ベストプラクティスのガイダンスに納得した Vijay は早速アプリケーションの設計と構築に取りかかります。今回のユースケースの要件を分割し、ユーザーが取引先のケースを管理できるようにする、2 ページのワークフロー全般の要件から見ていきます。

このモジュールのステップは、デモのみを目的とします。OmniStudio は Trailhead Playground 組織で有効になっていません。

ケース管理用の 2 ページのワークフローを作成する

OmniScript デザイナーはこうした作業に向いているため、Vijay はこのツールを使うことにします。今回の OmniScript には、ワークフローの各ページに 1 つずつ、2 つのステップが必要です。1 ページ目で、ユーザーが取引先とケースを選択します。2 ページ目で、ユーザーがケースコメントを管理します。

この Case Management (ケース管理) OmniScript (1) は、Vijay が使用する標準コンポーネントと、Vijay が作成するカスタム Lightning Web コンポーネントのコンテナとして機能します。Vijay は OmniStudio の UI アーキテクチャを活用するため、システム管理者も OmniStudio デザイナーでワークフローをメンテナンスできます。 

Vijay は、最初のステップ (2) にワークフローの 1 ページ目に必要なコンポーネントを配置し、2 番目のステップ (3) はワークフローの 2 ページ目のコンポーネントで構成する計画を立てます。

取引先を選択して関連するケースを表示する

この要件については、お客様が 1 ページ目で何をしたいのかに着目します。お客様は取引先のリストから取引先を選択し、その取引先に関連するケースを表示することを望んでいます。そこで、標準 Lookup コンポーネントを OmniScript に追加します。Lookup では、ユーザーが要件に基づいて Salesforce から一度に 1 つのレコードのデータを取得できます。 

この標準 Lookup コンポーネントでは要件がまだ半分しか満たされません。さらに、選択した取引先のケースを取得する必要があるためです。ケースを取得するには、ユーザーが取引先を選択したときに、OmniScript からケースを取得するコンポーネントにメッセージを送る必要があります。 

そこで Vijay は accountLookupLWC (4) というカスタム Lightning Web コンポーネントを作成することにします。ユーザーが取引先を選択すると、このカスタムコンポーネントに対する Vijay の計画では、ケースを取得して表示する 2 番目のカスタムコンポーネントにメッセージを送信することになっています。これを合図に、2番目のカスタムコンポーネントがその取引先に関連するケースを取得して表示します。Vijay は標準 Lookup コンポーネントの [LWC Component Override (LWC コンポーネントのオーバーライド)] 項目を使用して、accountLookupLWC コンポーネントを OmniScript にリンクします。

新規ケースを作成して選択する

次の要件は、ユーザーが新規ケースを作成すると、ただちにケースのリストに表示されることです。続いて、ケースをリストから選択する必要があります。Vijay はこの要件を達成するために、OmniStudio デザイナーを次のとおり使用することにします。

• OmniScript デザイナーを使用して、ユーザーが新規ケースを作成できる別の OmniScript を構築する。
  
• FlexCard デザイナーを使用して、選択可能なケースレコードを表示する FlexCard を作成する。
  

追加機能を装備する必要があるため、Vijay は caseSelectableItemLWC (5) というカスタム Lightning Web コンポーネントを作成することにします。このコンポーネントの要件は次のとおりです。

• Selectable Item (選択可能アイテム) FlexCard と Create Case (ケース作成) OmniScript を含む。
  
• ユーザーが取引先を選択したときに、accountLookupLWC コンポーネントからメッセージを受信する。
  
• 新規ケースがただちにケースのリストに表示されるが、次のページには進まない。
  
• ユーザーがケースを選択したら、自動的に次のページに進むようにする。
  

Vijay は Custom Lightning Web Component 要素を使用して、caseSelectableItemLWC コンポーネントを Case Management (ケース管理) OmniScript にリンクする予定です。

Vijay は次に、ワークフローの 2 ページ目の要件に目を向けます。

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

ユーザーはケースコメントを表形式で表示して、一目で把握できるようにすることを望んでいます。さらに、新規コメントを送信すると、ただちにコメントのテーブルに表示されるようにする必要があります。Vijay は、ステップ 2 に 2 つの標準コンポーネントを追加することにします。

• ユーザーが新規ケースコメントを入力する Text Area (1)
  
• DataRaptor Load にリンクして新規ケースコメントを保存する DataRaptor Post Action (2)
  

既存のケースコメントを表示するために、Vijay は次のことを決定します。

• FlexCard デザイナーを使用して、Datatable 要素を設定した FlexCard を作成します。
  
• DataTable FlexCard を含む caseCommentDataTableLWC (3) というカスタム Lightning Web コンポーネントを作成します。
  
• Custom Lightning Web Component 要素 (4) を使用して、caseCommentDataTableLWC コンポーネントを Case Management (ケース管理) OmniScript にリンクします。
  

これで Vijay の Case Management (ケース管理) OmniScript の構造が決まりました。 

Case Management (ケース管理) ワークフロー: プレビュー 

ここで Vijay の Case Management (ケース管理) OmniScript が完成したものと想定し、ユーザーがこの OmniScript を実行する手順を見ていきましょう。

1. Case Management (ケース管理) OmniScript を開きます。[Select Account and Case (取引先とケースを選択)] ページが開きます。
   

2.組織の取引先を見つけるには、[Select Account (取引先を選択)] 検索ボックスに検索語を入力していきます。

3.検索結果から取引先を選択します。[Select Account and Case (取引先とケースを選択)] ページが開き、次の項目が表示されます。

• [Create New Case (ケースを新規作成)] ボタン
  
• 取引先の現在のケースのリストと各ケースの [Select Case (ケースを選択)] ボタン
  

4.[Create New Case (ケースを新規作成)] をクリックします。[Create New Case (ケースを新規作成)] モーダルが開き、次の項目が表示されます。

• ケース件名とケースの詳細の 2 つの入力項目
  
• ケースを作成する [Create Case (ケースを作成)] ボタン
  

5.ケースの詳細を追加して、[Create Case (ケースを作成)] をクリックします。新規ケースを作成すると、取引先に関連するケースのリストにただちに表示されます。

6.[Select Case (ケースを選択)] をクリックして、[Manage Case Comments (ケースコメントを管理)] ページに進みます。このページには次の項目が表示されます。

• 新規ケースコメントを入力する入力項目
  
• コメントを送信する [Submit (送信)] ボタン
  
• ケースコメントのテーブル
  

7.新規ケースコメントを入力して送信します。コメントのテーブルに新規コメントがただちに表示される。

次の単元では、構成について詳しく説明し、Vijay が標準 Lookup コンポーネントを構成して変更するところを見ていきます。

リソース

• Trailhead: OmniStudio を使用したガイド付きエクスペリエンスを構築する
  
• Trailhead: Lightning Web コンポーネントの基本