# Split Pane
## Overview
The Split Pane component is a container that shows a 'left' (1) and a 'right' (2) form in it. It will show both forms at the same time, placed either horizontally or vertically, with a divider between them. These 2 forms can optionally show related data.
The divider's location can be modified either from code or directly by the user.\
It is suited for use in both Advanced (Responsive) and Simple CSS forms.
## Get Started
Split Pane
### Creating a Split Pane
Create a Split Pane
Here are the steps for creating a Split Pane:
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 **Split Pane**
2. Find **Split Pane** in *Form Containers* section in the components' pallet
3. Drag and drop the **Split Pane** component in the desired place of the form
4. Set the panels' orientation by selecting [`splitType`](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#splittype) property
5. Add `pane1` and `pane2`
6. Add forms in [`containedForm`](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#containsformid) panels' property, where you set the name of the form you want to be displayed in each panel
7. Optionally, you can [use a relation](#using-a-relation) by selecting the [`relationName`](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#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 of the panel
8. Set `pane1MinSize` (minimum size of first panel in pixels) and `pane2MinSize` (minimum size of second panel in pixels)
9. Set the [divider properties](#setting-the-divider-properties)
10. Edit other [**Split Pane** properties](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#properties) if needed
{% hint style="info" %}
It is recommended to set a specific `name` in the **Split Pane** properties in order to make it easier to use it later in scripting.\
Example: `"splitpane_orders"`.
{% endhint %}
### Using a relation
The contained form of the panels 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/split-pane#relationname) property of the corresponding panel
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.
### Setting the divider properties
divider properties
**Divider location** is set by using the [divLocation](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#divlocation) property: sets the initial splitter div location, between 0 and 1 is a percentage, more than 1 is a value in pixels. If location is less than 1 (-1 or .5 = middle, lower then .5 = close to left/top, higher then .5 = close to right/bottom), then the location will be considered at (location \* 100) percent of the split pane from left, otherwise it will represent the pixels from left.
**Width of divider** is set by using the [divSize](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#divsize) property, which represents the divider size in pixels.
## Scripting a Split Pane
[**Split Pane** properties](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#properties) can be also set in the [Scripting Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/scripting-editor).\
You can find a list of Split Pane API methods [here](https://docs.servoy.com/reference/servoyextensions/ui-components/form-containers/split-pane#api).
### Setting the forms
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
*
* @private
*
* @properties={typeid:24,uuid:"2A6697C8-38B1-4264-9D8B-2C3B5758FFC6"}
*/
function onLoad(event) {
// TODO Auto-generated method stub
// splitpane_orders = the name of the Split Pane container in the main form
// pane1 = panel on the left / top
// pane2 = panel on the right / bottom
// order_details = the contained form in pane1
// orders_to_order_details = relation between datasource table of the main form to datasource table of the pane1 contained form
// orders_customers = the contained form in pane2
// orders_to_customers = relation between datasource table of the main form to datasource table of the pane2 contained form
elements.splitpane_orders.pane1.containsFormId = forms.order_details;
elements.splitpane_orders.pane1.relationName = orders_to_order_details;
elements.splitpane_orders.pane2.containsFormId = forms.orders_customers;
elements.splitpane_orders.pane2.relationName = orders_to_customers;
}
```
### Moving the divider
Here is an example of how to save the previous divider location in the [Scripting Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/scripting-editor) of the main form and set the same for the next user session:
Saving the divider location in the `onChange` event(fired after divider location changed) of the Split Pane container:
```javascript
/**
* @param {Number} previousIndex
* @param {JSEvent} event
*
* @private
*
* @properties={typeid:24,uuid:"FC548162-34E1-4AD0-91C4-390222D478CA"}
*/
function onChange(previousIndex, event) {
// TODO Auto-generated method stub
application.setUserProperty(controller.getName()+"."+elements.splitpane_orders.getName()+".divider",elements.splitpane_orders.getDividerLocation().toString())
}
```
Checking if there is a saved previous divider location and set it in the `onLoad` main form event:
```javascript
/**
* @type {String}
*
* @properties={typeid:35,uuid:"2FD6AD36-9779-49D2-B4A7-985C7C73B66C",variableType:8}
*/
var dividerLocation;
/**
* Callback method when form is (re)loaded.
*
* @param {JSEvent} event the event that triggered the action
*
* @private
*
* @properties={typeid:24,uuid:"2751B88B-48CF-477C-8422-0BC79FFDDED5"}
*/
function onLoad(event) {
// TODO Auto-generated method stub
dividerLocation = application.getUserProperty(controller.getName()+"."+elements.splitpane_orders.getName()+".divider");
if (dividerLocation)
{
elements.splitpane_orders.divLocation = parseInt(dividerLocation);
}
}
```
{% endhint %}
### Using a relation
The contained form of the panels 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/split-pane#relationname) property of the corresponding panel
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.
### Setting the divider properties
