ドロップダウンで選択した項目のDoc Referenceをデータベースに格納する方法を説明します。基本的な内容っぽいのですが、めっちゃ悩みました。調べてもなかなか出てこなかったので力尽きそうになりました、、、
あちらこちらで使える方法なのでかなり役に立つかと思います。
今回は商品情報を登録する際に別テーブルにあるカテゴリをドロップダウンで選択してデータベースに登録するケースを例に説明します。
ゴールイメージ
機能の説明を中心に記載するため、画面の作りは適当です。ご容赦ください。
商品登録画面で商品画像などを設定し、データベースに登録します。ここでのポイントはドロップダウンでカテゴリのリストを表示し、そのカテゴリのDoc Referenceをデータベースに格納。
一覧画面ではそのDoc Referenceで登録したカテゴリ名を表示する、という点になります。
手順
データベースを準備
- 以下のように商品を登録するためのテーブル、カテゴリテーブルを準備します。
- 今回、カテゴリはシンプルにnameだけにしています。
- Productは以下のような形です。categoryはDoc Referenceで上記で作成したテーブルを参照するように設定してください。
- Categoriesのテーブルにはいくつか適当にカテゴリーデータを登録しておいてください。
- Manage Contentから登録できます。
商品登録画面の作成
- テンプレートを使って商品を登録するページのベースを作成します。以下の画像のようにCreate Productというテンプレートは今回のケースでは使いやすいです。
- 今回の説明はカテゴリの部分にフォーカスしますのでそれ以外の箇所は割愛させてください。
- 悩むとすると画像を登録するところかと思いますがそれは以下のページを参考にして作成してください。
- カテゴリ登録用のドロップダウンを配置します。
- ドロップダウンの項目は以下のようにQuery Collectionを使ってCategoriesテーブルのリストを取得します。
Propertiesは Category Documents > Map List Items > nameという形で設定してください。
これでドロップダウンにCategoriesのname一覧が表示されます。
- 他、画像、商品名、商品説明、料金などの項目がありますが、それらは割愛させてください。
データベースへの値の登録
ここがポイントになります。私はここで悩みました。
- Create Productのボタンにアクションを設定していきます。
- 最終的には以下のようにFirestore Queryで対象のCategoryのリファレンスを取得し、その結果をBackend CallのCreate Documentでデータベースに登録していくという流れになります。
- 最初のFirestore Queryを以下のように設定します。
- CategoriesからSingle Documentを取得するようにします。その際のFilteringの条件としてname（※Categoriesに設定したname）がDropDownの値と一致しているという条件を設定します。これで対象のカテゴリーのリファレンスを取得できます。
- 忘れてはいけないのは一番下のAction Output Variable Nameを設定することです。ここで設定した値をその次のアクションで利用します。
- ２番目のアクションでデータベースに各値を登録していきます。
- ポイントとなるカテゴリーの登録は以下の図の通りです。１つ目のアクションの結果を格納するように設定します。
- Action Outputsを選ぶと１番目のアクションの結果”categoryRef”が表示されるのでそれを選択してください。
- 最後にNavigate Toで一覧を表示するページへ遷移させてください。
一覧ページでの表示
- 一覧ページで先ほど登録した商品をリストで表示します。その１項目として先ほど登録したカテゴリ名も表示するようにします。今回は以下のように商品名、カテゴリ、画像だけ表示するようにしています。
- 画面にリストを配置し、リストの項目はQuery Collectionでデータベースのproductsテーブルの商品一覧を取得するようにします。
- ポイントとなるカテゴリは以下のような設定でカテゴリ名を表示させます。
Backend queryでCategoriesのテーブルの値を取得してきます。
- PropertiesはCategories Documentのnameを表示するように設定します。
はい、これでリストの項目のカテゴリが表示されます。
まとめ
今回は商品登録時に商品テーブル(product table)に設定した別テーブルのカテゴリ(categories)の内容をDBに登録し、それを表示する方法を解説しました。
同様に他のテーブルのデータを参照として格納することは多々あるかと思いますので是非マスターしていただければと思います。
株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。