Nested Repeat Regions

#1

In this tutorial we will show you how to nest database queries. This is useful when you have two separate tables, one containing your categories and another one containing your products. You can nest the products query in the category query and filter it by the category ID.
Other usage case could be a dynamic navbar with dynamic dropdowns, so you nest the dropdown items under each parent item.

Let’s start with the server action. Open the Server Connect panel:

Add new server action:

We call it list_nested then right click the steps:

Add a Database Connection:

Setup your connection, or select one if you have already defined it. Then right click the Database Connection step:

Add a database query. This will be the query, which lists the parent (main) items:

Click the query builder button:

Add your table (in our case this is product categories table):

Add the columns you need:

Click OK:

Then - DISABLE OUTPUT option for this query. It is not needed and we don’t want to see it in the data picker later:

Now, in order to nest the other query we need a repeater step. Right click the category query, which we just created:

And add Repeat:

Select an expression for the repeat:

Select the query as an expression:

From the output menu, select the database fields which you will need to use on the page later:

Then right click steps in the repeat step:

Add a database query. This will be the products query, which we are going to filter by the category ID:

Click the query builder button:

Add your nested table:

And add the columns you need:

Open the conditions tab:

Select the column, which you want to filter the nested query by:

Set the condition to equal and select a value:

Select the ID column, returned by the repeat step:

Click OK:

Save your server action and close the Server Connect Panel:

Back on your page. Here we will need to create 2 repeat regions with data - one for the categories, and another one nested inside it for the products.
First - let’s add a new component:

Add Server Connect:

Then Select Server Action:

Select the list_nested server action and click Select:

On our page we have a row with a column and a title inside the column.
That’s just a sample layout - it can be any kind of layout. In our case we select the Row and add repeat children to it, so it can repeat the columns.
Just add the most suitable repeat option for the main (categories) repeat your layout:

Select the expression for your main repeat:

This must be the Repeat step, under Data in your Server Action:

As you can see it repeats the static content. Double click the titles (or whatever content you are using) to add dynamic data to it:

Click the dynamic data button in the inline editor:

Select your dynamic binding, under the Repeater which we just added. This is the category name in our example:

Then, add new component in this repeater, just after the title:

Select Repeat/Repeat Children (whatever suits your layout) - just make sure you are nesting it inside the main repeater:

Select an expression for it:

This must be the second (nested) query, which is located in the main repeater:

Let’s add some content inside it:

We select a simple paragraph:

Double click the paragraph and click the dynamic data icon in the inline editor:

Select your dynamic data from under the repeater which we just created:

And you are done. The products are nested under each category:

4 Likes
How-to Guides
Get multiple categories and show as for example "badge"?
Swiper - Show navigation arrows on hover and in mobile view
Nested Paged Query with Table Generator?
Nested Paged Query with Table Generator?
#2

@Teodor can you read my mind? Yes that is so useful! Thank you so much!

image

For me this is a huge step forward with these very detailed tutorial/documentations! Why are nested queries useful? Cause of that:

  1. Information for web elements comes more and more in a info view than tables. Cause the classic flat query just has data OR not in the same row. But what if we dont know if we have related data (subquery/nested query) connected to our main query? Then one flat query isnt enough!
  2. Google uses more and more cards, its the right way to display and structure data. Data displayed with tagging/category is in. Tags can relate to different elements and are e great way to visually identify your data.
  3. We could now use card for smth. like events and then show related cities for that line up, or even show a slideshow within that card with multiple pictures which comes from that nested query. Or show emojis or their band members, or maybe hotels you can book near that event. Or even Google map multiple locations per row! :ok_hand:t2: And alot more is possible with nesting!
2 Likes
#3

Thank you, this will be very helpful for organizing my Galleries, Categories and items. Can do tutorials like this motivate subscription upgrades. Your DMXzone YouTube vids got me using Databse for my art products sales…time to step up to the Wappler Pro! Thanks Theo.

3 Likes
#4

All the tutorials we publish here in the #docs category are automatically published also to:

2 Likes
#5

This is a great idea @George thanks so much! And maybe we find smth to make Wappler even more efficient for design!

automatically bumped #6
automatically bumped #7
automatically bumped #8
automatically bumped #9