# JSForm

## Overview

The `JSForm` is a Solution Model wrapper for forms, providing properties and methods to dynamically manage and interact with forms in an application. It includes constants for specifying foundset behavior and selection modes, properties like `dataSource`, `name`, and `selectionMode`, and methods for creating, accessing, and manipulating form components, variables, methods, and layout containers.

With encapsulation levels, event handlers (e.g., `onShow`, `onHide`, `onRecordSelection`), and integration of design-time properties, `JSForm` is pivotal for customizing forms at runtime. It supports responsive layouts, default sorting, transparent forms, and CSS-based positioning, enabling developers to tailor the UI dynamically while managing forms effectively.

Please refer to the [Form](https://docs.servoy.com/reference/servoycore/object-model/solution/form) section of this documentation for details.

## Constants Summarized

| Type                                                                         | Name                                                | Summary                                        |
| ---------------------------------------------------------------------------- | --------------------------------------------------- | ---------------------------------------------- |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [EMPTY\_FOUNDSET](#empty_foundset)                  | Constant used for form namedFoundset property. |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) | [SELECTION\_MODE\_DEFAULT](#selection_mode_default) | Constant used for form selectionMode property. |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) | [SELECTION\_MODE\_MULTI](#selection_mode_multi)     | Constant used for form selectionMode property. |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) | [SELECTION\_MODE\_SINGLE](#selection_mode_single)   | Constant used for form selectionMode property. |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) | [SEPARATE\_FOUNDSET](#separate_foundset)            | Constant used for form namedFoundset property. |

## Properties Summarized

| Type                                                                                    | Name                                          | Summary                                                                                                                                                                                   |
| --------------------------------------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [dataSource](#datasource)                     | The names of the database server and table that this form is linked to.                                                                                                                   |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [deprecated](#deprecated)                     | Gets the deprecation info for this element.                                                                                                                                               |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)            | [encapsulation](#encapsulation)               | Get or set the encapsulation level for the form.                                                                                                                                          |
| [JSForm](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsform)     | [extendsForm](#extendsform)                   | A JSForm instance representing the super form of this form, if this form has a super form.                                                                                                |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [formCss](#formcss)                           | CSS styles that are applied to the form.                                                                                                                                                  |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [initialSort](#initialsort)                   | The default sort order only when the form loads.                                                                                                                                          |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)            | [minHeight](#minheight)                       | The height of the form in pixels.                                                                                                                                                         |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)            | [minWidth](#minwidth)                         | The width of the form in pixels.                                                                                                                                                          |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [name](#name)                                 | The name of the form.                                                                                                                                                                     |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [namedFoundSet](#namedfoundset)               | Property that tells the form to use a named foundset instead of the default foundset.                                                                                                     |
| [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)            | [navigator](#navigator)                       | The navigator (previously named "controller") that is used to control/navigate to the form.                                                                                               |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onBeforeHide](#onbeforehide)                 | This method is triggered when the form wants to hide; this will be called before onHide, and should be used to return if this form can be hidden or not.                                  |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onElementDataChange](#onelementdatachange)   | Method that is executed when the data in one of the form's component is successfully changed and the onDataChange callback from the component does not exist or exists and returned true. |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onElementFocusGained](#onelementfocusgained) | The method that is triggered when focus is gained by a component inside the form.                                                                                                         |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onElementFocusLost](#onelementfocuslost)     | The method that gets triggered when focus is lost by a component inside the form.                                                                                                         |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onHide](#onhide)                             | This method is triggered when the form gets hidden.                                                                                                                                       |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onLoad](#onload)                             | The method that is triggered when a form is loaded/reloaded from the repository; used to alter elements, set globals, hide toolbars, etc; onShow method can also be assigned.             |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onRecordEditStart](#onrecordeditstart)       | The method that is triggered when a user starts editing a record (for example by clicking into a cell of a table, or editing a field who's data-provider is from that record).            |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onRecordEditStop](#onrecordeditstop)         | The method that is triggered when a record is being saved.                                                                                                                                |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onRecordSelection](#onrecordselection)       | The method that is triggered each time a record is selected.                                                                                                                              |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onResize](#onresize)                         | The method that gets triggered when resize occurs.                                                                                                                                        |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onShow](#onshow)                             | The method that is triggered EVERY TIME the form is displayed; an true argument will be passed to the method if this is the first time the form is displayed.                             |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onSortCmd](#onsortcmd)                       | The method that overrides the Servoy menu item Select > Sort.                                                                                                                             |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) | [onUnLoad](#onunload)                         | The method that is triggered when a form is unloaded from the repository.                                                                                                                 |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)          | [responsiveLayout](#responsivelayout)         | Returns true if this form is in responsive mode                                                                                                                                           |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)            | [scrollbars](#scrollbars)                     | Scrollbar options for the vertical and horizontal scrollbars.                                                                                                                             |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)            | [selectionMode](#selectionmode)               | Returns the value of the form's selectionMode property.                                                                                                                                   |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [serverName](#servername)                     | Get the server name used by this form.                                                                                                                                                    |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [styleClass](#styleclass)                     | The Cascading Style Sheet (CSS) class name applied to the form.                                                                                                                           |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [tableName](#tablename)                       | The \[name of the table/SQL view].                                                                                                                                                        |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)            | [titleText](#titletext)                       | The text that displays in the title bar of the form window.                                                                                                                               |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)          | [transparent](#transparent)                   | When set, the form is transparent.                                                                                                                                                        |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)          | [useCssPosition](#usecssposition)             | Get or set the positioning (either use anchoring or use css position) for the form.                                                                                                       |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)          | [useMinHeight](#useminheight)                 | If true then the min-height css property will be set for this form so it has a default minimum height.                                                                                    |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)          | [useMinWidth](#useminwidth)                   | If true then the min-with css property will be set for this form so it has a default minimum width Can return null so that the default system value should be used.                       |

## Methods Summarized

| Type                                                                                                                          | Name                                                                                                             | Summary                                                                                                                                                   |
| ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer)                     | [findLayoutContainer(name)](#findlayoutcontainer-name)                                                           | Returns a JSLayoutContainer that has the given name throughout the whole form hierarchy.                                                                  |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [findWebComponent(name)](#findwebcomponent-name)                                                                 | Returns a JSWebComponent that has the given name through the whole hierarchy of JSLayoutContainers                                                        |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [getBodyPart()](#getbodypart)                                                                                    | Retrieves the Body part of the form.                                                                                                                      |
| [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)                                                  | [getComment()](#getcomment)                                                                                      | Returns the comment of this container.                                                                                                                    |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [getComponent(name)](#getcomponent-name)                                                                         | Returns a JSComponent that has the given name; if found it will be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel.          |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getComponents()](#getcomponents)                                                                                | Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponents or JSTabPanel.        |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getComponents(returnInheritedElements)](#getcomponents-returninheritedelements)                                 | Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponent or JSTabPanel.         |
| [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)                                                  | [getDesignTimeProperty(key)](#getdesigntimeproperty-key)                                                         | Get a design-time property of a form.                                                                                                                     |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getDesignTimePropertyNames()](#getdesigntimepropertynames)                                                      | Get the design-time properties of a form.                                                                                                                 |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [getFooterPart()](#getfooterpart)                                                                                | Retrieves the Footer part of the form.                                                                                                                    |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [getHeaderPart()](#getheaderpart)                                                                                | Retrieves the Header part of the form.                                                                                                                    |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer)                     | [getLayoutContainer(name)](#getlayoutcontainer-name)                                                             | Returns a JSLayoutContainer that has the given name of this container.                                                                                    |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getLayoutContainers()](#getlayoutcontainers)                                                                    | Returns all JSLayoutContainers objects of this container.                                                                                                 |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getLayoutContainers(returnInheritedElements)](#getlayoutcontainers-returninheritedelements)                     | Returns all JSLayoutContainers objects of this container                                                                                                  |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)                                       | [getMethod(name)](#getmethod-name)                                                                               | Gets an existing form method for the given name.                                                                                                          |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getMethods()](#getmethods)                                                                                      | Returns all existing form methods for this form.                                                                                                          |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getMethods(returnInheritedElements)](#getmethods-returninheritedelements)                                       | Returns all existing form methods for this form.                                                                                                          |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [getPart(type)](#getpart-type)                                                                                   | Gets a part of the form from the given type (see JSPart constants).                                                                                       |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [getPart(type, height)](#getpart-type-height)                                                                    | Gets a part of the form from the given type (see JSPart constants).                                                                                       |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)                                                  | [getPartYOffset(type)](#getpartyoffset-type)                                                                     | Returns the Y offset of a given part (see JSPart) of the form.                                                                                            |
| [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)                                                  | [getPartYOffset(type, height)](#getpartyoffset-type-height)                                                      | Returns the Y offset of a given part (see JSPart) of the form.                                                                                            |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getParts()](#getparts)                                                                                          | Gets all the parts from the form (not including the parts of the parent form), ordered by there height (lowerbound) property, from top == 0 to bottom.    |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getParts(returnInheritedElements)](#getparts-returninheritedelements)                                           | Gets all the parts from the form (optionally also from the parent form), ordered by there height (lowerbound) property, from top == 0 to bottom.          |
| [JSResponsiveLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsresponsivelayoutcontainer) | [getResponsiveLayoutContainer(name)](#getresponsivelayoutcontainer-name)                                         | Returns a JSResponsiveLayoutContainer that has the given name of this container.                                                                          |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getResponsiveLayoutContainers(returnInheritedElements)](#getresponsivelayoutcontainers-returninheritedelements) | Returns all JSResponsiveLayoutContainer objects of this container                                                                                         |
| [UUID](https://docs.servoy.com/reference/servoycore/dev-api/application/uuid)                                                 | [getUUID()](#getuuid)                                                                                            | Returns the UUID of this form.                                                                                                                            |
| [JSVariable](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsvariable)                                   | [getVariable(name)](#getvariable-name)                                                                           | Gets an existing form variable for the given name.                                                                                                        |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getVariables()](#getvariables)                                                                                  | An array consisting of all form variables for this form.                                                                                                  |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getVariables(returnInheritedElements)](#getvariables-returninheritedelements)                                   | An array consisting of all form variables for this form.                                                                                                  |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [getWebComponent(name)](#getwebcomponent-name)                                                                   | Returns a JSWebComponent that has the given name that is a child of this form, layout container or responsive layout container.                           |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getWebComponents()](#getwebcomponents)                                                                          | Returns all JSWebComponents of this form/container.                                                                                                       |
| [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array)                                                    | [getWebComponents(returnInheritedElements)](#getwebcomponents-returninheritedelements)                           | Returns all JSWebComponents of this form/container.                                                                                                       |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [newFooterPart(height)](#newfooterpart-height)                                                                   | Creates a new Footer part on the form.                                                                                                                    |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [newHeaderPart(height)](#newheaderpart-height)                                                                   | Creates a new Header part on the form.                                                                                                                    |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer)                     | [newLayoutContainer()](#newlayoutcontainer)                                                                      | Create a new layout container as the last child of its parent container.                                                                                  |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer)                     | [newLayoutContainer(position)](#newlayoutcontainer-position)                                                     | Create a new layout container.                                                                                                                            |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer)                     | [newLayoutContainer(position, spec)](#newlayoutcontainer-position-spec)                                          | Create a new layout container.                                                                                                                            |
| [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer)                     | [newLayoutContainer(spec)](#newlayoutcontainer-spec)                                                             | Create a new layout container as the last child in its parent container.                                                                                  |
| [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)                                       | [newMethod(code)](#newmethod-code)                                                                               | Creates a new form JSMethod - based on the specified code.                                                                                                |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [newPart(type, height)](#newpart-type-height)                                                                    | Creates a new part on the form.                                                                                                                           |
| [JSResponsiveLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsresponsivelayoutcontainer) | [newResponsiveLayoutContainer(x, y, width, height)](#newresponsivelayoutcontainer-x-y-width-height)              | Create a new responsive layout container at a certain position and size.                                                                                  |
| [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart)                                           | [newTitleHeaderPart(height)](#newtitleheaderpart-height)                                                         | Creates a new Title Header part on the form.                                                                                                              |
| [JSVariable](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsvariable)                                   | [newVariable(name, type)](#newvariable-name-type)                                                                | Creates a new form JSVariable - based on the name of the variable object and the number type, uses the SolutionModel JSVariable constants.                |
| [JSVariable](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsvariable)                                   | [newVariable(name, type, defaultValue)](#newvariable-name-type-defaultvalue)                                     | Creates a new form JSVariable - based on the name of the variable object , the type and it's default value , uses the SolutionModel JSVariable constants. |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [newWebComponent(type)](#newwebcomponent-type)                                                                   | Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.                                                                        |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [newWebComponent(type, position)](#newwebcomponent-type-position)                                                | Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.                                                                        |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [newWebComponent(name, type)](#newwebcomponent-name-type)                                                        | Creates a new JSWebComponent (spec based component) object on a form.                                                                                     |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [newWebComponent(name, type, position)](#newwebcomponent-name-type-position)                                     | Creates a new JSWebComponent (spec based component) object on the RESPONSIVE container(form , layout container or responsive layout container).           |
| [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent)                                 | [newWebComponent(name, type, x, y, width, height)](#newwebcomponent-name-type-x-y-width-height)                  | Creates a new JSWebComponent (spec based component) object on the form.                                                                                   |
| [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)                                                  | [putDesignTimeProperty(key, value)](#putdesigntimeproperty-key-value)                                            | Set a design-time property of a form.                                                                                                                     |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                                                | [removeComponent(name)](#removecomponent-name)                                                                   | Removes a component (JSLabel, JSButton, JSField, JSPortal, JSBean, JSTabpanel, JSWebComponent) that has the given name.                                   |
| [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)                                                  | [removeDesignTimeProperty(key)](#removedesigntimeproperty-key)                                                   | Clear a design-time property of a form.                                                                                                                   |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                                                | [removeMethod(name)](#removemethod-name)                                                                         | Removes a form JSMethod - based on the specified code.                                                                                                    |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                                                | [removePart(type)](#removepart-type)                                                                             | Removes a JSPart of the given type.                                                                                                                       |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                                                | [removePart(type, height)](#removepart-type-height)                                                              | Removes a JSPart of the given type.                                                                                                                       |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                                                | [removeVariable(name)](#removevariable-name)                                                                     | Removes a form JSVariable - based on the name of the variable object.                                                                                     |
| [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)                                                | [removeWebComponent(name)](#removewebcomponent-name)                                                             | Removes a JSWebComponent that has the specified name.                                                                                                     |

## Constants Detailed

### EMPTY\_FOUNDSET

Constant used for form namedFoundset property. The form that uses empty namedFoundset will initially have an empty (cleared) foundset.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
// form with empty foundset
var frmEmpty = solutionModel.newForm('products_empty', 'example_data', 'products', null, true, 640, 480);
frmEmpty.newLabel("Empty FoundSet",10,10,200,20);
frmEmpty.newField('categoryid',JSField.TEXT_FIELD,10,40,200,20);
frmEmpty.newField('productname',JSField.TEXT_FIELD,10,70,200,20);
frmEmpty.namedFoundSet = JSForm.EMPTY_FOUNDSET;
```

### SELECTION\_MODE\_DEFAULT

Constant used for form selectionMode property. It means that the foundset's multiSelect property is used.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var myForm = solutionModel.getForm('my_form_name');
myForm.selectionMode = JSForm.SELECTION_MODE_DEFAULT;
```

### SELECTION\_MODE\_MULTI

Constant used for form selectionMode property. It means that the form will force multiSelect to true on the foundset it uses.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var myForm = solutionModel.getForm('my_form_name');
myForm.selectionMode = JSForm.SELECTION_MODE_MULTI;
```

### SELECTION\_MODE\_SINGLE

Constant used for form selectionMode property. It means that the form will force multiSelect to false on the foundset it uses.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var myForm = solutionModel.getForm('my_form_name');
myForm.selectionMode = JSForm.SELECTION_MODE_SINGLE;
```

### SEPARATE\_FOUNDSET

Constant used for form namedFoundset property. The form that uses a separate namedFoundset will initially have an separate (not shared with other forms) foundset.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
// form with separate foundset
var frmSeparate = solutionModel.newForm('products_separate', 'example_data', 'products', null, true, 640, 480);
frmSeparate.newLabel("Separate FoundSet",10,10,200,20);
frmSeparate.newField('categoryid',JSField.TEXT_FIELD,10,40,200,20);
frmSeparate.newField('productname',JSField.TEXT_FIELD,10,70,200,20);
frmSeparate.namedFoundSet = JSForm.SEPARATE_FOUNDSET;
forms['products_separate'].controller.find();
forms['products_separate'].categoryid = '=2';
forms['products_separate'].controller.search();
```

## Properties Detailed

### dataSource

The names of the database server and table that this form is linked to.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var myForm = solutionModel.newForm('newForm', 'db:/a_server/a_table', 'aStyleName', false, 800, 600)
myForm.dataSource = 'db:/anotherServerName/anotherTableName'
```

### deprecated

Gets the deprecation info for this element.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var form = solutionModel.newForm('myForm',myDatasource,null,true,800,600);
form.deprecated = "not used anymore, replaced with newForm";
```

### encapsulation

Get or set the encapsulation level for the form.

Encapsulation is one of constants JSForm.DEFAULT\_ENCAPSULATION, JSForm.PRIVATE\_ENCAPSULATION, JSForm.MODULE\_PRIVATE\_ENCAPSULATION,\
JSForm.HIDE\_DATAPROVIDERS\_ENCAPSULATION, JSForm.HIDE\_FOUNDSET\_ENCAPSULATION, JSForm.HIDE\_CONTROLLER\_ENCAPSULATION or JSForm.HIDE\_ELEMENTS\_ENCAPSULATION

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var myForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
myForm.encapsulation = JSForm.HIDE_CONTROLLER_ENCAPSULATION;
```

### extendsForm

A JSForm instance representing the super form of this form, if this form has a super form.

**Type**\
[JSForm](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsform)

**Sample**

```js
var subForm = solutionModel.newForm('childForm',myDatasource,null,true,800,600);
var superForm = solutionModel.newForm('childForm',myDatasource,null,true,800,600);
subForm.extendsForm = superForm;
```

### formCss

CSS styles that are applied to the form.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var form = solutionModel.newForm('myForm',myDatasource,null,true,800,600);
form.formCss = mycss; // where mycss is a string with the css content;
```

### initialSort

The default sort order only when the form loads.\
This is applied each time an internal SQL query is being executed (find, find-all, open form); and is only executed when no other manual sort has been performed on the foundset.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var form = solutionModel.newForm('myForm',myDatasource,null,true,800,600);
form.initialSort = "column1 desc, column2 asc, column3 asc";
```

### minHeight

The height of the form in pixels.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var myForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
forms['newForm1'].controller.show();
myForm.minHeight = 400;
forms['newForm1'].controller.recreateUI();
```

### minWidth

The width of the form in pixels.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var myForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
forms['newForm1'].controller.show();
myForm.minWidth = 120;
forms['newForm1'].controller.recreateUI();
```

### name

The name of the form.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var form = solutionModel.newForm('myForm',myDatasource,null,true,800,600);
var formName = form.name;
application.output(formName);
```

### namedFoundSet

Property that tells the form to use a named foundset instead of the default foundset.\
When JSForm.SEPARATE\_FOUNDSET is specified the form will always create a copy of assigned foundset and therefore become separated from other foundsets.\
When JSForm.EMPTY\_FOUNDSET, the form will have an initially empty foundset.

The namedFoundset can be based on a global relation; in this case namedFoundset is the relation's name.\
You can also set the namedFoundset to a JSRelation object directly.\
It will tell this form to initially load a global relation based foundset.\
The global relation's foreign datasource must match the form's datasource.\
Do not use relations named "empty" or "separate" to avoid confusions.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
// form with separate foundset
var frmSeparate = solutionModel.newForm('products_separate', 'db:/example_data/products', null, true, 640, 480);
frmSeparate.newLabel("Separate FoundSet",10,10,200,20);
frmSeparate.newField('categoryid',JSField.TEXT_FIELD,10,40,200,20);
frmSeparate.newField('productname',JSField.TEXT_FIELD,10,70,200,20);
frmSeparate.namedFoundSet = JSForm.SEPARATE_FOUNDSET;
forms['products_separate'].controller.find();
forms['products_separate'].categoryid = '=2';
forms['products_separate'].controller.search();

// form with empty foundset
var frmEmpty = solutionModel.newForm('products_empty', 'db:/example_data/products', null, true, 640, 480);
frmEmpty.newLabel("Empty FoundSet",10,10,200,20);
frmEmpty.newField('categoryid',JSField.TEXT_FIELD,10,40,200,20);
frmEmpty.newField('productname',JSField.TEXT_FIELD,10,70,200,20);
frmEmpty.namedFoundSet = JSForm.EMPTY_FOUNDSET;

// form with an initial foundset based on a global relation
var frmGlobalRel = solutionModel.newForm("categories_related", solutionModel.getForm("categories"));
frmGlobalRel.namedFoundSet = "g2_to_category_name";

// form with an initial foundset based on a global relation
var frmGlobalRel = solutionModel.newForm("categories_related", solutionModel.getForm("categories"));
frmGlobalRel.namedFoundSet = solutionModel.getRelation("g1_to_categories");
```

### navigator

The navigator (previously named "controller") that is used to control/navigate to the form. The navigator is shown at the left or at the right side of the form, depending on the page orientation.

The following options are available:

-none- - no navigator is assigned.\
DEFAULT - the Servoy default navigator is assigned.\
IGNORE - the navigator last assigned to a previous form.\
Custom - a custom navigator based on a selected form.

**Type**\
[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)

**Sample**

```js
var aForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
// you can also use SM_DEFAULTS.INGORE to just reuse the navigator that is already set, or SM_DEFAULTS.DEFAULT to have the default servoy navigator.
// here we assign an other new form as the navigator.
var aNavigator = solutionModel.newForm('navForm', myDatasource, null, false, 800, 600);
// set the navigators navigator to NONE
aNavigator.navigator = SM_DEFAULTS.NONE; // Hide the navigator on the form.
myListViewForm.navigator = aNavigator;
application.output(myListViewForm.navigator.name);
```

### onBeforeHide

This method is triggered when the form wants to hide; this will be called before onHide, and should be used to return if this form can be hidden or not.\
Before the form is really going to hide, this form and all the forms that this form is also showing in its ui hierarchy must allow the hide (return true in onBeforeHide - if present).

For example, when using onBeforeHide with showFormInDialog, the form will not close by clicking the dialog close box (X) if the main form in the dialog or any of the other visible forms in tabpanels/containers are nested in the main are returning false.

If the hide operation is allowed for all the forms that are in the affected visible hierarchy, then the onHide handler/method will get called on them as well afterwards.

So this handler (on each form) can be used to validate input in the main form and/or any nested visible forms - that are getting ready to hide.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onShow = form.newMethod('function onShow(firstShow, event) { application.output("onShow intercepted on " + event.getFormName() + ". first show? " + firstShow); return false; }');
form.onHide = form.newMethod('function onHide(event) { application.output("Hide called but this should not block, use onbefore hdie for that" + event.getFormName());}');
form.onBeforeHide = form.newMethod('function onHide(event) { application.output("onBeforeHide blocked on " + event.getFormName()); return false; }');
```

### onElementDataChange

Method that is executed when the data in one of the form's component is successfully changed and the onDataChange callback from the component does not exist or exists and returned true.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onElementDataChange = form.newMethod('function onElementDataChange(oldValue, newValue, event) { application.output("Data changed from " + oldValue + " to " + newValue + " at " + event.getTimestamp()); }');
```

### onElementFocusGained

The method that is triggered when focus is gained by a component inside the form.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onElementFocusGained = form.newMethod('function onElementFocusGained(event) { application.output("onElementFocusGained intercepted from " + event.getSource()); }');
form.onElementFocusLost = form.newMethod('function onElementFocusLost(event) { application.output("onElementFocusLost intercepted from " + event.getSource()); }');
```

### onElementFocusLost

The method that gets triggered when focus is lost by a component inside the form.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onElementFocusGained = form.newMethod('function onElementFocusGained(event) { application.output("onElementFocusGained intercepted from " + event.getSource()); }');
form.onElementFocusLost = form.newMethod('function onElementFocusLost(event) { application.output("onElementFocusLost intercepted from " + event.getSource()); }');
```

### onHide

This method is triggered when the form gets hidden.

Return value is DEPRECATED: false return value should no longer be used. In the past, if the onHide method returned false, the form hide could be prevented from happening in some cases (for example, when using onHide with showFormInDialog, the form will not close by clicking the dialog close box (X)). But that lead to unexpected situations when the form being hidden had visible nested children it it (tab panels, splits etc.) because only the current form would decide if hide could be denied, and all other forms, even if they returned false in their on-hide, would not be able to block the hide if this form allowed it. So those nested forms might think that they are still visible even though they are not.

Please use the new onBeforeHide method/handler instead if you want to prevent forms from hiding.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onShow = form.newMethod('function onShow(firstShow, event) { application.output("onShow intercepted on " + event.getFormName() + ". first show? " + firstShow); return false; }');
form.onHide = form.newMethod('function onHide(event) { application.output("Hide called but this should not block, use onbefore hdie for that" + event.getFormName());}');
form.onBeforeHide = form.newMethod('function onHide(event) { application.output("onBeforeHide blocked on " + event.getFormName()); return false; }');
```

### onLoad

The method that is triggered when a form is loaded/reloaded from the repository; used to alter elements, set globals, hide toolbars, etc; onShow method can also be assigned.

NOTE 1: onShow should be used to access current foundset dataproviders; onLoad cannot be used because the foundset data is not loaded until after the form is loaded. Also calls to loadRecords() should be done in the onShow method and not in the onLoad method. If you call loadRecords() in the onShow method, you may want to set the namedFoundSet property of the form to 'empty' to prevent the first default form query.

NOTE 2: the onLoad event bubbles down, meaning that the onLoad is first fired on the parent then on a tab in a tabpanel (and in tab of that tab panels if you are 3 deep)

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onLoad = form.newMethod('function onLoad(event) { application.output("onLoad intercepted on " + event.getFormName()); }');
form.onUnLoad = form.newMethod('function onUnLoad(event) { application.output("onUnLoad intercepted on " + event.getFormName()); }');
```

### onRecordEditStart

The method that is triggered when a user starts editing a record (for example by clicking into a cell of a table, or editing a field who's data-provider is from that record).

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onRecordEditStart = form.newMethod('function onRecordEditStart(event) { application.output("onRecordEditStart intercepted on " + event.getFormName()); }');
form.onRecordEditStop = form.newMethod('function onRecordEditStop(record, event) { application.output("onRecordEditStop intercepted on " + event.getFormName() + ". record is: " + record); }');
form.onRecordSelection = form.newMethod('function onRecordSelection(event) { application.output("onRecordSelection intercepted on " + event.getFormName()); }');
```

### onRecordEditStop

The method that is triggered when a record is being saved.\
A record is saved when a user clicks out of it (for example on an empty part of the layout or to another form).

When this event handler returns false (for example as part of a validation), the user cannot leave the record (change selected record).

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onRecordEditStart = form.newMethod('function onRecordEditStart(event) { application.output("onRecordEditStart intercepted on " + event.getFormName()); }');
form.onRecordEditStop = form.newMethod('function onRecordEditStop(record, event) { application.output("onRecordEditStop intercepted on " + event.getFormName() + ". record is: " + record); }');
form.onRecordSelection = form.newMethod('function onRecordSelection(event) { application.output("onRecordSelection intercepted on " + event.getFormName()); }');
```

### onRecordSelection

The method that is triggered each time a record is selected.

NOTE 1: Data and Servoy tag values are returned when the onRecordSelection method is executed.\
NOTE 2: this will also fire if the selection goes to -1 because the foundset is cleared. So foundset.getSelectedRecord() can return null.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onRecordEditStart = form.newMethod('function onRecordEditStart(event) { application.output("onRecordEditStart intercepted on " + event.getFormName()); }');
form.onRecordEditStop = form.newMethod('function onRecordEditStop(record, event) { application.output("onRecordEditStop intercepted on " + event.getFormName() + ". record is: " + record); }');
form.onRecordSelection = form.newMethod('function onRecordSelection(event) { application.output("onRecordSelection intercepted on " + event.getFormName()); }');
```

### onResize

The method that gets triggered when resize occurs.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onResize = form.newMethod('function onResize(event) { application.output("onResize intercepted on " + event.getFormName()); }');
```

### onShow

The method that is triggered EVERY TIME the form is displayed; an true argument will be passed to the method if this is the first time the form is displayed.

NOTE 1: onShow can be used to access current foundset dataproviders; onLoad cannot be used because the foundset data is not loaded until after the form is loaded.\
NOTE 2: the onShow event bubbles down, meaning that the onShow event of a form displayed in a tabPanel is fired after the onShow event of the parent.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onShow = form.newMethod('function onShow(firstShow, event) { application.output("onShow intercepted on " + event.getFormName() + ". first show? " + firstShow); return false; }');
form.onHide = form.newMethod('function onHide(event) { application.output("Hide called but this should not block, use onbefore hdie for that" + event.getFormName());}');
form.onBeforeHide = form.newMethod('function onHide(event) { application.output("onBeforeHide blocked on " + event.getFormName()); return false; }');
```

### onSortCmd

The method that overrides the Servoy menu item Select > Sort.\
This property is automatically set to "DEFAULT" (no override) when the form is created.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onSortCmd = form.newMethod('function onSortCmd(dataProviderID, asc, event) { application.output("onSortCmd intercepted on " + event.getFormName() + ". data provider: " + dataProviderID + ". asc: " + asc); }');
```

### onUnLoad

The method that is triggered when a form is unloaded from the repository.

NOTE: Forms can be prevented from being removed from memory by referencing the form object in a global variable or inside an array inside a global variable. But do take care when using this technique. Forms take up memory and if too many forms are in memory and cannot be unloaded, there is a possibility of running out of memory.

**Type**\
[JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod)

**Sample**

```js
form.onLoad = form.newMethod('function onLoad(event) { application.output("onLoad intercepted on " + event.getFormName()); }');
form.onUnLoad = form.newMethod('function onUnLoad(event) { application.output("onUnLoad intercepted on " + event.getFormName()); }');
```

### responsiveLayout

Returns true if this form is in responsive mode

**Type**\
[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

**Sample**

```js
var myForm = solutionModel.getForm('myform');
if (myForm.isResponsive()) {}
```

### scrollbars

Scrollbar options for the vertical and horizontal scrollbars. Each of the vertical and horizontal scrollbars can be configured to display all the time, to display only when needed or to never display.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var form = solutionModel.newForm('myForm',myDatasource,null,true,1000,600);
form.scrollbars = SM_SCROLLBAR.VERTICAL_SCROLLBAR_NEVER;
forms['newForm1'].controller.show();
```

### selectionMode

Returns the value of the form's selectionMode property.\
Selection mode is applied when necessary to the foundset used by the form (through it's multiSelect property), even if the foundset changes.\
If two or more forms with non-default and different selectionMode values share the same foundset, the visible one decides.\
If two or more non-visible forms with non-default and different selectionMode values share the same foundset, one of them (always the same from a set of forms) decides.\
If two or more visible forms with non-default and different selectionMode values share the same foundset, one of them (always the same from a set of forms) decides what the\
foundset's selectionMode should be.

Can be one of SELECTION\_MODE\_DEFAULT, SELECTION\_MODE\_SINGLE or SELECTION\_MODE\_MULTI.

**Type**\
[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

**Sample**

```js
var myForm = solutionModel.getForm('my_form_name');
if (myForm.selectionMode == JSForm.SELECTION_MODE_MULTI) myForm.selectionMode = JSForm.SELECTION_MODE_DEFAULT;
```

### serverName

Get the server name used by this form.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var form = solutionModel.newForm('myForm',myDatasource,null,true,800,600);
form.serverName = 'anotherServerName';
var theServerName = form.serverName;
application.output(theServerName);
```

### styleClass

The Cascading Style Sheet (CSS) class name applied to the form.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var aForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
if (aForm.styleClass == null)
	aForm.styleClass = someStyleClass;
else
	application.output("The Cascading Style Sheet (CSS) class name applied to this form is " + aForm.styleClass);
```

### tableName

The \[name of the table/SQL view].\[the name of the database server connection] the form is based on.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var aForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
aForm.tableName = 'anotherTableOfMine'
if (forms['newForm1'].controller.find())
{
	columnTextDataProvider = '=aSearchedValue'
	columnNumberDataProvider = '>10';
	forms['newForm1'].controller.search()
}
```

### titleText

The text that displays in the title bar of the form window.\
NOTE: Data tags and Servoy tags can be used as part of the title text.

**Type**\
[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

**Sample**

```js
var myForm = solutionModel.newForm('newForm', 'db:/a_server/a_table', 'aStyleName', false, 800, 600)
forms['newForm'].controller.show();
if (myForm.titleText == null)
{
	myForm.titleText = "My new title text should be really cool!"
	forms['newForm'].controller.recreateUI();
}
else
	application.output("My text text is already cool");
```

### transparent

When set, the form is transparent.

**Type**\
[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

**Sample**

```js
var form = solutionModel.newForm('myForm',myDatasource,null,true,1000,800);
if (form.transparent == false)
{
	var style = solutionModel.newStyle('myStyle','form { background-color: yellow; }');
	style.text = style.text + 'field { background-color: blue; }';
	form.styleName = 'myStyle';
}
var field = form.newField('columnTextDataProvider',JSField.TEXT_FIELD,100,100,100,50);
forms['myForm'].controller.show();
```

### useCssPosition

Get or set the positioning (either use anchoring or use css position) for the form.\
This is only working for absolute layout forms in NGClient.

**Type**\
[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

**Sample**

```js
var myForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
myForm.useCssPosition = true;
```

### useMinHeight

If true then the min-height css property will be set for this form so it has a default minimum height.

Can return null so that the default system value should be used.

**Type**\
[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

**Sample**

```js
var myForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
myForm.useMinHeight = true;
```

### useMinWidth

If true then the min-with css property will be set for this form so it has a default minimum width

Can return null so that the default system value should be used.

**Type**\
[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)

**Sample**

```js
var myForm = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
myForm.useMinWidth = true;
```

## Methods Detailed

### findLayoutContainer(name)

Returns a JSLayoutContainer that has the given name throughout the whole form hierarchy.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the container

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) a JSLayoutContainer object

**Sample**

```js
var container = myForm.findLayoutContainer("row1");
application.output(container.name);
```

### findWebComponent(name)

Returns a JSWebComponent that has the given name through the whole hierarchy of JSLayoutContainers

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the web component

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var btn = myForm.findWebComponent("mycomponent");
application.output(mybean.typeName);
```

### getBodyPart()

Retrieves the Body part of the form.

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance corresponding to the Body part of the form.

**Sample**

```js
form.getBodyPart().background = 'blue';
```

### getComment()

Returns the comment of this container.

**Returns:** [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) the comment of this container.

**Sample**

```js
var comment = solutionModel.getForm("my_form").getComment();
application.output(comment);
```

### getComponent(name)

Returns a JSComponent that has the given name; if found it will be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the component

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSComponent object (might be a JSField, JSLabel, JSButton, JSPortal, JSBean, JSWebComponent or JSTabPanel)

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var cmp = frm.getComponent("componentName");
application.output("Component type and name: " + cmp);
```

### getComponents()

Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponents or JSTabPanel.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) an array of all the JSComponents on the form.

**Sample**

```js
var form = solutionModel.getForm("myForm");
var components = form.getComponents();
for (var i in components)
	application.output("Component type and name: " + components[i]);
```

### getComponents(returnInheritedElements)

Returns a array of all the JSComponents that a form has; they are of type JSField,JSLabel,JSButton,JSPortal,JSBean, JSWebComponent or JSTabPanel.

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from the parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) an array of all the JSComponents on the form.

**Sample**

```js
var form = solutionModel.getForm("myForm");
var components = form.getComponents();
for (var i in components)
	application.output("Component type and name: " + components[i]);
```

### getDesignTimeProperty(key)

Get a design-time property of a form.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **key** the property name

**Returns:** [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) The value of the specified design-time property.

**Sample**

```js
var frm = solutionModel.getForm('orders')
var prop = frm.getDesignTimeProperty('myprop')
```

### getDesignTimePropertyNames()

Get the design-time properties of a form.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) An array of design-time property names for the form.

**Sample**

```js
var frm = solutionModel.getForm('orders')
var propNames = frm.getDesignTimePropertyNames()
```

### getFooterPart()

Retrieves the Footer part of the form.

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance corresponding to the Footer part of the form.

**Sample**

```js
form.getFooterPart().background = 'magenta';
```

### getHeaderPart()

Retrieves the Header part of the form.

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance corresponding to the Header part of the form.

**Sample**

```js
form.getHeaderPart().background = 'orange';
```

### getLayoutContainer(name)

Returns a JSLayoutContainer that has the given name of this container.\
Use findLayoutContainer() method to find a JSLayoutContainter through the hierarchy

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the container

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) a JSLayoutContainer object

**Sample**

```js
var container = myForm.getLayoutContainer("row1");
application.output(container.name);
```

### getLayoutContainers()

Returns all JSLayoutContainers objects of this container.\
Does not return the inherited containers, use #getLayoutContainers(true) to get the inherited as well.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) all JSLayoutContainers objects of this container

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var containers = frm.getLayoutContainers();
for (var c in containers)
{
		var fname = containers[c].name;
		application.output(fname);
}
```

### getLayoutContainers(returnInheritedElements)

Returns all JSLayoutContainers objects of this container

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) all JSLayoutContainers objects of this container

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var containers = frm.getLayoutContainers();
for (var c in containers)
{
		var fname = containers[c].name;
		application.output(fname);
}
```

### getMethod(name)

Gets an existing form method for the given name.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the method

**Returns:** [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) a JSMethod object (or null if the method with the specified name does not exist)

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var method = frm.getMethod("myMethod");
application.output(method.code);
```

### getMethods()

Returns all existing form methods for this form.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) all form methods for the form

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var methods = frm.getMethods();
for (var m in methods)
	application.output(methods[m].getName());
```

### getMethods(returnInheritedElements)

Returns all existing form methods for this form.

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from the parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) all form methods for the form

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var methods = frm.getMethods();
for (var m in methods)
	application.output(methods[m].getName());
```

### getPart(type)

Gets a part of the form from the given type (see JSPart constants).

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** The type of the part to retrieve.

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance representing the retrieved form part.

**Sample**

```js
form.getPart(JSPart.HEADER).background = 'red';
form.getPart(JSPart.LEADING_SUBSUMMARY, 160).background = 'red';
```

### getPart(type, height)

Gets a part of the form from the given type (see JSPart constants).\
Use the height if you want to get a specific LEADING\_SUBSUMMARY or TRAILING\_SUBSUMMARY.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** The type of the part to retrieve.
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** The height of the part to retrieve. Use this parameter when retrieving one of multiple\
                            Leading/Trailing Subsummary parts.

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance representing the retrieved form part.

**Sample**

```js
form.getPart(JSPart.HEADER).background = 'red';
form.getPart(JSPart.LEADING_SUBSUMMARY, 160).background = 'red';
```

### getPartYOffset(type)

Returns the Y offset of a given part (see JSPart) of the form. This will include all the super forms parts if this form extends a form.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** The type of the part whose Y offset will be returned.

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) A number holding the Y offset of the specified form part.

**Sample**

```js
// get the subform
var form = solutionModel.getForm('SubForm');
// get the start offset of the body
var height = form.getPartYOffset(JSPart.BODY);
// place a new button based on the start offset.
form.newButton('mybutton',50,50+height,80,20,solutionModel.getGlobalMethod('globals', 'test'));
```

### getPartYOffset(type, height)

Returns the Y offset of a given part (see JSPart) of the form. This will include all the super forms parts if this form extends a form. Use the height parameter for targetting one of multiple subsummary parts.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** The type of the part whose Y offset will be returned.
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** The height of the part whose Y offset will be returned. This is used when\
                         one of multiple Leading/Trailing Sumsummary parts is retrieved.

**Returns:** [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) A number holding the Y offset of the specified form part.

**Sample**

```js
// get the subform
var form = solutionModel.getForm('SubForm');
// get the start offset of the body
var height = form.getPartYOffset(JSPart.BODY);
// place a new button based on the start offset.
form.newButton('mybutton',50,50+height,80,20,solutionModel.getGlobalMethod('globals', 'test'));
```

### getParts()

Gets all the parts from the form (not including the parts of the parent form), ordered by there height (lowerbound) property, from top == 0 to bottom.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) An array of JSPart instances corresponding to the parts of the form.

**Sample**

```js
var allParts = form.getParts()
for (var i=0; i<allParts.length; i++) {
	if (allParts[i].getPartType() == JSPart.BODY)
		application.output('body Y offset: ' + allParts[i].getPartYOffset());
}
```

### getParts(returnInheritedElements)

Gets all the parts from the form (optionally also from the parent form), ordered by there height (lowerbound) property, from top == 0 to bottom.

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the parts from parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) An array of JSPart instances corresponding to the parts of the form.

**Sample**

```js
var allParts = form.getParts()
for (var i=0; i<allParts.length; i++) {
	if (allParts[i].getPartType() == JSPart.BODY)
		application.output('body Y offset: ' + allParts[i].getPartYOffset());
}
```

### getResponsiveLayoutContainer(name)

Returns a JSResponsiveLayoutContainer that has the given name of this container.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the container

**Returns:** [JSResponsiveLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsresponsivelayoutcontainer) a JSResponsiveLayoutContainer object

**Sample**

```js
var container = myForm.getResponsiveLayoutContainer("row1");
application.output(container.name);
```

### getResponsiveLayoutContainers(returnInheritedElements)

Returns all JSResponsiveLayoutContainer objects of this container

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) all JSResponsiveLayoutContainer objects of this container

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var containers = frm.getResponsiveLayoutContainers();
for (var c in containers)
{
		var fname = containers[c].name;
		application.output(fname);
}
```

### getUUID()

Returns the UUID of this form.

**Returns:** [UUID](https://docs.servoy.com/reference/servoycore/dev-api/application/uuid) The UUID of this form.

**Sample**

```js
var form_UUID = myForm.getUUID();
application.output(form_UUID.toString());
```

### getVariable(name)

Gets an existing form variable for the given name.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the variable

**Returns:** [JSVariable](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsvariable) a JSVariable object

**Sample**

```js
var frm = solutionModel.getForm("myForm");
	var fvariable = frm.getVariable("myVarName");
	application.output(fvariable.name + " has the default value of " + fvariable.defaultValue);
```

### getVariables()

An array consisting of all form variables for this form.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) an array of all variables on this form

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var variables = frm.getVariables();
for (var i in variables)
	application.output(variables[i].name);
```

### getVariables(returnInheritedElements)

An array consisting of all form variables for this form.

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from the parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) an array of all variables on this form

**Sample**

```js
var frm = solutionModel.getForm("myForm");
var variables = frm.getVariables();
for (var i in variables)
	application.output(variables[i].name);
```

### getWebComponent(name)

Returns a JSWebComponent that has the given name that is a child of this form, layout container or responsive layout container.\
Use findWebComponent() to find a webcomponent through the hierarchy

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the web component

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var btn = container.getWebComponent("mycomponent");
application.output(mybean.typeName);
```

### getWebComponents()

Returns all JSWebComponents of this form/container.\
If this method is called on a form, then it will return all web components on that form.\
If the form is responsive, it will return the web components from all the containers.\
It does not return the inherited components, use #getWebComponents(true) to get the inherited as well.

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) the list of all JSWebComponent on this forms

**Sample**

```js
var webComponents = myForm.getWebComponents();
for (var i in webComponents)
{
	if (webComponents[i].name != null)
		application.output(webComponents[i].name);
}
```

### getWebComponents(returnInheritedElements)

Returns all JSWebComponents of this form/container.\
If this method is called on a form, then it will return all web components on that form.\
If the form is responsive, it will return the web components from all the containers.

**Parameters**

* [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) **returnInheritedElements** true to also return the elements from parent form

**Returns:** [Array](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/array) the list of all JSWebComponents on this forms

**Sample**

```js
var webComponents = myForm.getWebComponents(false);
for (var i in webComponents)
{
	if (webComponents[i].name != null)
		application.output(webComponents[i].name);
}
```

### newFooterPart(height)

Creates a new Footer part on the form.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** The height of the new part

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSFooter instance corresponding to the newly created Footer form part.

**Sample**

```js
var footer = form.newFooterPart(440);
```

### newHeaderPart(height)

Creates a new Header part on the form.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** The height of the new part

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance corresponding to the newly created Header form part.

**Sample**

```js
var header = form.newHeaderPart(80);
```

### newLayoutContainer()

Create a new layout container as the last child of its parent container.\
This method can only be used in responsive forms.

If you want to use default values and so on from a layout package (like 12grid) or if you use the solution model\
to create a form that is saved back into the workspace (servoyDeveloper.save(form)) then you have to set the\
packageName and specName properties. So that it works later on in the designer.

If the packageName and specName are not provided, then:\
&#x20;  the packageName is the same as for the parent container\
&#x20;  the specName is the first allowed child defined in the specification of the parent container

If the specification of the parent container does not defined allowed children, then if it is not empty\
&#x20;  the packageName and the specName are copied from the first child layout container.

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer();
container.packageName = "12grid";
container.specName = "row";
```

### newLayoutContainer(position)

Create a new layout container. The position is used to determine the generated order in html markup.\
This method can only be used in responsive forms.

If you want to use default values and so on from a layout package (like 12grid) or if you use the solution model\
to create a form that is saved back into the workspace (servoyDeveloper.save(form)) then you have to set the\
packageName and specName properties. So that it works later on in the designer.

If the packageName and specName are not provided, then:\
&#x20;  the packageName is the same as for the parent container\
&#x20;  the specName is the first allowed child defined in the specification of the parent container

If the specification of the parent container does not defined allowed children, then if it is not empty\
&#x20;  the packageName and the specName are copied from the first child layout container.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer(1);
container.packageName = "12grid";
container.specName = "row";
```

### newLayoutContainer(position, spec)

Create a new layout container. The position is used to determine the generated order in html markup.\
This method can only be used in responsive forms.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **spec** a string of the form 'packageName-layoutName', or 'layoutName'

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer(1, "12grid-row");
container.newLayoutContainer(1, "column");
```

### newLayoutContainer(spec)

Create a new layout container as the last child in its parent container.\
This method can only be used in responsive forms.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **spec** a string of the form 'packageName-layoutName', or 'layoutName'

**Returns:** [JSLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jslayoutcontainer) the new layout container

**Sample**

```js
var container = form.newLayoutContainer(1, "12grid-row");
container.newLayoutContainer(1, "column");
```

### newMethod(code)

Creates a new form JSMethod - based on the specified code.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **code** the specified code for the new method

**Returns:** [JSMethod](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsmethod) a new JSMethod object for this form

**Sample**

```js
var form = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
var method = form.newMethod('function aMethod(event){application.output("Hello world!");}');
var button = myListViewForm.newButton('Show message!',50,50,100,30,method);
forms['newForm1'].controller.show();
```

### newPart(type, height)

Creates a new part on the form. The type of the new part (use one of the JSPart constants) and its height must be specified.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** The type of the new part.
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** The height of the new part

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance corresponding to the newly created form part.

**Sample**

```js
var form = solutionModel.newForm('myForm', 'db:/example_data/my_table', null, false, 1200, 800);
var header = form.newPart(JSPart.HEADER, 100);
header.background = 'yellow';
var body = form.newPart(JSPart.BODY, 700);
body.background = 'green';
var footer = form.newPart(JSPart.FOOTER, 800);
footer.background = 'orange';
```

### newResponsiveLayoutContainer(x, y, width, height)

Create a new responsive layout container at a certain position and size.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **x** the horizontal "x" position of the JSBean object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **y** the vertical "y" position of the JSBean object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **width** the width of the JSBean object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** the height of the JSBean object in pixels

**Returns:** [JSResponsiveLayoutContainer](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsresponsivelayoutcontainer) the new responsive layout container

**Sample**

```js
var container = form.newResponsiveLayoutContainer(100, 100, 400, 300);
```

### newTitleHeaderPart(height)

Creates a new Title Header part on the form.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** The height of the new part

**Returns:** [JSPart](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jspart) A JSPart instance corresponding to the newly created Title Header form part.

**Sample**

```js
var titleHeader = form.newTitleHeaderPart(40);
```

### newVariable(name, type)

Creates a new form JSVariable - based on the name of the variable object and the number type, uses the SolutionModel JSVariable constants.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the variable
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** the specified type of the variable (see Solution Model -> JSVariable node constants)

**Returns:** [JSVariable](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsvariable) a JSVariable object

**Sample**

```js
var form = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
var variable = form.newVariable('myVar', JSVariable.TEXT , "'This is a default value (with triple quotes)!'");
//or variable = form.newVariable('myVar', JSVariable.TEXT)
//variable.defaultValue = "'This is a default value (with triple quotes)!'" // setting the default value after the variable is created requires form recreation
//variable.defaultValue = "{a:'First letter',b:'Second letter'}"
var field = form.newField(variable, JSField.TEXT_FIELD, 100, 100, 200, 200);
forms['newForm1'].controller.show();
```

### newVariable(name, type, defaultValue)

Creates a new form JSVariable - based on the name of the variable object , the type and it's default value , uses the SolutionModel JSVariable constants. This method does not require the form to be destroyed and recreated. Use this method if you want to change the form's model without destroying the runtime form\*\*

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the variable
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** the specified type of the variable (see Solution Model -> JSVariable node constants)
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **defaultValue** the default value as a javascript expression string

**Returns:** [JSVariable](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jsvariable) a JSVariable object

**Sample**

```js
var form = solutionModel.newForm('newForm1', myDatasource, null, true, 800, 600);
var variable = form.newVariable('myVar', JSVariable.TEXT , "'This is a default value (with triple quotes)!'");
//or variable = form.newVariable('myVar', JSVariable.TEXT)
//variable.defaultValue = "'This is a default value (with triple quotes)!'" // setting the default value after the variable is created requires form recreation
//variable.defaultValue = "{a:'First letter',b:'Second letter'}"
var field = form.newField(variable, JSField.TEXT_FIELD, 100, 100, 200, 200);
forms['newForm1'].controller.show();
```

### newWebComponent(type)

Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.\
Will receive a generated name. Will be added as last position in container.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var container = myForm.getLayoutContainer("row1")
var bean = container.newWebComponent('mypackage-testcomponent');
```

### newWebComponent(type, position)

Creates a new JSWebComponent (spec based component) object on the RESPONSIVE form.\
Will receive a generated name.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var container = myForm.getLayoutContainer("row1")
var bean = container.newWebComponent('mypackage-testcomponent',1);
```

### newWebComponent(name, type)

Creates a new JSWebComponent (spec based component) object on a form. You must set location/dimension or css position afterwards

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent object
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec or the JSWebComponent constant representing the webcomponent type

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
form.useCssPosition = true
var webcomponent = form.newWebComponent('mywebcomponent','mypackage-testcomponent');

var web_component = form.newWebComponent('mywebcomponent',JSWebComponent.mypackage.testcomponent);
```

### newWebComponent(name, type, position)

Creates a new JSWebComponent (spec based component) object on the RESPONSIVE container(form , layout container or responsive layout container).

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent object
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **position** the position of JSWebComponent object in its parent container

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var container = myForm.getLayoutContainer("row1")
var bean = container.newWebComponent('bean','mypackage-testcomponent',1);
```

### newWebComponent(name, type, x, y, width, height)

Creates a new JSWebComponent (spec based component) object on the form.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent object
* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **type** the webcomponent name as it appears in the spec
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **x** the horizontal "x" position of the JSWebComponent object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **y** the vertical "y" position of the JSWebComponent object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **width** the width of the JSWebComponent object in pixels
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** the height of the JSWebComponent object in pixels

**Returns:** [JSComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jscomponent) a JSWebComponent object

**Sample**

```js
var form = solutionModel.newForm('newForm1', 'db:/server1/table1', null, true, 800, 600);
var bean = form.newWebComponent('bean','mypackage-testcomponent',200,200,300,300);
forms['newForm1'].controller.show();
```

### putDesignTimeProperty(key, value)

Set a design-time property of a form. Value should be primitive data (string, boolean or number).\
Complex values should be stringified before call.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **key** the property name
* [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) **value** the value to set

**Returns:** [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) The previous value of the specified design-time property, or null if none existed.

**Sample**

```js
var frm = solutionModel.getForm('orders')
frm.putDesignTimeProperty('myprop', 'lemon')
```

### removeComponent(name)

Removes a component (JSLabel, JSButton, JSField, JSPortal, JSBean, JSTabpanel, JSWebComponent) that has the given name. It is the same as calling "if(!removeLabel(name) && !removeButton(name) ....)".\
Returns true if removal was successful, false otherwise.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the component to be deleted

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) true if component has been successfully deleted; false otherwise

**Sample**

```js
var form = solutionModel.newForm('newFormX','db:/server1/parent_table',null,true,1000,750);
var jsbutton = form.newButton('JSButton to delete',100,100,200,50,null);
jsbutton.name = 'jsb';
var jslabel = form.newLabel('JSLabel to delete',100,200,200,50,null);
jslabel.name = 'jsl';
jslabel.transparent = false;
jslabel.background = 'green';
var jsfield = form.newField('scopes.globals.myGlobalVariable',JSField.TEXT_FIELD,100,300,200,50);
jsfield.name = 'jsf';
var relation = solutionModel.newRelation('parentToChild','db:/server1/parent_table','db:/server1/child_table',JSRelation.INNER_JOIN);
relation.newRelationItem('parent_table_id', '=', 'child_table_id');
var jsportal = form.newPortal('jsp',relation,100,400,300,300);
jsportal.newField('child_table_id',JSField.TEXT_FIELD,200,200,120);
var childOne = solutionModel.newForm('childOne','db:/server1/child_table',null,false,400,300);
childOne.newField('child_table_id', JSField.TEXT_FIELD,10,10,100,20);
var childTwo = solutionModel.newForm('childTwo','server1','other_table',null,false,400,300);
childTwo.newField('some_table_id', JSField.TEXT_FIELD,10,10,100,100);
var jstabpanel = form.newTabPanel('jst',450,30,620,460);
jstabpanel.newTab('tab1','Child One',childOne,relation);
jstabpanel.newTab('tab2','Child Two',childTwo);
var jsmethod = form.newMethod("function removeMe(event) { var form = solutionModel.getForm('newFormX');\n if ((form.removeComponent('jsb') == true) && (form.removeComponent('jsl') == true) && (form.removeComponent('jsf') == true) && (form.removeComponent('jsp') == true) & (form.removeComponent('jst') == true)) application.output('Components removed ok'); else application.output('Some component(s) could not be deleted'); forms['newFormX'].controller.recreateUI();}");
var removerButton = form.newButton('Click here to remove form components',450,500,250,50,jsmethod);
removerButton.name = 'remover';
forms['newFormX'].controller.show();
```

### removeDesignTimeProperty(key)

Clear a design-time property of a form.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **key** the property name

**Returns:** [Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) The previous value of the specified design-time property, or null if none existed.

**Sample**

```js
var frm = solutionModel.getForm('orders')
frm.removeDesignTimeProperty('myprop')
```

### removeMethod(name)

Removes a form JSMethod - based on the specified code.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the method

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) true if method was removed successfully , false otherwise

**Sample**

```js
var form = solutionModel.newForm('newForm1', null, null, true, 800, 600);
var hello = form.newMethod('function aMethod(event){application.output("Hello world!");}');
var removeMethod = form.newMethod('function removeMethod(event){ \
									solutionModel.getForm(event.getFormName()).removeMethod("aMethod"); \
									forms[event.getFormName()].controller.recreateUI();\
									}');
var button1 = form.newButton('Call method!',50,50,120,30,hello);
var button2 = form.newButton('Remove Mehtod!',200,50,120,30,removeMethod);
forms['newForm1'].controller.show();
```

### removePart(type)

Removes a JSPart of the given type.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** The type of the part that should be removed.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the part is successfully removed, false otherwise.

**Sample**

```js
form.removePart(JSPart.HEADER);
form.removePart(JSPart.LEADING_SUBSUMMARY, 160);
```

### removePart(type, height)

Removes a JSPart of the given type. The height parameter is for removing one of multiple subsummary parts.

**Parameters**

* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **type** The type of the part that should be removed.
* [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) **height** The height of the part that should be removed. This parameter is for\
  &#x20;                   removing one of multiple Leading/Trailing Subsummary parts.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the part is successfully removed, false otherwise.

**Sample**

```js
form.removePart(JSPart.HEADER);
form.removePart(JSPart.LEADING_SUBSUMMARY, 160);
```

### removeVariable(name)

Removes a form JSVariable - based on the name of the variable object.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the variable

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) true if removed, false otherwise (ex: no var with that name)

**Sample**

```js
var form = solutionModel.newForm('newForm1', null, null, true, 800, 600);
var variable = form.newVariable('myVar', JSVariable.TEXT);
variable.defaultValue = "'This is a default value (with triple quotes)!'";
//variable.defaultValue = "{a:'First letter',b:'Second letter'}"
var field = form.newField(variable, JSField.TEXT_FIELD, 100, 100, 200, 200);
forms['newForm1'].controller.show();

variable = form.removeVariable('myVar');
application.sleep(4000);
forms['newForm1'].controller.recreateUI();
```

### removeWebComponent(name)

Removes a JSWebComponent that has the specified name. Returns true if removal was successful, false otherwise.

**Parameters**

* [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) **name** the specified name of the JSWebComponent to be removed

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) true if the JSWebComponent has been removed; false otherwise

**Sample**

```js
var form = solutionModel.getForm('myform');
form.removeWebComponent('mybean')
```

***