テキスト入力ウィジェットを使用すると、ユーザーが入力したテキストをアドオンで読み取って反応させることができます。これらのウィジェットを構成して、入力テキストの自動候補をユーザーに提供できます。
提供される候補は、指定した文字列の静的リストから取得できます。また、ユーザーがウィジェットにすでに入力したテキストなどのコンテキストから候補を構築することもできます。
候補の設定
テキスト入力の候補を構成するには、次の操作のみが必要です。
- 次の方法で候補のリストを作成します。
- 静的リストの作成
- コンテキストからリストを動的に作成するコールバック関数を使用してアクションを定義します。
- 候補リストやアクションをテキスト入力ウィジェットに添付します。
候補の静的リストとアクションの両方を指定した場合、ユーザーが文字の入力を開始するまでは、アプリの UI で静的リストが使用されます。ユーザーが文字の入力を開始すると、コールバック関数が使用され、静的リストは無視されます。
静的候補
候補の静的リストを表示するには、次の操作を行うだけです。
Suggestionsオブジェクトを作成します。addSuggestion()またはaddSuggestions()を使用して、各静的候補をこのリストに追加します。TextInput.setSuggestions()を使用して、Suggestionsオブジェクトをウィジェットにアタッチします。
UI には、静的候補が追加された順序で表示されます。また、UI は大文字と小文字を区別しないプレフィックス マッチングを自動的に実行し、ユーザーがウィジェットに文字を入力すると候補リストをフィルタします。
提案アクション
静的候補リストを使用していない場合は、候補を動的に作成するアクションを定義する必要があります。手順は次のとおりです。
Actionオブジェクトを作成し、定義したコールバック関数に関連付けます。- ウィジェットの
TextInput.setSuggestionsAction()関数を呼び出し、Actionオブジェクトを渡します。 - コールバック関数を実装して候補リストを作成し、作成した
SuggestionsResponseオブジェクトを返します。
ユーザーがテキスト入力に文字を入力するたびに、UI はコールバック関数を呼び出しますが、ユーザーがしばらく入力しなくなってから呼び出します。コールバック関数は、開いているカードのウィジェットに関する情報を含むイベント オブジェクトを受け取ります。詳しくは、アクション イベント オブジェクトをご覧ください。
コールバック関数は、表示する候補のリストを含む有効な SuggestionsResponse オブジェクトを返す必要があります。UI には、追加された順序で候補が表示されます。静的リストとは異なり、UI はユーザー入力に基づいてコールバック候補を自動的にフィルタリングしません。このようなフィルタリングを行う場合は、イベント オブジェクトからテキスト入力値を読み取り、リストを作成するときに候補をフィルタする必要があります。
例
次の Google Workspace アドオンのコード スニペットは、2 つの異なるテキスト入力ウィジェットで候補を設定する方法を示しています。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() ハンドラ関数を定義できます。このハンドラと候補の両方が同じテキスト入力で有効になっている場合、次のルールでテキスト入力のインタラクション動作が定義されます。
setOnChangeAction()ハンドラは、候補が選択された後に実行されます。- ユーザーが選択した候補を変更せずに Enter キーを押した場合(または、テキスト入力のフォーカスが外れた場合)、
setOnChangeAction()は再度トリガーされません。 - ユーザーが候補を選択した後、リスト内のどの候補とも一致しないように編集した場合、
setOnChangeAction()は再度トリガーされます。 - ユーザーが候補を選択しなかった場合、テキスト入力のフォーカスが外れると
setOnChangeAction()がトリガーされます。