気づかなかった：チョイスした値は、そこに保存されていた【ノーコード・ツールGlide】

一つのタップだけで複数のリストをコントロールしてやろう、という企画ですが、今回はその2回目の記事です！

ここで重要となるポイントは、実は画面に紐付けるテーブルでした！（前回記事を読んでね😆）

野菜や果物のリストを表示させるアプリを参考としてお示ししていますが、その画面に紐づけるテーブルがユーザーテーブルだったんですね。

さあ、この設定がこの後どう活かされていくのか、気になりますか？気にしてください😅

今日は、チョイスコンポーネントを使ったフィルタリングについてお話ししますよ。

今回の動画は、こちらです。「使いやすさ改善！複数のリストを一発絞り込み」です。

では、行ってみよ～！

一つのチョイスで果物と野菜の２つのリストを絞り込め

前回記事でご紹介していますが、今サンプルとしてご提示しているアプリの概要について、先にお話ししておきましょう。

一番上に絞り込み用のチョイスコンポーネントがあります。その下に、果物のリストと野菜のリストが、別々のインラインリストとしておいてあります。

コンポーネントは次の通りです。今日は一番上のチョイスコンポーネントだけに着目しますよ！

選択肢のデータはどこにある？

ではチョイスコンポーネントを設定して参ります。チョイスコンポーネントの表示形式は、Segmented（ドロップダウンではない）となっています。念のため。

ではプロパティエリアを見てみます。ソースにご注目ください。「お気に入り選択」テーブルの「お気に入り」列に紐づいていますね。ナニコレ？

テーブルの実態はこちらの通りでございます。1列２行。これってテーブルか？はさておき、Choice コンポーネントの選択肢のために、一つテーブルを作ったのでございます😅。

チョイスコンポーネントのために一つテーブルを作るというのは、割と標準的な使い方なんですよ。

はい、これで、「ユーザーが選択肢を選んだ時に、どんな文字列が得られるか」が分かりました。「すべて」または「お気に入り」ですね。

選択肢の文字列はどこに格納されるのか？

ユーザーさんが選んでくれた、「すべて」または「お気に入り」の文字列、、一体どこに格納されるんでしょうか？

下図のとおり、「お気に入り」のカラムです。ただ、ソースで指定した「お気に入り」カラムと違います。この「お気に入り」列は、、、

ユーザーテーブルの方にあるのです！この画面は、そういえば、ユーザーテーブルに紐づいていましたね。そう、書き込み先はユーザーテーブル内のカラムとなるわけですよ😄。

いま、一行目には、「すべて」と値が入っています。なぜなら、トムさん（一行目の人）は、「すべて」を選択中だからです。

じゃあ、、、「お気に入り」を選択してみると、どうなりますか？

「お気に入り」と書き換わりました。チョイスコンポーネントを選択するたびに、値がデータベースに書き込まれに行くのですよ。

送信ボタンなんて押さなくても、データベースに書き込みに行ってしまうのです！！

フォーム画面にチョイスコンポーネントを置いたとしたら、一旦その値は画面に保管されていて、送信ボタンを押した時にテーブルに書き込まれに行きますね。

そうです。通常の画面とフォーム画面では、チョイスコンポーネントがデータを書き込みに行くタイミングが異なるのです。これを知るだけでも、この記事を最後まで読んだ価値、ありますよ～😁。

続きは次回。肝心のリストテーブルに踏み込んでまいります！

まとめ

はい、今回のシリーズは、一つの操作で複数のリストをコントロールしてしまおう、というお話です。その2回目の記事として、チョイスコンポーネントの設定に関してお話ししました。

通常の画面とフォーム画面では、チョイスコンポーネントがデータを書き込みに行くタイミングが異なるのですが、こういう細かい事って公式ドキュメントからなかなか読み取れないんですよね。私が悩んでなんとか解決したことについてどんどん紹介していきたいと思っていますよ～。

では、ビーダゼーン！

※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。