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.

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 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. 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, 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. Each Text Field component's Property ID 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