![見出し画像](https://assets.st-note.com/production/uploads/images/75232417/rectangle_large_type_2_5db1ebb2bd07950c238b5e70866ae1cf.png?width=1200)
【Adalo】AirTableのデータでカスタムリストを作る【ソート・フィルター実装】
こんにちは!ノーコード部の若林です。
今回はAdaloで、AirTableのデータを使ったカスタムリストの作り方をご紹介します。
ソート・フィルタリングの方法も詳しく解説していくので、Adalo初心者でAPI連携を習得したい方は必見です!
準備
External Collectionを作成
カスタムリストを作成する前に、まずはAdaloとAirTableを接続していきます。
今回使用するAirTableのデータはこちらです。
![](https://assets.st-note.com/img/1647593294339-gcrw9QHSVT.png?width=1200)
AirTableにて操作していきます。
![](https://assets.st-note.com/img/1648031353185-2DTCIaMKH9.png?width=1200)
![](https://assets.st-note.com/img/1648032076770-aV8Ry6PfPi.png?width=1200)
Bearer [API key]の部分も後で利用します。
次はAdaloでの操作です。
![](https://assets.st-note.com/img/1648032170198-ZwUn1KFSNA.png?width=1200)
![](https://assets.st-note.com/img/1648032281797-vOvwW9w4u1.png?width=1200)
HeaderのNameにAuthorization、ValueにBearer [API key] を入力。
NEXTで次のページへ進みます。
![](https://assets.st-note.com/img/1648032399501-A7bRKC9XsU.png?width=1200)
![](https://assets.st-note.com/img/1648032459671-E9qxHyXkHG.png?width=1200)
![](https://assets.st-note.com/img/1648032484512-tP4u6QL0ht.png?width=1200)
NEXTで次へ。
![](https://assets.st-note.com/img/1648032512390-j9nVhba1cf.png?width=1200)
![](https://assets.st-note.com/img/1648032527140-7808PLYm63.png?width=1200)
![](https://assets.st-note.com/img/1648032547541-mJ76u6HUmx.png?width=1200)
これでAirTableのデータがDBとしてAdaloに接続されました!
いよいよカスタムリストの作成に入ります。
カスタムリストを作る
それではカスタムリストを作っていきましょう。
![](https://assets.st-note.com/img/1648032985196-9DvA9yZyGZ.png?width=1200)
先程作成したDBをソースにしたカスタムリストを作成します。
リストの作成方法やフッターなどの設定方法は本記事では割愛します。
並び替え(ソート)を行う
データの並びを設定します。
![](https://assets.st-note.com/img/1648033216448-k8qU748Bz0.png)
ADD FILTERをクリックすると、Adalo内のDBをソースとして利用したときとは少し違ったフォームが表示されます。
Name:sort[0][field]
Value:並びの元にしたいカラム名
を入力します。
入力できたらADD ANOTHER FILTERをクリック。
![](https://assets.st-note.com/img/1648033352059-1KD1twLjBw.png)
次は並び順を決めていきます。
Name:sort[0][direction]
Value:ascもしくはdesc
を入力します。
ascは昇順、descは降順です。
ここまでの作業で、データを身長順に並び替えることができました。
プレビューからリストを見てみましょう。
![](https://assets.st-note.com/img/1648033442651-ZLMn2MXlv9.png)
ばっちりですね。
ちなみに先程ascと入力した部分にdescと入力すると、
![](https://assets.st-note.com/img/1648033476135-ePwhacCbLr.png)
身長が高い順(降順)になります。
絞り込み(フィルタリング)を行う
次はデータの絞り込み表示を行っていきます。
![](https://assets.st-note.com/img/1648033531800-ltvdQbDKQa.png)
ADD FILTERをクリックし、
Name:filterByFormula
Value:({フィルターをかけたいカラム名} = '絞り込みたい内容')
を入力します。
絞り込みたい内容の部分にはマジックテキストも利用できるので、検索フォームを実装したい場合にも使えますね。今回は女性のみのリストを作りたいので、マジックテキストは使わず直接入力しています。
![](https://assets.st-note.com/img/1648033710921-XDgHR7MBJq.png)
無事女性のみのリストが完成しました。
残りの年齢順・男性のみ・血液型別のリストも今ご紹介したソートとフィルタリングを使えば作成できるので、是非作成してみてください。
まとめ
いかがでしたか?
API連携というと難しいイメージがありますが、やり方さえ覚えてしまえばAdaloで実現できることの幅が大きく広がります。
是非活用してみてくださいね!
―――――――――――――――――――――――――――――
ノーコード部では、アプリの受託開発を承っております!
「アプリを作ってみたいけれど、どのプラットフォームで開発すればいいのか分からない…」
「自分のデザイン力や技術だけでは不安…」
という方は、是非一度弊社にご相談ください。
企画からデザイン・開発まで弊社で行い、圧倒的な短納期・低価格であなたの理想を実現いたします!
ノーコード部HP(WebFlowで作成)
https://nocode.c3reve.co.jp/
運営会社:シースリーレーヴ株式会社(Wixで作成)
https://www.c3reve.co.jp/
この記事が気に入ったらサポートをしてみませんか?