【Adalo】Airtableを使えばListのuserソートが出来る話

（なぜこれを書いたか）
Adaloを使い始めてびっくりしたことの一つにuserソートができないことがあります。いや、あれですよ、管理画面でやるソートは勿論出来ますよ。ここで言っているのはユーザー画面でユーザーがやるソートの事です。

ネットで調べると「そういう機能が付いてないからね～」という話が多く、たとえそうだとしても、ユーザーがListをソートしたい場面ってあるじゃないですか。

Adaloを使って1年くらい経過したころ、APIを使ってAirtableと接続すればユーザーソートができることを知りました。使い方を知らないAdaloユーザーもいるかも知れないので備忘録も兼ねてまとめておくことにしました。

１．Airtableで簡単な外部データベースを作る

userソートをやるためにはAdalo内部のデータベースでは出来ないので、ここではAirtableを使って外部データベースを作ります。今回作るのは健康診断というテーブルです。（Airtable風に言うと「会社」というBaseに入っている「健康診断」というテーブルです。）

なぜ健康診断というテーブルを作ったかというと、これは「年齢」、「身長」、「体重」という列（フィールド）を持っており、データ型が数字なのでいろいろなソートが出来るからです。（説明に都合がいいので）

このテーブルをAPI接続でAdaloで読み込みます。画面右上の「HELP」をクリックして画面右側の一番下のAPI DocumentationをクリックしてAPI設定画面に移動します。

まず健康診断Tableの中の「List Records」をクリックします。

画面右側にAPI接続のための必要データが表示されるので内容をメモ帳などにコピーしておきます。
必要なのは3項目です。
①Base URL：
②認証部分：（Authorization: Bearer key・・・・・）
③records：Result Keyとして使用します

AirtableのデータベースがAdaloの外部データベース（External Collections）として接続されると下記画像のようにデータベースの内容が表示されます。
※下記サンプルではAirtableで作ったデータベースは「Airtable」という名前にしています。

API接続の細かい説明を大幅に省略しているのでやり方が分からない方がいるかも知れません。AdaloとAirtableのAPI接続に関して詳しい設定を下記ブログで説明しています。分からない方は参照ください。

２．AirtableのデータをAdaloで表示する

AirtableのデータがAdaloで読み込まれたのでそれをAdaloのカスタムリストで表示します。Listは「名前」、「年齢」、「身長」、「体重」の4項目で構成されています。（下記）

下記画像ではソートするためにボタンやインプットなどがすでに配置してありますが、やり方・使い方は順を追って説明します。

今の状態をプレビューで見ると以下のような画面表示になります。このリストをソート可能になるように設定していきます。

３．userソートの設定をする

①Query Parameterの設定
カスタムリストを選択し、画面左側でソートの設定を行います。ただ、ソートをしたいのですが設定には「ソート」という表示は出てきません。（最初はこの画面を見て混乱した。）

Airtableから読み込んだデータはAirtableのやり方でソートの設定を行います。（Adaloのやり方ではありません）
今回は「Filters」の部分にQuery Parameterというのが出てきますのでここで設定を行います。
（補足）
Queryという言葉が頻繁に出てきますが「問い合わせ」という意味です。

(ソートの設定とは？)
Airtableから読み込んだデータにソートをかける場合はQuery Parameterの部分で以下の２つを設定します。
・どの列（field）をソートするか？
・並び順をどうするか？（昇順か降順か）

②ソートをする列（field）を設定する
Query Parameterの一つ目に以下を入力します
Name：sort[0][field]
Value：（ソートする列の名前）この例ではInput（インプット1）を入力
→「年齢」、「身長」、「体重」等を入力します。ただし、具体的な文字列を入力してしまうとその項目だけしかソートできないので、ここでは項目を変数として扱いたいのでValueにはInput（インプット1）を入力。

まず、「インプット」（Text Inputのことです）を2つ用意します。ソート項目として「年齢」、「身長」、「体重」のボタンを作り、その項目が押されたらChange Input Valueでインプットにデータが入るように設定します。

並び順に関しても同様です。まず「昇順」、「降順」というボタンを作り、どちらかが押されたらChange Input Valueでインプット２に「asc（昇順）」か「desc(降順)」が入るように設定します。

③ソートの並び順を設定する
Query Parameterの2つ目で並び順を設定します。
Name：sort[0][direction]
Value：昇順なら「asc」、降順なら「desc」と設定
→この例では昇順、降順を変数として扱うためValueには「input2」を設定
（補足）
昇順→asc（ascendingの略）
降順→desc（descendingの略）

④「年齢」ボタンの設定
「年齢」ボタンを押すとChange Input Valueで「input」（インプット
１の事です）に「年齢」という文字列が入力されるように設定します。

⑤「身長」ボタンの設定
やり方は「年齢」ボタンと基本一緒です。身長ボタンを押すとChange Input Valueを使ってinput（インプット1の事です）に「身長」の文字列が入ります。

４．インプット設定の注意点

今回はインプットを2つ設け、ボタンを押すとソート項目やデータの並び順が入力されるように設定しました。ここでとても重要なポイントがあります。

それはインプットのデフォルト値を何か設定しておくという事です。どういうことかというと、デフォルト値が何も設定されてないと画面を開いたときにリストが何も表示されません。ソートの設定をいじっているとインプットに設定値が入り、リストが表示されるようになります。

データが何も表示されてない画面が開いて、どの項目をソートしますかと言われても困ってしまいますよね。だから何でもいいので初期値（デフォルト値）をインプットに設定しておくことが必要なのです。

（今回のデフォルト値）
とりあえず私は以下のように設定してみました。
インプット１：「年齢」
インプット２：「asc」(昇順)

（余談）
～DropDownではうまく行かなかった～
本ブログではボタンとインプットを使ってソートができるように設定していますが、私が一番最初に考えたのはDropDownリストを配置して、その中からソート項目やデータの並び順を選択するというやり方でした。しかし、DropDownは初期値の設定が出来ないので、どうしても画面を開いたときに何も表示されてない状態になってしまい、これではまずいと考え、初期値が設定できるインプットを使うことにしたのです。

（ソートの並び順を決めるインプット2）
インプット２には初期値として「asc」（昇順：ascendingの略）を設定しました。これにより画面が開かれた時は、「年齢」を「昇順（asc）」でソートしたデータが表示されることになります。

５．userソートをやってみます

以上の設定でuserソートが出来るようになります。2種類の設定例を示します
（例1）下記画像の設定（「年齢」、「昇順」のボタンを押します）
ソート項目　：「年齢」
データ並び順：「昇順」

（例2）
下記画像の設定（「身長」、「降順」のボタンを押します）
ソート項目　：「身長」
データ並び順：「降順」

６．AdaloからAirtableにデータを追加する

このブログを最後まで読んで頂き、ありがとうございます。私が思うに半数位の人がまだ頭がモヤモヤしているのではないかと思っています。それは「Airtableのデータを読み込むことしかできないんですか？Adaloからデータを追加することは出来ないんですか？」という事を思っている人がいるんじゃないかと感じているからなんです。

勿論出来ますよ。Adaloはデータを読み込むだけじゃなく、データをAirtableに追加したり、更新したり、削除したり、何でも出来ます。詳しいやり方は「１．Airtableで簡単なデータベースを作る」で紹介したブログを参照ください。

userソートするときはAirtableのDBからデータを読み込みますが、Adaloでデータを作ってそれをAirtableに読み込ませて、それをまたAdaloに反映させるという事ができます。（すごくまどろっこしいですが、AirtableのDBを1回介さないとユーザーソートできないので仕方ないです。）

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