google
GoogleAppsScript
gas
GSuite
GoogleAppMaker

Google App Maker ー Query を使った検索のテクニック

More than 1 year has passed since last update.

次の画像のように一覧の上に絞り込むための条件を入れたいみたいなケースがよくある。
その場合のテクニックを紹介する。

image.png

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

用意するモデル

NameEmail を文字列で保持する Drive Table のモデル。
image.png

Query Filter を使う

基本的に絞込を行いたい場合はこれを使えばよいが、問題が発生することがある。

次のコードは NameEmail に含まれるものを検索しているが、これは AND検索 になってしまう。
Query Filter では OR の指定は出来ない ので OR検索 をしたい場合は 次に説明する Query Buider を使う必要がある。

function useQueryFilter() {
  console.log('useQueryFilter');

  var text = app.pages.Users.descendants.FilterText.value;
  app.datasources.User.query.filters.Name._contains = text;
  app.datasources.User.query.filters.Email._contains = text;
  app.datasources.User.load();
}

Query Builder を使う

基本的な Query Builder の使い方

Query Builder は次の画像のようにデータソースを作るときに使うのが一般的である。
:Value の値は、固定値やバインディングを利用してもよいし、コードから指定することも可能。

問題になるのが、:Valueの未指定時は一致するものがなくなるため一覧に何も表示されなくなる。
そのため検索のためだけなら問題ないが、最初は全部表示しておくが、あとから絞り込みをおこないたい といったケースでは使えない。

image.png

応用した Query Builder の使い方

実は先程書いたような 条件文は query.where で指定が可能。
これはリファレンスには載っていないので注意。
※ 筆者はエディタのコード補完で気づいた。

次のコードのように、条件が未入力時は query.where を空文字にして、入力時は query.where で条件を入れてやれば良い。
何も入力していないときは全件表示され、入力したときだけ絞り込まれたレコードが表示されるようになる。

function useQueryBuilder() {
  console.log('useQueryBuilder');
  var text = app.pages.Users.descendants.FilterText.value;
  if (text === null) {
    console.log('指定なし');
    app.datasources.User.query.where = '';
  } else {
    console.log('指定あり');
    app.datasources.User.query.where = '(Name contains :Value) or (Email contains :Value)';
    app.datasources.User.query.parameters.Value = text;
  }
  app.datasources.User.load();
}

参考サイト

Query Filter
Query Builder