Dynamic Nested Forms

Nested Forms allow users to insert an existing Form or Resource (child form) into another Form or Resource (parent form). All fields contained within the child form, including all field settings, will display accordingly, in the Parent form.

This workflow will utilize the Select component to retrieve a list of available Forms or Resources within the Project. With the help of some JavaScript, the Nested Form component will then display the selected form from the Select component on the form.

Project Creation

Start the workflow fresh by creating a new project from the Developer Portal.

Child Forms

Next, create two forms (child forms) within the Project called Child Form 1 and Child Form 2. These forms will be assigned to the Nested Form (parent form). The components of these forms do not play a part in this tutorial, so feel free to add any number of components and field types.

Create a third form called 'Default Form' which will be displayed by the Nested Form when the Dynamic Form does not have a form selection. This form can be empty or contain an HTML field stating to select a form. Think of this form as the placeholder before a Form is selected from the Dynamic Form selection.

Dynamic Nested Form

The Parent Form that will be used to dynamically select and display the Child forms in the previous steps.

Select Field

1. Create a New Form within your Project

2. Add a Select field to the form called Select a Form.

3. Ensure the Property Name within the API tab is selectAForm

4. Click the Data tab within the Select component settings

5. Click the Data Source Type and select URL

6. Add the following to the Data Source URL setting https://myproject.form.io/form

   

   This URL is the endpoint for the Forms and Resources contained within the Project. The URL should be the unique endpoint of your own project that is found underneath the Project Title with the addition of the /form endpoint

6. Change the Item Template to display the form Title within the Select options <span>{{ item.title }}</span>

7. Check the Form.io Authenticate setting which will use the user's authentication token within the Project to grant access to the endpoint in step 5. At this point, the Select a Form dropdown should display a list of Forms and Resources within the Project.

Nested Form Field

The Nested Form will be utilized to serve the forms within the Project. Javascript logic will be implemented into the Nested Form to display the form set by the Select component.

1. Add a Nested Form below the Select component

2. Click the Form tab and select the Default form as the placeholder for the Nested Form.

3. Click the Logic tab and click the +Add Logic button

4. Give the Logic instance a name

5. Within the Trigger tab, click the Type setting and select Event

6. Add to the Event Name

7. Click the +Add Action button

8. Give the Action a Name

9. Click the Type setting dropdown and select Custom Action

10. Add the following JavaScript to the code block

console.log(data,instance)
if (
  data.selectAForm &&
  data.selectAForm._id &&
  instance.subForm &&
  (instance.subForm.form._id !== data.selectAForm._id)
  )
  {
    instance.subForm.form = data.selectAForm;
  }

11. Save the Action, Logic instance, and component settings

Workflow

Test the workflow to ensure all of the configurations are working properly.

1. Click the Use tab for the Dynamic Form Selection The Default Form should be displayed below the Select component

2. Click the Select a Form dropdown You should see all of the Forms and Resources within the Project displayed as options for the Select field

3. Select one of the Child forms

The selected form should be displayed underneath the Select component

Configuring the Form List

There might be scenarios where only certain forms or form types should be listed within the Select a Form dropdown. This can be configured by modifying the Data Source URL endpoint within the Select component to pull in specific forms.

Show Only Form Types

Since both Forms and Resources are considered forms within the Project, a configuration to the Data Source URL is required to filter out the Resources and only display the Form types.

1. Open the Settings for the Select component

2. Click the Data tab

3. Add the following endpoint to the Data Source URL https://myproject.form.io/form?type=form

The Select a Form dropdown should filter out all Resources and only display Form type options.

Show Tagged Forms

Tags inherently do not provide any kind of functionality to the form, however, the tag can be used or referenced inside the Form to facilitate workflows and logic.

Child Forms

1. Edit the Child Form 1 and click the ... setting tab

2. Click Form Settings

3. Add workflow to the Form Tags setting field

4. Click Save Settings

5. Repeat the same steps for Child Form 2

Dynamic Nested Form

1. Edit the Dynamic Nested Form (parent form)

2. Open the Select a Form settings

3. Add the following endpoint to the Data Source URL https://myproject.form.io/form?tags__in=workflow

The Select a Form dropdown should only display Forms and Resources that contain the workflow tag.