GlideappsでListに複数項目の絞り込み検索条件を付ける

# アプリ概要
コーヒーのメニューがあり、それぞれに値段と出来上がり時間が設定されています。
フォームから値段と出来上がり時間の条件を選び、条件を絞り込んだリストを表示します。

# 動作

1. 絞り込みボタンからフォームを開く
1. 条件選択＆送信
1. 絞り込み結果を表示
![Glide 資料.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/793d5eb4-d3d9-7221-229f-b6c78fe6988f.jpeg)

こちらから試せます
https://shocking-chalk-6859.glideapp.io/

# スプレッドシート
使っているスプレッドシートはこちらです。

## メニュー
**コーヒーのメニュー**
![スクリーンショット 2021-05-24 22.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/8f416eaa-4f97-e272-3395-3b18c160baad.png)


## 検索履歴
**絞り込み条件保存用**
![スクリーンショット 2021-05-24 21.58.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/01a7759d-2a23-a2a1-6ea0-3ad40d44e966.png)


## 選択肢
**データシート**
![スクリーンショット 2021-05-24 22.08.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/9025869d-1e11-bf65-86d7-c94a4f11e3ba.png)

# 仕組み
処理の説明をしていきます。

絞り込み条件をフォームで選択して、[検索履歴](#検索履歴)に保存していきます。
そして、絞り込み結果を表示するためにこの検索条件を読み込んで開くというのが一番のミソです。

## 動作の細かい流れ
実際に行われている動作を詳しく書いていきます。

1. 絞り込みボタンからフォームを開く
1. 条件選択＆送信
    1. フォーム送信（絞り込み条件が[検索履歴](#検索履歴)に保存される）
    1. View detailsで画面遷移（保存された絞り込み条件をデータとして読み込みんだ画面に遷移）
1. 絞り込み結果を表示
    1. フィルターで絞り込み条件を参照
    1. 結果表示

**1つ1つの説明をしていきます。**
## 各動作の説明

### 1. 絞り込みボタンからフォームを開く
ここのボタンのアクションはShow formを行っていれば大丈夫です。
![スクリーンショット 2021-05-24 22.16.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/0c29cdab-ae71-468d-c3ef-938f41b5443d.png)

### 2. 条件選択&送信
#### 2.1 フォーム送信
フォームのシートは[検索履歴](#検索履歴)を選択しておきます。
フォームを送信するとここで選択したものが[検索履歴](#検索履歴)に絞り込み条件として保存されます。
![スクリーンショット 2021-05-24 22.20.08のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/125edb7c-f097-10fc-059c-998f21365b04.png)
各選択肢は、[選択肢テーブル](#選択肢)から項目を持ってきています。
オプションのRequiredをオンにすることで条件を設定しない状態で進むことを防止できるのでオンにしておきましょう。
フォームを送信するとここで選択したものが[検索履歴](#検索履歴)に絞り込み条件として保存されます。
![スクリーンショット 2021-05-24 22.18.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/0b22a9eb-bca1-3adb-c0cb-593eaaee805e.png)

#### 2.2 View detailsで画面遷移
フォームには、送信した時の処理をON SUBMITから加えられます。
ここではView detailsを選択します。
こうすることで絞り込み条件を読み込んだスクリーンに画面遷移ができます。
![スクリーンショット 2021-05-24 22.20.08のコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/6426983a-71d6-54f9-05e1-8ba4df445412.png)

### 3. 絞り込み結果を表示
フォームでView detailsを選択したことで、フォーム送信後は画面遷移します。
フォームで選択したものがちゃんと読み込まれているかは左側のDATAから確認ができます。
![スクリーンショット 2021-05-24 22.34.14のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/795e950a-fe77-0d38-6aae-ee7f6bddd993.png)

#### 3.1 フィルターで絞り込み条件を参照
画面にはInline Listを配置します。
データは[メニュー](#メニュー)を選択します。
![スクリーンショット 2021-05-24 22.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/6c0f895a-8858-5a7d-4e9f-af85a0e67fa9.png)

フィルターの条件を設定します。
フィルターの条件からScreenという項目の中にフォームで選択した値が入っています。
![スクリーンショット 2021-05-24 21.15.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/7d399803-b7d8-2d7e-b634-ac6661a22d9c.png)

今回は値段と出来上がり時間の上限を選択した形なので、is less or eqaul toを比較条件に使います。
![スクリーンショット 2021-05-24 21.14.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/fdf7ce79-6d5e-7773-6efb-df779600f671.png)

### 完成！
これで完成です。
![スクリーンショット 2021-05-24 22.54.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323458/8bd503c8-e8fa-1638-b71e-cc4ddc11268d.png)

# あとがき
最初は検索条件を常に1つだけ保存するように作っていましたが、フォームからView detailで飛べることを知って今回の形になりました。Delete rowのタイミングに悩む必要がなくなったのが嬉しいです。
検索履歴はそのまま履歴として表示もできるので結構きれいな形にできたんじゃないかと思います。
リレーションも使っていないので実装しやすいのではないでしょうか。