# Split Pane

(part of package '[Servoy Extra Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

A component that provides a split pane container for displaying two forms side by side or one on top of the other.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### divLocation

Sets the initial splitter div location, between 0 and 1 is a percentange, more than 1 is a value in pixels. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: -1

***

### divSize

Size of the splitter div - in pixels. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 5

***

### enabled

Flag indicating whether the split pane is enabled for user interaction. Type: [Enabled](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected) Default Value: true

***

### pane1

The left or top pane object. Type: [CustomType\<servoyextra-splitpane.pane>](#pane)

***

### pane1MinSize

Minimum size (in pixels) allowed for the left or top pane. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 30

***

### pane2

The right or bottom pane object. Type: [CustomType\<servoyextra-splitpane.pane>](#pane)

***

### pane2MinSize

Minimum size (in pixels) allowed for the right or bottom pane. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 30

***

### panes

An array of pane objects. (Deprecated: use pane1 and pane2 instead.) Type: [Array\<CustomType\<servoyextra-splitpane.pane>>](#pane)

***

### readOnly

Flag indicating whether the split pane is read-only. Type: [Protected](https://docs.servoy.com/servoy-developer/component_and_service_property_types#protected)

***

### resizeWeight

Specifies how extra space is distributed between the two panes. A value of 0 means the right/bottom pane gets all extra space; 1 means the left/top pane gets it. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 0

***

### responsiveHeight

Minimum height of the splitpane, set only in responsive forms. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 300

***

### splitType

Determines the split type. Typically, 0 represents horizontal splitting and 1 represents vertical splitting. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 0

***

### styleClass

CSS style classes applied to the split pane component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### tabSeq

Tab sequence order for keyboard navigation. Type: [Tabseq](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tabseq)

***

### visible

Flag indicating whether the split pane is visible. Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onChangeMethodID(previousIndex,event)

Called when the split pane changes (for example, when the divider is moved).

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} previousIndex The previous index or position of the divider.
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the change.

***

## API

### getDividerLocation()

Gets the divider location in pixels.

**Example:**

```js
var dividerSize = myElement.dividerSize
```

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The size in pixels

***

### getDividerSize()

Gets the divider size in pixels.

**Example:**

```js
var dividerSize = myElement.dividerSize
```

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The size in pixels

***

### getLeftForm()

Returns the left form of the split pane.

**Example:**

```js
var leftForm = myElement.getLeftForm();
```

**Returns:** [Formscope](https://docs.servoy.com/servoy-developer/component_and_service_property_types#form) Left form of the split pane

***

### getLeftFormMinSize()

Gets left form minimum size in pixels.

**Example:**

```js
var left = myElement.leftFormMinSize
```

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The minimum size in pixels for the left form panel.

***

### getRelativeDividerLocation()

Gets the divider location in percentage when the component is visible.

**Example:**

```js
var divRelativeLocation = myElement.getRelativeDividerLocation()
```

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The location in percentage

***

### getResizeWeight()

Gets the resize weight, which specifies how to distribute extra space when the size of the split pane changes.\
A value of 0, the default, indicates the right/bottom component gets all the extra space (the left/top component acts fixed),\
where as a value of 1 specifies the left/top component gets all the extra space (the right/bottom component acts fixed).\
Specifically, the left/top component gets (weight \* diff) extra space and the right/bottom component gets (1 - weight) \* diff extra space

**Example:**

```js
var resizeWeight = myElement.resizeWeight
```

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The resize weight value, indicating how the extra space is distributed between the left/top and right/bottom components of the split pane.

***

### getRightForm()

Returns the right form of the split pane.

**Example:**

```js
var rightForm = myElement.getRightForm();
```

**Returns:** [Formscope](https://docs.servoy.com/servoy-developer/component_and_service_property_types#form) Right form of the split pane

***

### getRightFormMinSize()

Gets right form minimum size in pixels.

**Example:**

```js
var right = myElement.rightFormMinSize
```

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) The minimum size in pixels for the right form panel.

***

### setDividerLocation(location)

Sets divider location. If location is less then 1 then the location will be considered at (location \* 100) percent of the split pane from left, otherwise it will represent the pixels from left.

**Example:**

```js
myElement.dividerLocation = 0.75;
myElement.dividerLocation = 100;
```

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} location The location of the divider.

***

### setDividerSize(size)

Sets divider size in pixels.

**Example:**

```js
myElement.dividerSize = 10;
```

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} size The size of the divider in pixels.

***

### setLeftForm(form,relation)

Set a relationless or related form as left panel.

**Example:**

```js
myElement.setLeftForm(forms.orders);
```

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} form The specified form or form name you wish to add as left panel
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} \[relation] The relation object used to link the left panel form to the main datasource, or null for a relationless form.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Value indicating if pane was successfully added

***

### setLeftFormMinSize(minSize)

Sets left form minimum size in pixels.

**Example:**

```js
myElement.leftFormMinSize = 100;
```

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} minSize The minimum size in pixels for the left form panel.

***

### setResizeWeight(resizeWeight)

Sets the resize weight, which specifies how to distribute extra space when the size of the split pane changes.\
A value of 0, the default, indicates the right/bottom component gets all the extra space (the left/top component acts fixed),\
where as a value of 1 specifies the left/top component gets all the extra space (the right/bottom component acts fixed).\
Specifically, the left/top component gets (weight \* diff) extra space and the right/bottom component gets (1 - weight) \* diff extra space

**Example:**

```js
myElement.resizeWeight = 10;
```

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} resizeWeight The weight value (between 0 and 1) specifying how to distribute extra space between the left/top and right/bottom components of the split pane.

***

### setRightForm(form,relation)

Set a relationless or related form as right panel.

**Example:**

```js
myElement.setRightForm(forms.orders);
```

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} form The specified form or form name you wish to add as right panel
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} \[relation] The relation object used to link the right panel form to the main datasource, or null for a relationless form.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Value indicating if pane was successfully added

***

### setRightFormMinSize(minSize)

Sets right form minimum size in pixels.

**Example:**

```js
myElement.rightFormMinSize = 100;
```

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} minSize The minimum size in pixels for the right form panel.

***

## Types

## pane

Represents a pane within the split pane. scripting type: CustomType\<servoyextra-splitpane.pane>

* containsFormId
  * The form contained in this pane.
  * **Type**: [form](https://docs.servoy.com/servoy-developer/component_and_service_property_types#form)
* relationName
  * The relation name used to link the pane's form to the main datasource.
  * **Type**: [relation](https://docs.servoy.com/servoy-developer/component_and_service_property_types#relation)

***