脱!教養ゼロママ

もう恥ずかしくない!教養のあるママを目指してます!

MENU

Lists of lists を使ってみるよ|初心者のアプリ開発|Adalo

f:id:yuka-edu:20211224214857p:plain

こんにちは!ゆかゆかです。

Nocodeツール「Adalo」を使ってlist of lists という機能を設定してみます〜。

こんな便利な使い方ができると、Adalo仲間様から教えていただきました。(神!感謝)

 

Adaloの英語説明があったので、読んでみて、こんな感じかなーと設定してみますね。

 

▼参考にしたAdaloの説明ページ

Lists of Lists - Adalo Resources

 

間違ってたらご指摘くださいませ〜!

 

 

データの準備

Lists of lists を使用するためには、

データコレクション間でリレーションを持たせる必要があるようです。

 

タイミングよく、お問い合わせチャットの方に

「動物病院の患者様情報管理アプリを作りたい」というお問い合わせをいただきました!

(お仲間が増えて嬉しいです!涙)

 

ということで、患者様情報をサンプルにLists of lists を設定いたします〜!

(ペット飼ったことが無いので、データの精度が悪いです・・・)

 

データのリレーション整理

f:id:yuka-edu:20211224221331p:plain

 

今回は3つのデータコレクションを用意します!

  1. 患者(飼い主)
  2. ペット
  3. 診察

 

イラストの吹き出しのように、それぞれ関係を持たせていています。

 

今回のLists of lists ではペットと診察の関連を使っていきます!

 

最終的な出来上がり

f:id:yuka-edu:20211224223011p:plain

最後はイラストのように、

ペットの名前を1つずつ表示しながら、

その下にペットに関連する診察履歴を表示させていきます。

 

では、まずはデータ準備をご紹介します!

データコレクションの設定

患者コレクション

f:id:yuka-edu:20211224221845p:plain

ポイントとしては、ペットと関連を持たせています。

f:id:yuka-edu:20211224223700p:plain

私はペットは複数の患者(飼い主)に属さないとしましたが、

複数の飼い主さんに属する場合は、一番下を選んでください。

 

ペットコレクション

f:id:yuka-edu:20211224223344p:plain

ペットコレクションでも診察との関連を設定しています。

 

診察コレクション

f:id:yuka-edu:20211224223431p:plain

担当医はユーザに登録することとして、

ユーザとの関連項目です。

 

Lists of lists を設定して参ります〜

事前準備

ここはお好みになります〜

 

1. 患者選択画面

Home画面に患者シンプルリストを配置しています。

アクションでLinkを設定して、次の画面に遷移するようにしています。

f:id:yuka-edu:20211225095703p:plain

 

2.  Lists of Lists 画面

お好みですが、ヘッダー部分にHome画面で選択した患者名を表示させています。

ヘッダー部分を選択して、マジックテキストを設定します。

f:id:yuka-edu:20211225095740p:plain

こんな感じで設定できました。

f:id:yuka-edu:20211225095748p:plain

 

Lists of lists 設定

ペット情報を繰り返しつつ、診察リストを表示する設定をします。

 

1. コンポーネント配置

この後のリスト表示に使用するコンポーネントを設定していきます。

  • テキスト:ペット情報を表示する用
  • シンプルリスト:診察を表示する用
  • ボタン:診察を登録する用(無くてもOK)

f:id:yuka-edu:20211225095800p:plain

 

2. List化する

  • No1 で設定したコンポーネントを全部範囲選択
  • 左側に表示される「MAKE LIST」を選択

f:id:yuka-edu:20211225095811p:plain

 

Listにするとこんな感じで表示されます。

選択したコンポーネントがうっすら繰り返して表示されています。

f:id:yuka-edu:20211225095714p:plain

3. リスト設定

No2 でできたList の設定をします。

  • What is this a list of? にペットを選択
  • Filter でCurrent 患者のペットを設定

f:id:yuka-edu:20211225095829p:plain

 

ここのリストでは、前のHOME画面で選択した患者(飼い主)の

ペット情報をリスト表示する設定になります。

f:id:yuka-edu:20211225095838p:plain

 

4. ペット情報を表示

テキストコンポーネントにペット情報を表示させます。

マジックテキストから、Current ペットの項目を選択していきます。

f:id:yuka-edu:20211225095849p:plain

 

表示の内容はお好みです。

私はこんな感じで設定しました〜。

f:id:yuka-edu:20211225095857p:plain

 

5. 診察用リストを表示

No1で用意したシンプルリストを設定していきます。

  • What is this a list of? にペ診察を選択
  • Filter でCurrent ペットの診察を設定

f:id:yuka-edu:20211225095903p:plain

 

表示させる項目はお好みです。

マジックテキストで診察項目を表示してください。

今回は不要な表示をOffにして、シンプルにしてみました。

f:id:yuka-edu:20211225095909p:plain

 

以上で設定が終わりました〜!

ではでは、プレビューして見ましょう!

 

プレビュー

まずはHome画面で患者を選択します。

f:id:yuka-edu:20211225095916p:plain

 

続いて、患者(飼い主)に関連するペット情報と

そのペットに関連する診察情報を表示しました〜!

f:id:yuka-edu:20211225095922p:plain

 

まとめ

無事にペットと診察の情報を繰り返し表示できました〜!

Lists of Lists この使い方であっていますかね?

もし違っているなどありましたら、チャットからお知らせいただけると参考になります!

 

ボタンは配置しただけですが、診察フォーム画面を用意して、

リンクを貼れば便利に使えそうです。

yuka-edu.hatenablog.com

 

 

今回の内容が皆様のアイディアにつながると嬉しいです。

 

▼無料でも意外と使える Nocode開発ツール Adalo

www.adalo.com