見出し画像

【Adalo】Airtableのデータを読み込んだ時のfilter、sortの設定について

(構成)
第1回:AdaloからAirtableのデータを取得(Read)
第2回:AdaloからAirtableにデータを追加(Create)
第3回:AdaloからAirtableのデータを更新(Update)
第4回:AdaloからAirtableのデータを削除(Delete)
第5回:AirtableのデータをAdaloで読み込んだ時のfilter、sort設定※本編

(なぜこれを書いたか)

私はAdaloの外部データベースとしてAirtableを使っています。初めて使ったとき、読み込んだデータにフィルターやソートをかけようと思ったのですが、出来ませんでした。いつものAdaloのメニューと違った表示が出て、やり方が分からなかったのです。

AirtableのデータをAdaloで読み込んでフィルターやソートをかける場合はAdaloのやり方ではなくてAirtableのやり方で設定を行うという事が後で分かりました。(Adalo Resourcesにはちゃんと書いてあった。)ちょっと分かりづらい部分があったので自分の備忘録もかねて要点をまとめました。

1.Airtableでデータベースを作る

以下のような「海外旅行」というテーブル(データベース)を作りました。これを使って以下説明していきます。
「company(旅行社)」、「tourName(ツアー名)」、「cost(費用)」の3つの項目があります。

画像1

Airtableでは列の見出し部分を「field name」と呼んでいます。filterをかけるときにこの名前は良く出てきますので覚えておいて下さい。(この例では「company」、「tourName」、「cost」がfield nameになります)

(余談)
「何で日本語でデータベースを作らないんだ!」というご不満もあろうかと思います。Adaloの入力で日本語が文字化けするのでいつもは日本語をメモ帳で作ってコピーペーストしているのですが今回はその回数が頻繁なので面倒なのですべて英字で統一しています。(ちょっとした変更、誤字も英字なら文字化けせず、気兼ねなく直せます)

画像2

2.AdaloでAirtableのデータを読み込む

以下はAirtableの「海外旅行」というデータベースをAdaloで読み込んだところです。(データの読み込みの方法は以前のブログで説明しています。)

画像3

プレビューで表示すると以下のようにすべてのデータが表示されます。これも謎ですが、airtableからデータを読み込むとデータの並びがバラバラになってしまいます。(元データはA,B,C,D・・・と順番に並んでいました)

以下でfilterを使って条件に合うデータのみを表示してみます。

画像4

3.filterの設定を行う

カスタムリストを選択して画面左のFiltersをクリックすると、いつもは出てこない「Query Parameter」という項目が出てきます。NameとValueという欄に設定項目を入力します。

画像5

4.ハワイのデータだけを表示する

例:「ツアー名(tourName)」が「ハワイ(Hawaii)」のデータだけ抽出

(間違った設定)
NameとValueを以下のように設定したのですがうまく行きませんでした。
 Name:tourName
 Value:Hawaii

画像20

(正しい設定)
何度やってもダメだったのでAdalo Resourcesを見たら設定の方法が説明されていました。Adaloのやり方ではなくairTableのやり方で設定を行うようです。これは絶対考えても分からないやり方でした。
 Name:filterByFormula
 Value:({tourName}='Hawaii')

画像7

この設定を行ってプレビューするとハワイのデータだけが表示されるようになりました。

画像8

5.Adalo Resourcesをよく読む

Adalo Resourcesの以下の部分にairtableから読み込んだデータのfilterのかけ方が説明されています。これを最初に読んで理解してからでないとフィルターもソートも使えません。

①Adaloの説明ページ
Filtering Airtable Lists(airTableデータのフィルタ―のかけ方)

画像10

②airTableの説明ページ
any formula supported by airtable

画像10

6.filterの設定方法

airTableのフィルタ―の設定は以下のような決まりがあります。

①Query parameterのName部分はいつでもfilterByFormulaとする
②( )の中に式や引数を入れる
・・・関数や演算式、論理演算式には( )が付いており、( )の中に式や引数を入れます。(例:AND( )、OR( ))

③field name(データベースの列の見出し部分)は{ }で囲む
④文字列部分は' '(シングルクォーテーション)で囲む
 (※数字の場合は囲まない)

(例題)
1.ツアー名(tourName)がハワイ(Hawaii)を抜き出す
Name:filterByFormula
Value:({tourName}='Hawaii')
→式は必ず( )で囲みます。ただ、関数や論理演算式が無いものは( )が無くても動きます。

2.ツアー名(tourName)がハワイ(Hawaii)でないものを抜き出す
論理式 NOT( )を使います。( )の中に式を入れます。
Name:filterByFormula
Value:NOT({tourName}='Hawaii')

3.ツアー名(tourName)が「ハワイ」か「ローマ(Rome)」を抜き出す
論理式OR( )を使います。( )の中に式を入れます。
Name:filterByFormula
Value:OR({tourName}='Hawaii' , {tourName}='Rome')

4.ツアー名が「ハワイ」で、費用(cost)が18万円未満のものを探します
論理式AND( )を使います。( )の中に式を入れます。
Name:filterByFormula
Value:AND({tourName}='Hawaii' , {cost}<18)
※条件が3つ必要な場合は( )の中に式を3個記入します。

その他、様々な論理式、関数がairTableに用意されているので自分が使いたい式をairTableの説明書から探して設定を理解した上で使ってみて下さい。

7.filterを変数で設定する

上記6.で説明したfilterの設定のやり方はAdaloの設定画面を開かないと出来ないのでアプリのユーザーが任意の設定で絞り込みをすることが出来ません。そこで変数を使って任意のデータを入力できるようにしてみます。

(例題)
ツアー名(tourName)がパリ(Paris)のデータだけ絞り込んでみます。

(やり方)
DropDownでツアー名が選択できるようにします。AdaloにDropDownのツアー名選択肢のデータベースを作ります。

以下では「sample」というデータベースを作り、「tourName」(ツアー名)というプロパティを作りました。ここに旅行の行先(ツアー名)を登録します。

画像11

「sample」データベースの中身。tourNameというプロパティ(列)に行先のデータを入れた。

画像12

(Filterの設定)
マジックテキストを使って上記で作成したDBのプロパティ名を変数として持って来ます。
 Name:filterByFormula
 Value:OR{tourName}='(sample tourName)'}
(sample tourName)が変数です。
sample:「データベースの名前」
tourName:「フィールド名」

画像15

~動作確認~
DropDownで「パリ(Paris)」を選択し、Parisだけを表示します。

画像13

パリ(Paris)だけが表示されるようになりました。

画像14

上記は変数を1つ使った単純な例ですが、ANDやORを設定する場合はフィールド名が複数必要になるのでその個数分DropDownを作成して変数で選択できるようにして下さい。

8.ソートの設定

airTableから読み込んだデータをソートする場合、「ソート」という項目は表示されていません。一瞬焦りますが、Adalo Resourcesを見るとFilterの設定を使ってソートが出来ると書かれています。

画像20

(Adaloの参考資料)
Sorting Airtable Lists

(設定する項目)
①ソートをするfield(列)を設定(どの列でソートをかけるか?)
 Name:sort[0][field]
 Value: (ソートをかける列の名前)
②データの並び順(昇順、降順)
 Name:sort[0][direction]
 Value: asc(またはdesc)
※昇順:asc (ascendの略)
 降順:desc (descendの略)

例題:
airTableから読み込んだ「海外旅行」データで、旅行社(A,B,C,D・・・)の列の順番がバラバラなのでここを降順にソートしてみます。

画像16

まず、どの列(field)でソートをかけるか設定する。(1つ目の設定)

画像17

次にソートの並び順(昇順か降順か)(2つ目の設定)
※以下の例では「降順」(desc)にしています

画像20

旅行社名が降順にソートされました。(下図)

画像20

今回はairTableのfilterのさわり部分だけを書きました。とても全部は紹介できないですが、一番重要なのはairTableのルール(Formula)に沿って設定を行うという事です。これは考えても分からないので、Adalo ResourcesやairTableの解説をよく読まないとだめだという事です。

(構成)
第1回:AdaloからairTableのデータを取得(Read)
第2回:AdaloからAirTableにデータを追加(Create)

第3回:AdaloからAirTableのデータを更新(Update)

第4回:AdaloからAirTableのデータを削除(Delete)

第5回:airTableから読み込んだデータにfilter、sortをかける※本編

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

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