おすすめ記事

おすすめ記事一覧

Adalo Resource・リスト(スクリーンとコンポーネントセクション)について

Adalo - Build Your Own No Code App

こんにちは。みなさまいかがお過ごしでしょうか。外の気候も徐々に暖かくなり、夏日に近いようなポカポカの日もありますね。さて本日の記事ではノーコードツールAdalo Reourceのスクリーンとコンポーネントセクションより「リスト」について解説します。それでは早速いってみましょう!

リスト

ほぼすべてのアプリには、少なくとも1つの画面にリストが存在します。Tripsのリストであろうと、ユーザーであろうと、会話であろうと、本当に何のアプリにおいてもです。

リストコンポーネントは、データベース内の特定のコレクションのリストを表示します。 アプリのデータベースにバケーション場所コレクションがある場合、リストを使用してバケーション場所の一部またはすべてを画面に表示することができます。

リストの構成要素には6つの種類があります。

1, シンプルリスト

2, カードリスト

3, イメージリスト

4, カスタムリスト

5, ホリゾンタルリスト

6, バーティカルリスト

最初にリストコンポーネントを画面に追加するとき、左パネルの最初のオプションは、「これは何のリストですか?」です。 ここでは、 コンポーネントが接続するデータベースのコレクションを選択 できます。そこから、それぞれのリストをコレクションにバインドすることができます。

リストのソートとフィルタリング

このセクションの説明は リスト内のデータの表示方法の変更 についてです。

アプリで特定のサブセットのみを表示するようにしたい場合は、データフィルタを作成することができます。

たとえば、以前に取り組んでいた、旅行の行き先を閲覧できるアプリを考えてみましょう。すべてのデータを多数のプロパティを持つ旅の記録に入力し、そのうちの 1 つは、旅行が公開されているかどうかを記述する True/False 基準です。アプリでは、公開されている旅行のみを表示したいとします。また、旅行を低価格から高価格に並べ替えたいとします。動画では下記の1から5のステップのうち、4と5を紹介します。

1, リストを挿入します。
2, リストのデータベースコレクションを選択してください。
3, カスタムフィルタを挿入するには、「別のフィルタを追加」をクリックします。
4, フィルタをどのプロパティに依存させたいかを選択します (この場合は Public)。
5, フィルタリングしたい物件の条件を選択します(True/False、Between、Includes、Excludesなど)。
6, 並べ替えの下で、リストをどのように並べ替えるかを選択します(この例では、コストを低から高へ)。

フィルタリングの後、公開としてタグ付けされた旅行のみがプレビューに表示されました。

カスタムリストの作成

カスタマイズ性を高めたい場合は、 シンプルなコンポーネントを使用して独自のリストやボタンを作成 します。

カスタムリスト

カスタムリストを作成するには、あらかじめ作成されたリストコンポーネントのいずれかを使用する代わりに、シンプルなコンポーネントからリストオプションをドラッグして画面を構築します。

1, リストをクリックして、「コンポーネント」と「コンポーネントの追加」を選択します

2, 新しいコンポーネントをドラッグして配置

3, リストのすべての要素を動的に変更します

リストのリスト

 Adaloの強力な機能の1つは、リストの中にリストを作成すること です。 例えば、旅行計画アプリで、旅行の日にちをリストアップして、その日のアクティビティのリストを表示する画面が欲しいとします。

リストの中にこのリストを作成するには、ベースレベルから始めて、次にビルドアップするのがベストです。 この例では、データベースには3つのコレクションがあります。Trips、Days、およびActivitiesです。 Days は Trips とのリレーションシップ・プロパティを持ち、Activities は Days とのリレーションシップ・プロパティを持ちます。

1, シンプルリストを画面に追加します
2, リストをアクティビティのリストに設定します
3, シンプルリストの上に、日のヘッダーとして機能するテキストコンポーネントを追加します
4, アクティビティリストの下部にアクティビティの追加ボタンを追加します
5, ここで、シンプルなリスト、ヘッダーのテキスト、ボタンのコンポーネントを選択します
6, 左側のパネルで、「リストを作成」ボタンをクリックします
7, 左側のパネルで、新しいリストを「日」のリストに設定します
8, フィルタを現在の旅行日に設定します
9, ヘッダーのテキストをクリックして、現在の日の名前であることにマジックテキストを設定します
10, シンプルリストをクリックして、フィルタを現在の日中の活動に設定します

まとめ

いかがだったでしょうか。今回の記事ではノーコードツールAdaloのAdalo Resourceよりスクリーンとコンポーネントセクションにある「リスト」について解説しました。ところどころにYouTubeの解説動画を入れましたので記事を読み終えた後にそちらで具体的な操作方法をご確認いただければ幸いです。それではまた別の記事でお会いしましょう。See You Soon!

 

 

 

 

 

岡澤克信

岡澤克信

自動車評論家
主に自動車業界のDXというテーマで自動車業界で使用され
ているウェブサービスを紹介







関連記事

  1. 記事作成

    【2020年確定版】ノーコードツールWebflowの最強説を唱える

  2. 記事作成

    Bubbleの使い方を学ぶ、アプリケーションとデータの所有権

  3. 特集記事

    【Webflow】機能や料金を徹底比較!おしゃれなWebデザイン作成ツール!

  4. 記事作成

    Bubbleのビジュアルエディタの一般原則について解説!!

  5. canva_log

    Canva

  6. top_image

    SaaS導入事例10選!スタートアップの業務効率化特集! インタビュー先:株式会社Hajimari

  7. Adalo Resource・Google Admobとカレンダー(スクリーンとコンポーネントセクシ…

  8. 記事作成

    Bubbleのプラグイン特別編を解説してみた!!

  9. Adalo Resource・地図と各種グラフ(スクリーンとコンポーネントセクション)について

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. Collaboration

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. 飲食店 会計
  4. Productivity
  5. 記事画像
PAGE TOP