Description:
The sub-form widget control lets you embed another form within a form.
Helpjuice Info Callout Title
- ID/Name - Name of widget generated by FlowWright
- Section Name - Enter the description text for the section name
- Select Form Definition - Select the sub-form definition
- Shown as Grid View - Select the checkbox to view the sub-form in grid view (tick mark)
- First row is header - Select the checkbox to view the first row as header (tick mark)
- Hide - Select the checkbox to Hide (tick mark)
- Hide border - Select the checkbox to hide the sub-form border on render (tick mark)
- Save - Save the input values
- Delete - Remove this form widget from the designer page
- Close - Close the input popup window
Design:

Example:
Let’s build and execute the “SubFormDef” example.
- Create a new form definition called “SubFormDef.”
- Select the Open Designer checkbox and click the “Create” button
- Drag a SubForm widget to the canvas
- Double-click on the subForm widget to configure the inputs as shown in the below graphic

- Click on the Select Form Definition field to select the sub-form definition
- Click on the Save button and Close the popup window
- Navigate to the UI menu and Preview the form. The rendered widget will appear as shown in the graphic below

- A sub-form can be embedded in a grid view first, design a form that has a table with fields, as shown below

- Configure the sub-form control to use the above form.

- Once configured, the control should look as follows.

- The rendered control should look as follows.
