With Kuika's Nested feature, you can drag and drop Table, Gallery View and Flex Grid elements into each other and connect data. In this training content, you will learn how to use data repeater elements within each other with the Nested feature.

Nested structure supports web and mobile applications.

This training content consists of the following topics:

Create nested data elements with the Nested feature.
Connect a data source to elements.
Test nested data elements.

Create Nested Data Elements with the Nested Property

After logging in to Kuika platform, open the project you will work on from the “Apps” screen.

In the “UI Design” (1) module, drag and drop the “Table” (3) element from the “Elements” (2) panel on the left side.
Then drag and drop another Table element inside the Table element.

At this stage, you can drag and drop Gallery View or Flex Grid elements into the Table element instead of the Table element.

At most one Table, Gallery View or Flex Grid element can be added inside a Table element.

Thus, you have created a nested table with nested elements.

Connect Data Source to Elements

After logging into the “Data Sources” module, click on the “+” icon next to “Sources” on the left side.
You can connect the data source with Rest API or C#.
After selecting the data source, click on the “CREATE” button.

Data cannot be bound to nested data elements with other data sources (e.g. MSSQL DB, Swagger, Bluetooth, AI Actions).

Test Nested Data Elements

While in the “UI Design” module, open the “Properties” panel on the right side.
After clicking on the main Table element, select the data connection from the “Data Sources” drop-down menu. (For example; customer list)

Click on the second Table element you added inside the main Table element and select a data connection from the “Data Sources” drop-down menu in the “Properties” panel. This data source should be another list inside the main Table element (for example, select the list of addresses in the customer list).