見出し画像

【Adalo】Make Listの機能を別のノーコードClickで使うにはどうしたらよいか?

(なぜこれを書いたか)
Adalo独特のリストの作り方にMake Listという使い方があります。既にリストが有って、そのリストのデータを編集して別のリストを作る機能です。最初使い方が分からず、理解するのに時間がかかりましたが、覚えるととても便利な機能です。

私はAdaloの他にたまにClickという国産NoCodeでアプリを作ったりするのですが、Adalo独自のMakeListをClickで使うにはどうしたらよいかというのが今回のテーマです。

Clickは機能的にAdaloに非常に似通っており、使い方が分からないときはAdaloのマニュアルを読んで想像しながら使っています。しかしMakeListの機能は持ち合わせてないので代わりの方法が無いか探してみました。

1.例題を作ってみました

話が漠然としていて、よく分からないという人が多いと思うので例を挙げます。先日、「いくらデータを入力しても表示範囲がいつも一定なグラフを作る」というブログをnoteで作りました。このグラフを作るときにMakeListの機能を使いました。

(システム内容)
1月から5月までの各月の最高気温のデータベースが有ります。グラフに表示するのはいつも5ヶ月分だけで新規データが入ってくると一番古いデータが削除されるというシステムを作ります。

今回はデータがすでに5か月分入っているので一番古い1月のデータを削除したら6月のデータを追加するということをやってみます。

(どこでMakeListを使うのか?)
Make Listはデータベースから一番古いレコードを1個だけ抽出してリストを作るときに使います。(データ数が5個に達していたらその抽出したリストを削除するActionを設定します)

①データ数が5個あったら1個削除する(Delete)
②新規データを1個追加する(Create)

MakeListは①のActionを実行する時に使います。

2.Make Listを使ったアプリの設定例

(データベースの内容)
データベースに1月~5月までの各月の最高気温のデータが有ります。「気温変化」という名前になっています。

画像1

(Adaloの画面)
・Home画面:カスタムリストを配置し、データを表示します
・画面2ページ目:「Input」という入力画面(月と温度を入力)

画像2

(Make Listの使用例)
データを入力する「Input」画面で2つのインプットとボタンを選択すると左画面に「Make List」の表示が出るので選択します。

画像3

(Make Listで別リストを作ります)
もともとの「気温変化」データベースとは別のリストを作成します。ここで何がしたいかというと一番古いデータを1個だけ表示するリストが欲しいのです。

「ソート」を使ってデータ該当するデータを取得します
①データを「一番古い→一番新しい」順に並べます。(Sorting)
②表示個数は1個とする。(Maxmum number of items)

画像4

(ボタンにActionを設定します)
MakeListを設定する時に使ったボタンに以下の設定を行います
①リストのデータをDelete(データ数が5個以上あった場合)
②新規データを追加(Create)
③Home画面に戻る

画像5

「Create」部分は以下のように設定します。
「インプット」に入力された「月」と「最高気温」の値をデータベースに追加します。

画像6

設定は以上です。予定通り動作するか試してみましょう。

3.動作確認する

(現在のデータベース内容)
現在は1~5月までの5か月分のデータが入っています。データを入力して動作確認します。

画像7

新規データとして6月のデータを入れてみます。(6月、32℃)

画像8

データが追加されたところです。一番古い1月のデータが削除されて、6月の新規データが追加になりました。予定通りの動きになりました。

画像9

データベースを確認すると1月のデータが削除され、6月のデータが追加になっていました。(いつも5ヶ月分のデータを保持するシステムです)

画像10

4.Make Listの代替案を考えた

Make ListはAdalo独自のやり方なのでもっと一般的な別なやり方が無いか考えてみました。

結論から言うとデータを入力する「Input」画面にもカスタムリストを1個配置し、そのリストの中にボタンを追加すればMake Listと同等の機能が実現できました。

画像11

(補足)
なぜそんな結論になったかというと、「気温変化」というもともとのデータベースを基に別リストを作るときに「Current〇〇」という形でデータを読み込む必要があって、どうしてもそのやり方が最初分かりませんでした。

Input画面にデータベースのデータが連携されているわけではないのでボタンのAction設定で「Current〇〇」が出来るわけがないのです。だったらデータベースと紐づけたカスタムリストを持って来て、その中にボタンを置けば直接データを引っ張ってこられるので「Current〇〇」が実現できるだろうと考えたのです。

ネットを見てやったわけではないんのでひょっとしたらもっと別なやり方があるかも知れません。しかしこのやり方でうまく行きます。

(カスタムリストにMakeListの時やった同じ設定を行う)
MakeListの設定と同じ設定をカスタムリストに対して行います。

①カスタムリストは上下方向に縮めて1行分の表示だけにします。
 (Title,Subtitleも不要なので削除します)
②ボタンをカスタムリストの内部に配置します

③カスタムリストを選択した状態で一番古いデータを1個だけ表示するリストを作る(下記画像)

画像12

(参考)
~「Current 気温変化」が表示されました~

今回ボタンをデータベースと紐づいているカスタムリストの中に配置しました。ボタンにDeleteのActionを設定しようとすると「Current気温変化」という項目が表示されました!

カスタムリストの中にボタンを配置しないとこの項目は表示されません。以前はLogged in userしか表示されず設定が出来ませんでした。

画像13

(Make Listと同じActionを設定します)
①(データ個数が5個以上あったら)一番古いデータを削除する(Delete)
②新規データを追加する(Create)

画像14

③新規データの追加Action
インプットに入力された値(月、温度)がデータベースに追加になります

画像15

5.Make List代替案の動作確認します

現在4月~8月までの5ヶ月分のデータが入っています。ここに新規データを追加します。

画像16

9月のデータを追加してみます。(9月、32℃)

画像17

一番古い4月のデータが削除されて、9月のデータが追加になりました。

画像18

データベースを見ると予定通り、4月データが削除され、9月データが追加になっています。(いつも5日別分のデータだけ保持されるシステムが出来ました)

画像19

解説は以上です。

(結論)
MakeListの代替案はカスタムリスをデータ入力画面に1個持って来て、そこにボタンを配置するというやり方です。

「おい、ちょっと待てよ!Clickはどうなっているんだ、Clickは? Clickの画面はどこにあるんだ?」

ご質問はもっともですよね。これを読んでくれるのはAdaloユーザーの方だと思ったので、途中から方針変換してAdaloだけの画面だけにしました。

Clickでも画面はほぼ同じなので上記のやり方をしてもらえばMakeListと同等の機能を作成することができます。

というか、Clickは無料範囲ではデータベース100行しか保存できないので私は最初Clickでアプリを作って、それをAdaloで同等の機能を作り上げたというのが実際の所です。(話が反対なんです)

(関連ブログ)

(過去の投稿はこちら)
https://note.com/mucho3/n/n632515d056d1


この記事が気に入ったらサポートをしてみませんか?