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

学習の目的

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

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

このモジュールでは、管理パッケージランタイムとカスタムオブジェクトを使用する、管理パッケージ用 Omnistudio について説明しています。標準ランタイムでの Omnistudio についての詳細は、Salesforce ヘルプの「Omnistudio」を参照してください。

このバッジを受講すべきかどうかを判断するには、「Which Version of Omnistudio Do You Have? (使用している Omnistudio バージョンを調べる)」を参照してください。

始める前に

このモジュールを受講する前に、以下のコンテンツを修了していることを確認してください。ここでの作業は、そのコンテンツの概念や作業に基づいて行います。

• Lightning Web コンポーネントの基本
  
• 管理パッケージ用 Omnistudio の Omniscript
  
• 管理パッケージ用 Omnistudio の Flexcard
  

管理パッケージ用 Omnistudio での新しい課題

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

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

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

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

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

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

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

Vijay のところにまた一筋縄ではいかない仕事がやってきました。でも彼ならソリューションを見つけることができます。このモジュールでは、Vijay がソリューションを作成する手順を見ていきます。

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

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

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

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

ユースケースの要件

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

このモジュールでは、受講者が管理パッケージ用 Omnistudio 開発者で、ここに記載の操作を実行する適切な権限を有すると想定しています。ただし、そうでなくても大丈夫です。このまま読み進み、本番組織で開発者がどのような手順を実行するのか確認します。Trailhead Playground で次の手順を実行しないでください。Trailhead Playground では管理パッケージ用 Omnistudio を使用できません。

ケース管理用の 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 を作成する。
  

これを Omniscript のどこに組み込めばよいのでしょうか?

追加機能を装備する必要があるため、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)
  
• Data Mapper Load にリンクして新規ケースコメントを保存する Data Mapper 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: Lightning Web コンポーネントの基本
• Trailhead: クイックスタート: Lightning Web コンポーネント
• Salesforce ヘルプ: Omnistudio for Managed Packages (管理パッケージ用 Omnistudio)