Google App Maker ー 検索時に日本語を使えるようにする

App Maker でデータソースのクエリのパラメータに日本語を使うとエラーになってしまう。
そのうち治ると思うが、現在（2017/10/3) は動かないので、本記事で行うようなエラーの回避を行う必要がある。

そもそも App Maker ってなに？という人は、以下の記事を参照してください。
Google App Maker とは？ 短期間で Web アプリケーション構築を可能にした理由

エラーが起きるケース

次のような一覧画面があり画面上部に絞込用のテキストボックスがあるようなケース。

アルファベットは問題なし

日本語はエラー

エラーメッセージ

Tue Oct 03 17:51:34 GMT+900 2017
(InvalidCharacterError) : Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
at Users.TextBox1.onValueChange:1:41

エラーになる原因

query のパラメータに日本語を入れるときにエラーになる。

widget.datasource.query.parameters.text = widget.value;
widget.datasource.load();

改善方法

パラメータの設定側

encodeURIComponent をつける。

widget.datasource.query.parameters.text = encodeURIComponent(widget.value);
widget.datasource.load();

クエリの実行側

decodeURIComponent をつける。

var text = query.parameters.text;
if (text) {
  query.filters.Name._contains = decodeURIComponent(text);
}

return query.run();

改善後の実行結果

エラーが出ずに日本語で検索できている。