アプリ概要
コーヒーのメニューがあり、それぞれに値段と出来上がり時間が設定されています。
フォームから値段と出来上がり時間の条件を選び、条件を絞り込んだリストを表示します。
動作
- 絞り込みボタンからフォームを開く
- 条件選択＆送信
- 絞り込み結果を表示
こちらから試せます
https://shocking-chalk-6859.glideapp.io/
スプレッドシート
使っているスプレッドシートはこちらです。
メニュー
コーヒーのメニュー
検索履歴
絞り込み条件保存用
選択肢
データシート
仕組み
処理の説明をしていきます。
絞り込み条件をフォームで選択して、検索履歴に保存していきます。
そして、絞り込み結果を表示するためにこの検索条件を読み込んで開くというのが一番のミソです。
動作の細かい流れ
実際に行われている動作を詳しく書いていきます。
- 絞り込みボタンからフォームを開く
- 条件選択＆送信
- フォーム送信（絞り込み条件が検索履歴に保存される）
- View detailsで画面遷移（保存された絞り込み条件をデータとして読み込みんだ画面に遷移）
- 絞り込み結果を表示
- フィルターで絞り込み条件を参照
- 結果表示
1つ1つの説明をしていきます。
各動作の説明
1. 絞り込みボタンからフォームを開く
ここのボタンのアクションはShow formを行っていれば大丈夫です。
2. 条件選択&送信
2.1 フォーム送信
フォームのシートは検索履歴を選択しておきます。
フォームを送信するとここで選択したものが検索履歴に絞り込み条件として保存されます。
各選択肢は、選択肢テーブルから項目を持ってきています。
オプションのRequiredをオンにすることで条件を設定しない状態で進むことを防止できるのでオンにしておきましょう。
フォームを送信するとここで選択したものが検索履歴に絞り込み条件として保存されます。
2.2 View detailsで画面遷移
フォームには、送信した時の処理をON SUBMITから加えられます。
ここではView detailsを選択します。
こうすることで絞り込み条件を読み込んだスクリーンに画面遷移ができます。
3. 絞り込み結果を表示
フォームでView detailsを選択したことで、フォーム送信後は画面遷移します。
フォームで選択したものがちゃんと読み込まれているかは左側のDATAから確認ができます。
3.1 フィルターで絞り込み条件を参照
画面にはInline Listを配置します。
データはメニューを選択します。
フィルターの条件を設定します。
フィルターの条件からScreenという項目の中にフォームで選択した値が入っています。
今回は値段と出来上がり時間の上限を選択した形なので、is less or eqaul toを比較条件に使います。
完成！
これで完成です。
あとがき
最初は検索条件を常に1つだけ保存するように作っていましたが、フォームからView detailで飛べることを知って今回の形になりました。Delete rowのタイミングに悩む必要がなくなったのが嬉しいです。
検索履歴はそのまま履歴として表示もできるので結構きれいな形にできたんじゃないかと思います。
リレーションも使っていないので実装しやすいのではないでしょうか。