Description:
The sub-form widget control lets you embed another Form within the current Form.
Inputs
- 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 “SubForm1Def.”
- Drag an “HTML table, Label, and Text” control onto the canvas and arrange them as shown below.
- Create a new Form definition called “SubFormDef.”
- Drag a “Label, TextArea, subForm, and Submit” control onto the canvas and arrange them as shown below.
- Double-click the “subForm” widget to configure the “Settings” properties. A pop-up window appears for configuration. Enter the section name. Select the Form Definition from the drop-down list. Check the box to render the subForm as a table in a grid view. Check the box to treat the first row of the subForm as column headers. Check the box to hide the control at runtime.
- The Form and subForm configurations are presented as follows. You will notice that the subForm is set to display the table as a grid view.
- Save the Form definition. Select Actions > Create Form Instance. Generate a new Form instance, then check the box to edit it.
- The Form is displayed to the user as shown below. You can add an empty row with the plus sign (+). To remove a row, click the red (x) icon. Fill in the user input and click the Submit button.
Definition Sample:
You may download and extract the sample definition(s) from the link provided, then import them (drag-and-drop) into your FlowWright Process Definition (XML file) or Form Definition (HTML file) page.
Note: Please verify and complete the import process steps for any missing configurations, such as file path references and database connections. Then, save the definition to confirm the changes.