ListViewの使用
大部分の内部ツールでは、自分のデータを閲覧したり操作したりすることができます。テーブルと同様に、ListViewを使用すると繰り返し表示できる複数のデータ行を作成することができます。ListViewの外観と動作全体を開発者が定義します。
![scroll-list.gif 1080](https://files.readme.io/6495cb1-scroll-list.gif)
ListViewとは
ListViewは最上位のRetoolコンポーネントで、コンテナと似ています。リストビューの中に他のコンポーネントをネストしたり、繰り返す回数を制御したりすることができます。
このページで行うこと
このチュートリアルでは、クエリー結果の表示やフィールドの追加を行ったり、ListView内の項目を削除できるようにしたりしていきます。
ListViewを使用する前に、まず結果をテーブルに表示してみることが参考になるかもしれません。本書では、クエリーを実行してテーブルにデータを表示する方法を知っていることを前提としています。
新規作成したすべてのRetoolアプリにおいてデフォルトで利用可能な「onboarding_db」リソース内のPostgresのproducts
テーブルを使用してシンプルなListViewを作成していきます。
クエリー結果をListViewに表示する
Retoolでアプリを新規作成すると、空白のキャンバスが表示されます。最初に、ListViewコンポーネントをキャンバスにドラッグします。画面右側のサイドバーにListViewコンポーネントがない場合、「Search components」バーで検索することができます。
![listview-scroll.gif 1080](https://files.readme.io/9f424a1-listview-scroll.gif)
デフォルトでは、ドラッグした新しいListViewにはデータが入っていません。ListViewに画像をドラッグしてみましょう。その画像の表示は3回繰り返されるはずです。
![image-drag.gif 1080](https://files.readme.io/bd595c8-image-drag.gif)
操作は面白いですが、それほど参考にはなりません。データを表示しているので、クエリー結果に応じた行数にしたい場合もあります。前置きはこれくらいにして、いくつかのクエリーを作成してみましょう。
ListViewの行数の設定
ListViewでは、表示する行数を設定する必要があります。products
テーブルを使用して、行数を返すnum_products
という名前のクエリーを作成してみましょう。
![Screen Shot 2020-10-04 at 3.55.40 PM.png 2920](https://files.readme.io/a403c2a-Screen_Shot_2020-10-04_at_3.55.40_PM.png)
表示する行数をこのクエリーの結果である値に設定しましょう。
![Screen Shot 2020-10-04 at 4.08.20 PM.png 554](https://files.readme.io/a2ef008-Screen_Shot_2020-10-04_at_4.08.20_PM.png)
ListViewの行数を設定すると、さらに多くの猫が表示されるはずです。ListViewにドラッグした最初の画像をクリックしましょう。「Image URL」フィールドには固定値が入力されています。そのため、ListViewでは同じ画像が繰り返し何度も表示されるのです。では、products
テーブル内の各エントリーに特定の画像URLを値として設定するにはどうすればよいのでしょうか?
最初に、products
テーブルの中身を抽出するためのクエリーを作成しなければなりません。クエリーの名前はproducts
とします。
![Screen Shot 2020-10-04 at 4.17.05 PM.png 2374](https://files.readme.io/25c65eb-Screen_Shot_2020-10-04_at_4.17.05_PM.png)
変数i
の使用
i
の使用Retoolでは、変数i
によってListView内の項目のインデックスを取得することができます。これにより、各行に異なる画像を表示することができます。以下の例では、変数i
を使用して、インデックスがi
の行のimage_url
にアクセスするよう設定されていることが分かります。 他には何もする必要はありません。
![Screen Shot 2020-10-04 at 4.30.27 PM.png 1774](https://files.readme.io/83aaf60-Screen_Shot_2020-10-04_at_4.30.27_PM.png)
もう少し面白いことをやってみましょう。products
テーブルのその他の列を使用して、ListViewの各項目に情報を追加してみましょう。
![Screen Shot 2020-10-04 at 4.37.11 PM.png 1988](https://files.readme.io/417dd0a-Screen_Shot_2020-10-04_at_4.37.11_PM.png)
ユーザーがproducts
テーブルから項目を削除できるようにしたいとします。ListViewの最初の項目の隣にボタンをドラッグしましょう。
![Screen Shot 2020-10-04 at 4.52.26 PM.png 1764](https://files.readme.io/4d1aac9-Screen_Shot_2020-10-04_at_4.52.26_PM.png)
変数i
を利用すれば、項目を削除できるようにするためのクエリーを簡単に作成することができます。クエリーの名前をremove_product
とします。このクエリーでは、i
番目のエントリーをproducts
テーブルから削除するようにします。ListView内のコンポーネントがクエリーをトリガーしたときに、i
の値はそのコンポーネントがある行のインデックスに置き換わります。今回の例では、そのコンポーネントはボタンになります。
![Screen Shot 2020-10-04 at 4.50.07 PM.png 1638](https://files.readme.io/cab0e57-Screen_Shot_2020-10-04_at_4.50.07_PM.png)
products
テーブルからレコードを削除したときに、テーブルを再度読み込んで新しいデータが正確に表示されるようにしたいとします。そのためには、このクエリーのonSuccess
トリガーに、products
クエリーを追加します。
![Screen Shot 2020-10-04 at 4.54.33 PM.png 2094](https://files.readme.io/76c037f-Screen_Shot_2020-10-04_at_4.54.33_PM.png)
最後に、このクエリーを、ドラッグしたボタンの「On Click」ハンドラーに関連付けましょう。ボタンを選択し、画面右側のパネルで、そのボタンがクリックされたときに実行するクエリーとしてremove_product
を追加します。
![Screen Shot 2020-10-04 at 4.56.01 PM.png 966](https://files.readme.io/bf20abf-Screen_Shot_2020-10-04_at_4.56.01_PM.png)
Updated almost 3 years ago