今日は一覧（リスト）表示の設定方法を紹介します。
データの準備ができたら、アプリ上で一覧でみたいですよね。
標準で用意されているリスト画面を使用して、簡単に一覧をできますよ。
この記事を読むとわかること・・・
・リスト表示の方法
・リストに表示する内容設定
・データベースの値を表示する方法
一覧(リスト)画面を作成
今日は標準で用意されている一覧画面を使います。
前回までで作成した「レッスン日誌」を一覧表示させたいと思います。
まだ、データベースの作り方がわからない方は、過去の記事をご覧ください。
今日の最終的な一覧イメージ〜
日付ごとにレッスン日誌を並べていきます。
今日の設定は他の一覧にも応用できるので、参考に見ていってください。
スクリーン追加
Step1
- 左上の「＋」を選択
- ADD SCREEN を選択
- List を選択
作りたいタイプのリストを選んでください。
今日は「Card List」にして、縦長の長方形が並んだリストを用意します。
Step2
- スクリーン名を編集
- CREATE SCREEN を選択
これで新しい画面が追加されました！
続いて、一覧（リスト）の詳細を設定します。
一覧（リスト）詳細を設定
Step1
- スクリーン全体を選択
- Components を選択
- Card List を選択
Componentsの中には標準で配置されているテキストやリストの一覧が出ています。
右側の画面で、リスト部分をダブルクリックしても、Card Listの詳細を表示できます。
Step2
- What is this a list of? のSelect... を選択
- リストの対象となるデータベースを選択
前回作成した「レッスン日誌」選択しました。
続いて、リストの表示順を設定します。
Step3
- Add sorting... を選択
- 好みの順番を選択
今回は日付の新しい順を選びました。
並び順を選ばないと、適当な順番で並んでしまいます。
表示する文章・画像を設定
それでは、表示する文章や画像をセッセと設定していきます。
固定の文章でなく、
データベースに保存されているデータからリスト表示する方法を紹介します。
Step1
- 表示させたい箇所を選択（今回はTitle部分）
- Textの「T＊」を選択
- 表示したい項目を選択
「T＊」を選択すると、このリストに設定したデータベースの項目一覧を表示します。
では、どんどん値を選択します！
Step2
Subtitle部分も設定しました。
固定の文章とデータベースの値を組み合わせて表示もできます。
Step3
今回は画像の表示はいらないので、imageのチェックをオフにしました。
Step4
リスト自体の色の設定は Card Style でできます。
色合いのセンスがなさすぎて・・・やばいです。
Preview
とりあえず、設定ができたので、画面右上の「▶︎Preview」を選択してプレビューしてみます！
ワクワク！！
・・・・
あれ・・・日付が「○日前」ってなっている。
ということで、設定を見直します。
- リストを選択
- 日付項目（今回はTitle）を選択
- Data Format を選択
- No Formatting を選択
prevew2
これでどうだ〜！
再度プレビューします。
・・・
日付がちゃんと出ました。
文章も少し間隔を開けてみました。
色合いは・・・変えてみたものの、難しいですねぇ。センスが欲しい。
まとめ
リスト表示もあっという間にできてしまいました！
データベースの難しい操作を知らなくても、Adaloは感覚で設定できますね。
標準の画面は、シンプルで洗練された見た目になっています。
センスのある方が使えば、もっと素敵なリストを用意できますよ。
▽ NoCodeアプリ Adalo
