Skip to main content

Type Ahead Block 要素を作成する

学習の目的

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

  • 管理パッケージ用 Omnistudio で Type Ahead Block がどのように機能するか説明する。
  • Type Ahead Block を設定する。
  • Type Ahead UI と UX を改善する。

Type Ahead Block の仕組み

項目への入力を開始したときに、結果のリストから一連のレコードが表示されるのであれば、それは先行入力機能が働いているということです。

Omniscript では、Type Ahead Block を使用してこの機能を追加できます。では、Omniscript の場合、どのように表示されるのでしょうか。Omniscript の例では、取引先責任者名の検索項目にユーザーが文字を入力すると、Type Ahead Block がその取引先にリンクされた取引先責任者のリストを表示します。このため、新しいメインの取引先責任者をすばやく変更できます。 

Omniscript での Type Ahead のエンドユーザーエクスペリエンス

Type Ahead Block 要素は、Block のデータ要素とデータソースと連携します。そのデータ要素の中で、Type Ahead Block が使用する検索パラメーターと、データソースに送信する情報を定義します。 

Type Ahead Block を使用すれば、検索語の結果を単純に表示する以上のことができます。Block に関連項目を追加し、データソースを設定して、ユーザーに役立つその他のデータを引き出すことは簡単にできます。つまり、ユーザーが取引先責任者を名前で検索して選択するときに、Omniscript で取引先責任者の名前だけでなく、メールアドレスや電話番号も表示できます。便利ですよね。

Type Ahead のデータ要素には、複数の種類のデータを使用できます。

  • Omnistudio Data Mapper Turbo Action
  • Omnistudio Data Mapper Extract Action
  • HTTP Action
  • Remote Action
  • Integration Procedure
  • JSON Data
  • Google Maps Auto Complete

この例では、Salesforce から取引先責任者情報を取得するため、Omnistudio Data Mapper Extract Action 要素を使用して Type Ahead Block を操作できます。便利な機能を実現するにはどうすればよいでしょうか? まずはプロパティを適切に取得します。

Type Ahead Block を設定する

Type Ahead Block がシームレスに動作するように、Block の Omnistudio Data Mapper Extract Action 要素に 2 つの入力パラメーターを追加します。入力パラメーターはデータソースと条件値で構成されています。 

Omnistudio Data Mapper で取引先に関連付けられた取引先責任者のみを探す場合は、コンテキストを特定の取引先に制限します。

Type Ahead Block の仕組み

取引先を識別する一番の方法は AccountId (1) を使用することです。検索の実行に何を使用するかを定義する 2 つ目のパラメーターも追加する必要があります。データソースとはエンドユーザーがタイプアヘッド項目に入力するもので、検索条件値は LookupKey (2) です。

この場合のデータソースは Omnistudio Data Mapper で、パラメーターと一致する値が検索されます。LookupKey がオブジェクトの適切な項目に結び付けられていることを確認します。ここでは、取引先責任者名 (3) を使用します。もう 1 つ重要な点は、[Output JSON Path (出力 JSON パス)] で、Omnistudio Data Mapper が Omniscript に返すキーを JSON でどのように識別するか指定することです。ここでは、ChangeContactNameKey (4) を使用して指定しています。

Omnistudio Data Mapper を設定できたら、Type Ahead Block プロパティを設定して Omnistudio Data Mapper とリンクするようにします。この設定によってすべてが連動します! Type Ahead Block の [Properties (プロパティ)] パネルで、[Typeahead Key (先行入力キー)] 項目にキーの名前を入力します。このキーは、Omnistudio Data Mapper の [Output JSON Path (出力 JSON パス)] (4) で設定されたものと一致している必要があります。入力ミスを防ぐために、[Action Debugger (アクションデバッガー)] の [Response (応答)] ノードの JSON の名前をコピーします。

これで、問題なく動作するために必要なプロパティを使用して Type Ahead Block を設定できました。次に、いくつかのことを判断して、UI と UX をエンドユーザー向けに大きく改善します。最初の判断は UX の質問です。

要素プロパティで Type Ahead UI と UX を改善する

デフォルトでは、Type Ahead Block は検索項目しか表示しません。これは UX にどのように関係するでしょうか? Block に項目を追加しても、エンドユーザーが編集ボタン (鉛筆アイコン) をクリックしない限り、自動的に表示されることはありません。 

Type Ahead Block の編集ボタン

編集ボタンをクリックして編集モードを有効にすると、項目がすべて表示されます。データを表示するために、それ以上のクリックは必要ありません。

Type Ahead Block の編集ボタンとすべての項目の表示

判断すべき 2 つ目の点は、Type Ahead 検索項目から、エンドユーザーが新しい取引先責任者を作成できるようにするかどうかです。デフォルトでは、新しい取引先責任者を作成できます。ただし、この Omniscript には新しい主取引先責任者を作成する別の分岐があるため、この機能をオフにすることは理にかなっています。

これですべての Block の設定が完了しました。次の単元では、Omniscript でエラーを防ぐにはどうすればよいかを説明します。

リソース

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む