Type Ahead Block 要素を作成する

学習の目的

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

• Type Ahead Block の仕組みを説明する。
• Type Ahead Block を設定する。
• Type Ahead UI と UX を改善する。

Type Ahead Block の仕組み

項目への入力を開始したときに、結果のリストから一連のレコードが表示されるのであれば、それは先行入力機能が働いているということです。OmniScript では、Type Ahead Block を使用してこの機能を追加できます。では、OmniScript の場合、どのように表示されるのでしょうか。取引先責任者名の検索項目にユーザーが文字を入力すると、Type Ahead Block はその取引先にリンクされた取引先責任者のリストを提示しつつ、新しい主取引先責任者へと高速で切り替えていきます。 

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

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

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

• DataRaptor Pull Action
• DataRaptor Extract Action
• HTTP Action
• Remote Action
• Integration Procedure
• JSON Data
• Google Maps Auto Complete

Salesforce から取引先責任者情報を引き出すため、DataRaptor Extract Action 要素 (DataRaptor Extract を使用) で Type Ahead Block を動作させることにします。便利な機能を実現するにはどうすればよいでしょうか? まずはプロパティを適切に取得します。

Type Ahead Block を設定する

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

DataRaptor で取引先に関連付けられた取引先責任者のみを探す場合は、コンテキストを特定の取引先に制限します。取引先責任者を識別する一番の方法は AccountId (1) です。(幸い、これはすでに OmniScript の JSON の中にあります)。検索の実行に何を使用するかを定義する 2 つ目のパラメーターも追加する必要があります。データソースとはエンドユーザーがタイプアヘッド項目に入力するもので、検索条件値は LookupKey (2) です。

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

DataRaptor を設定できたら、Type Ahead Block プロパティを設定して DataRaptor とリンクするようにします。この設定によってすべてが連動します! Type Ahead Block の [Properties (プロパティ)] パネルで、DataRaptor Output JSON Path (4) で定義した内容の完全一致を使用して、Typeahead Key 項目にキーの名前を入力します。入力ミスを防ぐために、[Action Debugger (アクションデバッガー)] の [Response (応答)] ノードの JSON の名前をコピーします。これで、問題なく動作するために必要なプロパティを使用して Type Ahead Block を設定できました。

次に、いくつかのことを判断して、UI と UX をエンドユーザー向けに大きく改善します。最初の判断は UX の質問です。

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

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

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

2 個目の判断は、Type Ahead 検索項目から、エンドユーザーに新しい取引先責任者の作成を許可するかどうかです。デフォルトでは、許可するように設定されています。ただし、新しい主取引先責任者の作成方法には複数の分岐があるため、この機能を取り除くことは合理的です。

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