Nesting Components and Data

Overview

Nesting components and Data is the act of stacking a component or component data inside another component or data array An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects..

In Unqork, nesting components can be thought of in two ways:

  • In the Module Builder, you'll nest components by placing one component inside another. For example, placing Text Field components inside a Panel or Columns component.

  • In submission data, component data could nest inside the array of another component. For example, the values of Text Field components might nest inside a Vega Table component's array.

To learn more about each method of nesting, click on the tabs below:

Nesting in Module Builder and Express View

Nesting in the Module Builderis the act of placing one component inside another. Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. commonly nest components inside Panel, Columns, and the Vega Table component.

Below an example of three Text Field components nested in a Columns component:

A static example displaying three text field components nested in a columns component.

The Module Outline to the left of the Module Builder displays the nested Text Field components inside the Column component. This view helps you contextualize and organize your module.

To learn more about the Module Builder, view our Introduction to the Module Builder article.

Here’s how the example looks in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. The three Text Field components display inside of an invisible Columns component:

A static image of Express View displaying three text field components nested in an invisible columns component.

Nesting in Submission Data

Component nesting might occur in submission data, depending on the component used. For example, the Columns component does not nest component key values in submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections., but the Vega Table component does store component data in an array.

In the example below, the vegaTable Vega Table component contains three Text Field components in an array An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.. Each Text Field component's Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. is a key and each key contains a value:

When nesting submission data, its important to consider how nested data is targeted. Deeply nested data might be difficult to retrieve using logic components. You can use a Data Workflow component and the Unwind operator to bring nested submission data to a higher level, effectively "un-nesting" it.

Resources