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

Creating a Split Pane

Here are the steps for creating a Split Pane:

1. Open the 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 property
5. Add pane1 and pane2
6. Add forms in containedForm 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 by selecting the relationName property, where you set the relation 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

10. Edit other Split Pane properties if needed

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".

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 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 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 location is set by using the 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 property, which represents the divider size in pixels.

Scripting a Split Pane

Split Pane properties can be also set in the Scripting Editor. You can find a list of Split Pane API methods here.

Setting the forms

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
 *
 * @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 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:

/**
 * @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:

/**
 * @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);
    }   
}