Support for Nested ListViews

I've read the guide on working with ListViews and it's working great for a single list. However right away we had a need for nested lists. The way array indexing currently works is the variable i is magically available inside a ListView. This breaks in a nested ListView where you would need another variable to index the inner list (j by convention).

Is there a workaround? And if not, can this be escalated to a feature request?

6 Likes

Hi, I am also looking for this functionality. This old forum: Improving the list view component
indicates that they had no plans to implement, but I would really appreciate this feature!

2 Likes

This is still the case unfortunately, supporting nested listviews is a non-trivial change to implement without potentially breaking some existing apps. We do plan on releasing a new and improved versions of many components (just rolled out a Text v2), while depreciating creation of the old versions. I'm not sure when we'll be moving on to the listview in that project but there are a few other components we'll be going over before then. Until then, I'll move this over to a feature request

We just got hit by the nesting listview limitation. Any idea about a workaround?

1 Like

I am also interested in nested list views.

Hey folks! We are actively working on allowing List Views to be nested. This will likely start rolling out sometime next month.

5 Likes

Any update on this? I don't see any nested option.

You can do this now. It does have some performance problems which I have reported.

I couldn't understand this tutorial at all.

You mean the part about all of the ri an i and where they go and such? Yeah, I feel you! Took some trial and error for me to get it.

Take this example (forgive the ugliness - a never completed app with test data):

The Text component is populated like this: {{qryJobsSelect_JSON.data[i].job_name}}

The Text component in the nested ListView looks like this:
{{qryJobsSelect_JSON.data[ri[0]].tasks[i].task_name}}

Where my data looks like this:

	"project_name": "QB Tutorials",
	"project_type": "Video Caption",
	"project_id": 19,
	"job_id": 69,
	"job_name": "Caption Screen Recording 2022-03-01 at 8.02.26 AM.mov",
	"job_due": null,
	"job_start": null,
	"job_end": null,
	"job_location": null,
	"tasks": [{
		"job_id": 69,
		"task_id": 145,
		"task_name": "Caption Video",
		"task_start": null,
		"task_end": null,
		"notes": null,
		"contractor_id": null,
		"contractor_name": null,
		"location": null,
		"task_type_id": 3,
		"task_type": "Transcribe Video",
		"caption_tools_id": "vB3vRxTj8",
		"on_job_board": null
	}, {
		"job_id": 69,
		"task_id": 146,
		"task_name": "Post Video Caption Processing",
		"task_start": null,
		"task_end": null,
		"notes": null,
		"contractor_id": null,
		"contractor_name": null,
		"location": null,
		"task_type_id": 4,
		"task_type": "Post Video Transcription Processing",
		"caption_tools_id": null,
		"on_job_board": null
	}]
}]

Hopefully dissecting this example gives you some clues for your application.

can you do conditional rows? Ex. Trying to do a communication view where incoming is on left side, outgoing is on the ride side.

Use two JSON SQL queries to filter out the Incoming and Outgoing from your data and use those queries as the source for your ListViews.

yeah I have that, but would I need two separate list views, or is there someway to use conditional logic to have them display in a single list view?

To do the two list views you have two JSON SQL queries, one is for Incoming and it the source of your Incoming ListView and another query and ListView for Outgoing.

You could do one ListView and simply indicate if it is Incoming or Outgoing, maybe display in different colors to help your user differentiate.

If I am not duplicating you correctly and thus sending you irrelevant advice, go ahead and share a screen cap - a picture and thousand words and all that.