Nesting Components

Overview

Nesting is a simple concept of stacking an array or element inside another array or element. You can think of it like Russian nesting dolls, where one doll fits inside another, larger doll. The nesting of components works the same way. For example, your module may contain many panels, columns, and other components. Nesting components lets you position components in these columns and panels.

Here’s what nesting looks like in the Module Editor:

What you'll Learn

In this article, you'll learn about:

  • Nesting in the Module Editor and Express View.

  • Nesting in the DevTools Console.

Nesting in Module Editor and Express View

An excellent example of a nested component is the Advanced Datagrid. You can nest an Advanced Datagrid component inside another Advanced Datagrid component.

Let's say your module uses an Advanced Datagrid to collect beneficiary information. While a beneficiary will have only one name, they may have many phone numbers. Nest an Advanced Datagrid for phone numbers into the beneficiary Advanced Datagrid. Now you can collect more than one phone number for each beneficiary.

Module Editor and Express View, offer different views of your nested components. Let's take a closer look.

Here’s how the example looks in Module Editor:

The Module Outline at the right lets you see the nested of components inside the panels and columns. This view helps you contextualize and organize your module. To learn more about this feature, view the Module Outline article.

Here’s how the example looks in Express View. The Phone Number Advanced Datagrid nests inside the Beneficiary Advanced Datagrid.

Nesting in the DevTools Console

Next, let's explore how nested components look in the DevTools Console. Here you can see arrays created in the Module Editor and the saved values that are a part of the submission ID. It's important to note that the data structure behind the Advanced Datagrid is an array. So when you nest Advanced Datagrids, you have an array in an array.

Here's an example of how the saved submission data might look using the Console:

What you see are two beneficiary phone numbers nested under adgPhoneNumber. These phone numbers nest under the single beneficiary labeled 0. The beneficiary labeled 0 nests under adgBeneficiary, all as submission data. In other words, the array of phone numbers is the innermost array in a single beneficiary. In this case, Kiley Caldarera is a beneficiary who has 2 phone numbers.

Then, adding a second beneficiary expands the array size from 1 to 2 entries: