Form Container

Overview

The "Form container" component is a container that shows 1 form inside it. It has no additional UI decorations. The contained form can optionally show related data.

It is suited for use in both Advanced (Responsive) and Simple CSS forms.

Get Started

Creating a Form Container

Here are the steps for creating a Form Container:

1. Open the Form Editor of the form where you need to place a Form Container

2. Find Form Container in Form Containers section in the components' pallet

3. Drag and drop the Form Container component in the desired place of the form

4. Select the containedForm property, where you set the name of the form you want to be displayed in the container

5. Optionally, you can use a relation by selecting the relationName property, where you set the relation between the main form and the contained form

6. Edit other Form Container properties if needed

It is recommended to set a specific name in the Form Container properties in order to make it easier to use it later in scripting. Example: "fc_order_details".

Using a relation

The contained form can show related data. In order to do this, you need to have the following:

1. Set the datasource property on the main form

2. Set the datasource property on the contained form

3. Make sure that the relation from datasource table of the main form to datasource table of the contained form exists, otherwise it needs to be created

4. Set the above relation in the relationName property of the Form Container

Once everything is set, the contained form will show related data according to the selected record in the main form. When the selected record changes in the main form, so will the related data from the contained form.

Scripting a Form Container

Form Container properties can be also set in the Scripting Editor.

Setting the Contained Form

Here is an example of how to programmatically set the contained form, including relationName, in the Scripting Editor of the main form:

/**
 * Callback method when form is (re)loaded.
 *
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"5C166B77-060A-4E85-AD9F-EB20B194E55F"}
 */
function onLoad(event) {
	// TODO Auto-generated method stub
    // fc_order_details = the name of the form container in the main form
    // order_details = the contained form
    // orders_to_order_details = relation between datasource table of the main form to datasource table of the contained form
	elements.fc_order_details.containedForm = forms.order_details;
	elements.fc_order_details.relationName = orders_to_order_details;
}

Other Form Container properties can be set the same way, by using elements.FormContainerName.FormContainerPropertyName.