# 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

<div align="left"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-07aed831d23026b5550f679d290652663e4f0ed5%2Fform-container.gif?alt=media" alt=""><figcaption><p>Create a Form Container</p></figcaption></figure></div>

Here are the steps for creating a Form Container:

1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/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`](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/form-container#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](#using-a-relation) by selecting the [`relationName`](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/form-container#relationname) property, where you set the [relation](https://docs.servoy.com/guides/develop/application-design/data-modeling/relations) between the main form and the contained form
6. Edit other [**Form Container** properties](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/form-container#properties) if needed

{% hint style="info" %}
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"`.

<img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-eabd6252040a1439fdc1cdb9e9c8d6d8183b82f2%2Fform-container-name.jpg?alt=media&#x26;token=50f46a88-900c-47e5-ae25-3a383f87195b" alt="Form Container name" data-size="original">
{% endhint %}

### 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`](https://docs.servoy.com/reference/servoycore/object-model/solution/form#datasource) property on the main form
2. Set the [`datasource`](https://docs.servoy.com/reference/servoycore/object-model/solution/form#datasource) property on the contained form
3. Make sure that the [relation](https://docs.servoy.com/guides/develop/application-design/data-modeling/relations) 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`](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/form-container#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](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/form-container#properties) can be also set in the [Scripting Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/scripting-editor).

### Setting the Contained Form

Here is an example of how to programmatically set the contained form, including relationName, in the [Scripting Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/scripting-editor) of the main form:

```javascript
/**
 * 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](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/form-container#properties) can be set the same way, by using `elements.FormContainerName.FormContainerPropertyName`.