Discuss

Nested Repeat Regions

On this page

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:

Screenshot_40|690x396

Add new server action:

Screenshot_41|690x396

We call it list_nested then right click the steps:

Screenshot_42|690x396

Add a Database Connection:

Screenshot_43|690x396

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

Screenshot_44|690x396

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

Screenshot_45|690x396

Click the query builder button:

Screenshot_46|690x396

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

Screenshot_47|690x396

Add the columns you need:

Screenshot_48|690x396

Click OK:

Screenshot_49|690x396

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

Screenshot_50|690x396

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

Screenshot_51|690x396

And add Repeat:

Screenshot_52|690x396

Select an expression for the repeat:

Screenshot_53|690x396

Select the query as an expression:

Screenshot_54|690x396

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

Screenshot_55|690x396

Then right click steps in the repeat step:

Screenshot_56|690x396

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

Screenshot_57|690x396

Click the query builder button:

Screenshot_58|690x396

Add your nested table:

Screenshot_59|690x396

And add the columns you need:

Screenshot_60|690x396

Open the conditions tab:

Screenshot_61|690x396

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

Screenshot_62|690x396

Set the condition to equal and select a value:

Screenshot_63|690x396

Select the ID column, returned by the repeat step:

Screenshot_64|690x396

Click OK:

Screenshot_65|690x396

Save your server action and close the Server Connect Panel:

Screenshot_66|690x396

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:

Screenshot_67|690x396

Add Server Connect:

Screenshot_68|690x396

Then Select Server Action:

Screenshot_69|690x396

Select the list_nested server action and click Select:

Screenshot_70|690x396

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:

Screenshot_72|690x396

Select the expression for your main repeat:

Screenshot_73|690x396

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

Screenshot_74|690x396

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:

Screenshot_75|690x396

Click the dynamic data button in the inline editor:

Screenshot_76|690x396

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

Screenshot_77|690x396

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

Screenshot_78|690x396

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

Screenshot_79|690x396

Select an expression for it:

Screenshot_80|690x396

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

Screenshot_81|690x396

Let's add some content inside it:

Screenshot_82|690x396

We select a simple paragraph:

Screenshot_83|690x396

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

Screenshot_84|690x396

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

Screenshot_85|690x396

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

Screenshot_86|690x396