How to use Listview component

PatrickMast · August 10, 2023, 6:59pm

Hello,

I have this array:

[
  {
    "Name": "James Smith",
    "City": "Las Vegas",
    "Age": 32
  },
  {
    "Name": "Patricia Johnson",
    "City": "Chicago",
    "Age": 23
  },
  {
    "Name": "Robert Williams",
    "City": "Miami",
    "Age": 26
  }
]

I'd like the app to show 3 Listview-containers where each container has 3 text elements with the Name, City and Age printed in.

So, the Listview looks like this:

Thanks

Patrick

mbruijnpff · August 10, 2023, 8:45pm

Looks like you’ve nailed it? Or what is the issue?

jocen · August 11, 2023, 2:33am

Hi @PatrickMast, you have to edit each component in the container to reference the data you are adding in the listview.

In the screenshot below, query2 contains the array you have as an example. I have them in the Item keys property (still not sure if this is best practice).

But for the referencing them in each component in the listview, you can use the following:
example: Name: {{ listView1.data[i].retoolInternal_rowKey.Name }}

Screenshot 2023-08-11 at 12.29.52 pm

Cheers

PatrickMast · August 11, 2023, 4:49am

Hey @mbruijnpff,

The image I used in the post is a photoshopped image, just to show where I want to go.

Patrick

Kabirdas · August 15, 2023, 1:44am

I would +1 @jocen's post here @PatrickMast! Does it work for you?

AnsonHwang · August 15, 2023, 2:45am

PatrickMast:

[
  {
    "Name": "James Smith",
    "City": "Las Vegas",
    "Age": 32
  },
  {
    "Name": "Patricia Johnson",
    "City": "Chicago",
    "Age": 23
  },
  {
    "Name": "Robert Williams",
    "City": "Miami",
    "Age": 26
  }
]

Here is my solution. I use ri instead of ri, using ri you can deal with nested listview.

Here is office docs for the nested listview, it also have a link to download a demo app json to for your reference.