Nested Repeat Regions

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:

6 Likes

@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!
3 Likes

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

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

2 Likes

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

Hi I am experiencing some issues when trying to implement this tutorial.

I have a main table that has information for different elements and a secondary table that holds tickets related to records from the main table. What I would like to to do is to display the records of the main table in a regular data table and nest the count of the ticks table associated to each row in a column called “# of tickets”.

As seen in he image above I am able to display the records from the main table with no problems, but the issues comes when I try to nest the record count from the secondary table.

What I have done is:

  1. add a database query for the main table

  2. add the “repeater step” selecting the query as an expression created in step 1 and select the database fields.

  3. add a “database query” inside the “repeater step” for my secondary table and filter the nested query by the ID column, returned by the repeat step

Problem:
The problem I am experiencing is once In the page where the child repeat region is, I want to select the expression with the secondary table, only the information for the main table shows within the repeat step

I will appreciate any help, I have been trying to work on this for the past few days and nothing is working.

Thanks

Juan

Well you need to create a repeat region from this repeat first.
Then inside it create another repeat from the nested query. The nested query will appear under the repeat in the data picker, it should not be picked from under server connect component.

1 Like

@Teodor, thanks for getting back to me so quickly! Yes, I provided the wrong information. I did repeat region from this repeat first, see image below:


I guess the problem I am experiencing is that the table within the The nested query shows the main table rather than the secondary table> I am just now sure what I am missing to show the secondary table data here.
Thanks

I don’t quite understand what do you mean with that.
Have you followed the tutorial EXACTLY as explained to see what the logic is and how to use nested queries?
If you expect table generator to offer you to generate nested tables with the queries functionality that’s not the case.

Hi @Teodor, will re-do the tutorial again, but just so I understand, I do not need a queries functionality, like what I outlined in step 1 for the main table, but just have a nested table?
Thanks again for your help

Sorry i still don’t understand what you mean.
You need to have a repeat region created from the repeat (main query) step from your server action.
Inside it you create another repeat region from the nested query from your server action.

Just recreate the tutorial. It explains everything you need …

1 Like