Form definition can be embedded within other forms using 2 methods, as sub-forms or grid views.  Both provide different functionality; these will be discussed in more detail within the next two examples.

Embedding a form as a sub-form

Create a second form called “TestMainSubForm”.  Add a bunch of form fields to the new form.  The new form may look as follows:

Let’s add a couple of text fields and called them Score 1, 2, 3.  The next step is to embed this form within the main form we designed earlier.  Open the “TestMainForm” within the form designer.  Drag and drop the “SubForm” UI control from the toolbox to the designer. 

Double click on the “subform1” control to view its properties window:

Enter the shown values for the “Section Name” text box and the selection for the “Select Form Definitions”.  Using the drop-down list, select the sub-form that was created in the previous steps.   Click the “Save” button on the dialog to save the changes. After closing the dialog box, the form will look as follows:

Sub-Form is now embedded within the main form. Let’s save the changes to the current form using the “Save” button on the toolbar. Let’s test the form by creating a new form instance based on the form definition.  Navigate to the form instances tab and click the “Create” button on the toolbar.  Enter the following information on the create dialog:

Click the “Create” button on the dialog box to create the form instance.  Once the form instance is created, select the new form instance from the list and click the edit button.  The form containing the sub-form will render as follows:

Embedding a form as a grid view

Create a new form definition called “TestMainGrid”.  Open the newly created form definition within the form designer.   Add the following fields to the form: 

Use a table and 2 text fields to build the above form.  Click the “Save” menu item to save the form.  Now let’s embed this form within the main form as a Grid View.   

Open the main form within the form designer and drag a sub-form control to the designer.

Navigate to the properties of the sub-form control by double-clicking on the control.   The following properties dialog will be displayed as shown above.

Configure the shown values for the dialog, make sure to check the “Show as Grid view” checkbox.  Click the “Save” button on the dialog to save the properties. The grid view within the form should render as follows:

As you can see, the sub-form is embedded as a grid view.  The grid view also shows 2 extra buttons, “Add” and “Remove” row button icons.   When a form instance is being edited, the plus icon adds extra rows to the table.  Using the  icon, rows from the grid view can be removed.  Save the form by clicking the “Save” button on the toolbar.

Let’s test the form by creating a new form instance based on the form definition.  Navigate to the form instances tab and click the “Create” button on the toolbar.  Enter the following information on the create dialog:

Click the “Create” button on the dialog to create the form instance. 

Once created, select the new form instance from the list and click the edit button.  The form containing the grid view will render as follows:

Click the  icon to add rows on the Grid View.

Click the  to delete rows from the grid view.