テキスト入力に対するオートコンプリートの候補

テキスト入力ウィジェット を使用すると、ユーザーが入力したテキストをアドオンで読み上げて反応できます。Google Chat では 設定の候補を自動的に表示するよう設定できます 表示されます。

表示される候補は、指定した文字列の静的なリストから取得できます。 または、テキストなどのコンテキストから候補を作成することもできます。 ユーザーがウィジェットに入力済みであることを表します。

候補の構成

テキスト入力の候補を設定するには、 次のとおりです。

  • 候補のリストを作成するには: <ph type="x-smartling-placeholder">
      </ph>
    • 静的リストを作成する
    • 以下を使用してアクションを定義します。 コンテキストから動的にリストを作成するコールバック関数。
  • 候補リストとアクションをテキスト入力ウィジェットに追加します。

候補の静的リストとアクションの両方を指定した場合、 ユーザーが文字の入力を開始するまで、アプリの UI は静的リストを使用します。 コールバック関数が使用され、静的リストは無視されます。

静的候補

候補の静的リストを表示するには、次の操作のみを行います。

  1. Suggestions を作成する 渡されます。
  2. addSuggestion() を使用して、それぞれの静的な候補をそこに追加します。 または addSuggestions()
  3. Suggestions をアタッチします。 ウィジェットに TextInput.setSuggestions() を使用して追加します。

UI には、静的な候補が追加された順序で表示されます。UI 大文字と小文字を区別しないプレフィックス マッチングを自動的に実行し、 ユーザーがウィジェットに文字を入力するとき、候補リストが表示されます。

候補の操作

静的な候補リストを使用していない場合は、アクションを定義する必要があります。 候補を動的に作成することもできます手順は次のとおりです。

  1. Action オブジェクトを作成する コールバック関数に関連付けます。 使用できます。
  2. ウィジェットの TextInput.setSuggestionsAction() を呼び出す 関数に Action を指定して、 渡されます。
  3. 候補リストを作成して返すコールバック関数を実装します。 ビルドされた SuggestionsResponse 渡されます。

ユーザーが文字をスペースに入力するたびに、UI はコールバック関数を呼び出します。 ただし、ユーザーがしばらく入力をやめた後に限られます。「 コールバック関数は、イベントに関する情報を含むイベント オブジェクトを カードのウィジェットを開きます詳しくは、 アクション イベント オブジェクト をご覧ください。

このコールバック関数は有効な SuggestionsResponse 表示する候補のリストを含むオブジェクト。UI が表示されます。 追加された順に提案されます。静的リストとは異なり、UI では ユーザーに基づくコールバックの候補の自動フィルタリングを行わない 表示されます。このようなフィルタリングが必要な場合は、テキスト入力値を読み取り、 イベント オブジェクトから取得し、リストの作成時に候補をフィルタします。

次の Google Workspace アドオンのコード スニペット は、提案を構成する方法を示しています。 1 つ目は静的なリストで、もう 1 つは 次のコールバック関数を使用します。

// Create an input with a static suggestion list.
var textInput1 = CardService.newTextInput()
    .setFieldName('colorInput')
    .setTitle('Color choice')
    .setSuggestions(CardService.newSuggestions()
        .addSuggestion('Red')
        .addSuggestion('Yellow')
        .addSuggestions(['Blue', 'Black', 'Green']));

// Create an input with a dynamic suggestion list.
var action = CardService.newAction()
    .setFunctionName('refreshSuggestions');
var textInput2 = CardService.newTextInput()
    .setFieldName('emailInput')
    .setTitle('Email')
    .setSuggestionsAction(action);

// ...

/**
 *  Build and return a suggestion response. In this case, the suggestions
 *  are a list of emails taken from the To: and CC: lists of the open
 *  message in Gmail, filtered by the text that the user has already
 *  entered. This method assumes the Google Workspace
 *  add-on extends Gmail; the add-on only calls this method for cards
 *  displayed when the user has entered a message context.
 *
 *  @param {Object} e the event object containing data associated with
 *      this text input widget.
 *  @return {SuggestionsResponse}
 */
 function refreshSuggestions(e) {
   // Activate temporary Gmail scopes, in this case so that the
   // open message metadata can be read.
   var accessToken = e.gmail.accessToken;
   GmailApp.setCurrentMessageAccessToken(accessToken);

   var userInput = e && e.formInput['emailInput'].toLowerCase();
   var messageId = e.gmail.messageId;
   var message = GmailApp.getMessageById(messageId);

   // Combine the comma-separated returned by these methods.
   var addresses = message.getTo() + ',' + message.getCc();

   // Filter the address list to those containing the text the user
   // has already entered.
   var suggestionList = [];
   addresses.split(',').forEach(function(email) {
     if (email.toLowerCase().indexOf(userInput) !== -1) {
       suggestionList.push(email);
     }
   });
   suggestionList.sort();

   return CardService.newSuggestionsResponseBuilder()
       .setSuggestions(CardService.newSuggestions()
           .addSuggestions(suggestionList))
       .build();  // Don't forget to build the response!
 }

候補と OnChangeAction()

テキスト入力ウィジェットには、 setOnChangeAction() ウィジェットがフォーカスを喪失したときに実行されるハンドラ関数です。 同じテキスト入力に対してこのハンドラと候補の両方が有効になっている場合、 次のルールで、テキスト入力インタラクションの動作を定義します。

  1. setOnChangeAction() ハンドラは、候補が選択されると実行されます。
  2. ユーザーが Enter を押した場合(または、それ以外でテキスト入力のフォーカスが失われる場合) 選択した候補を変更しない限り、setOnChangeAction() では実行されません。 トリガーされます。
  3. ユーザーがサービスを選択した後に、setOnChangeAction() が再度トリガーされる どの候補とも一致しないように編集します 選択します。
  4. ユーザーが候補を選択しない場合、setOnChangeAction() がトリガーされます。 テキスト入力がフォーカスを喪失したとき