Servoy Developer

First Launch Experience
Servoy Developer UI
Form Editor

The Form Editor in Servoy 6 has gotten a major overhaul. The main new features are a configurable Palette, Alignment Guides for placing, moving & resizing elements and many keyboard shortcuts for new and existing functions. Also the Form editing toolbars have been inlined into the editor, instead of being part of the main toolbar area.


Alignment Guides

The Form Editor in Servoy 6 provides a sophisticated mechanism for aligning newly placed, moved or resized elements. The snapping to grid and the display of the grid have been disabled by default in favor of the new alignment guide functionality. 

The new alignment snapping guides are like the grid snapping guides, but the snapping is not based on a fixed grid, but on proximity to existing elements of the Form and/or the Form edges.

The snapping guides offer three configurable offsets (which both work vertically and horizontally) based on proximity to other elements and Form edges and one configurable indentation size based on proximity to another element.

Optionally, Smart Anchoring can be turned on: Smart Anchoring will automatically set the anchoring properly when aligning an element to one of more edges of the Form

The color of the indicators can be configured through the Form Editor preferences (Window > Preferences > Servoy > Form Editor)

Custom Guides

It is also possible to create custom snapping guides by right-clicking one of the rulers (The rulers must be showing). These custom guides are temporary and only for the Form Editor on which they were created. A custom guide can be removed by selecting it in the Ruler and pressing Delete.

Anchoring Feedback

Also added is a click-able Anchoring feedback area on selected element. Clicking the feedback icon pops up a menu with options to quickly set the anchoring options 

The feedback are on the selected element provides visual feedback on how the element is anchored. Examples:
Top & Left:

Top & Right:

Top, Right & Left:

Top, Right, Bottom & Left: 

Same Width/Same Height functionality

New functionality has been added to make multiple elements have the same width and/or height. When two or more elements are selected, the Same Width and Same height functionality gets enabled:

When invoked, all elements get the same height and/or width as the element that was selected first.

When an element gets selected, all elements on the form that have the same width/height as the selected element also get a decorator to show that they have the same width/height as the selected element: 

The feedback indicators can be enabled or disabled, see Misc. The color of the indicators can be configured through the Form Editor preferences (Window > Preferences > Servoy > Form Editor)

Keyboard shortcuts

The following keyboard shortcuts have been added:

New Form wizard


Script Editor

For Servoy 6 the goal was to introduce automated refactoring support for JavaScript. In order to be able to do automated refactoring, the refactoring mechanism needs to be able to analyse all the JavaScript code and determine exactly what every bit of code is, what it's scope is and how it is related to other parts of the code.

In order to achieve this, the entire builder process for the JavaScript source has been rewritten, to better parse and analyse all the JavaScript source code and infer typing information from it.

The result of the effort is that:

  1. Servoy now offers automated JavaScript refactoring support
  2. At design-time all code is being validated and where needed builder markers are generated (which can be ignored or result in Errors or Warnings based on configuration, see Build process )
  3. Code-completion has improved drastically
  4. Call Hierarchy support on methods
  5. Search for References support
  6. JavaScript Search support

In order for all this to work, the builder process needs to be able to infer typing information from the JavaScript source. With JavaScript being a weak-typed and dynamic language, this information can't always be automatically inferred from the source-code itself. 

An example of such a code structure is a JSDataSet. A JSDataSet created based on a query, cannot be automatically analysed @designtime to see which columns it will contain, thus references to the columns will generate builder markers. The same goes for dynamically inside code creating XML/XMLList objects or JavaScript Objects.

Other scenario's are functions that return a generic type like JSRecord or JSFoundset, while the context in which they are called gives then additional properties (in the case of these examples all their dataproviders).

The typing information that cannot be inferred from the source-code itself can be supplied using JSDoc. This can be done for in JSDoc comments above the declaration of functions and variables. In order to supply all the relevant information the JSDoc support within Servoy Developer has been extended as well.

To help identify the area's where the code cannot be automatically analysed, the improved builder process will generate builder markers for all parts of the code where it cannot automatically analyse the code and find all the relevant information.

The majority of the scenario's where code cannot be fully analysed fall into the following categories:

While most scenario's can be solved by providing the right information through JSDoc, some code construct cannot be resolved through JSDoc. In this case dynamic property access can be used to suppress the builder process to generate builder markers:

var id = 1;
var x = {};
x['property' + id] = 1;
x['property' + id] = 2;
var y = x['property1'] + x['property2']

In order to take full advantage of the new refactoring features in Servoy 6, it is vital to resolve the markers by providing the required information through JSDoc. However, through the preferences, the warnings can also be ignored (they are just warnings, which not necessarily indicate errors in code!), but the usefulness of the refactoring functionality will diminish as code refactors will not be complete.

Refactoring support

Added support for automated JavaScript source code refactoring. The following refactoring options are available:

The Refactor functionality can be accessed in the Script Editor through the context menu of the Script Editor (Refactor menu) or through the keyboard shortcut Alt-Shift-R. when performing a refactoring operation, a UI will be show that allows to specify the required information and to preview all the changes that will be made in all the code.

JSDoc support

Code completion


Search support

JavaScript source code only


CSS Editor

A new CSS StyleSheet editor has been incorporated into Servoy Developer, with the following features:


Solution Explorer view
Properties view
Profiler view
New Command Console

Servoy 6 supports a new Command Console view. The command console view is like the Interactive Console view, but with the following differences:

Servoy Developer script access

In Servoy 6 it is possible to interact with Servoy Developer from both Debug Clients and the new Command Console. The available methods are:

The .save(...) methods save the changes to the workspace and does the same as editing a Form in a Form Editor in Servoy Developer and saving the changes. 

Needles to say, this functionality is available only inside Servoy Developer. 

Debug Perspective
Build process

Solution development

Behavior changes
Form Design

CSS support for grid row styling

The rowBGColorCalculation property of forms is deprecated and instead of this it's now possible to provide odd/even/selected row styling information through StyleSheets:

/* Generic Grid styling, styles the following:
 * - ListView row background
 * - TableView grid cell background, foreground & font
 * - Portal grid cell background, foreground & font
 * The row styling classes can be used in combination with form and portal classes:
 * - form odd, form even, form selected, form.xxx odd, form.xxx even, form.xxx selected
 * - portal odd, portal even, portal selected, portal.xxx odd, portal.xxx even, portal.xxx selected

/* Grid row styling: Applies to: Grid of forms in TableView and Portals */
odd, even, selected {
 background-color: #FFFFFF;
 color: #242424;

odd {
 background-color: #F5F7F9;

even {

selected {
 background-color: #d4d4d4;
 color: #FFFFFF;

The CSS grid row styling is applied to all elements in the grid rows. The deprecated rowBGColorCalculation property supported individual cell styling as well: this functionality is replaced conditional formatting functionality though a new onRender event on form and Element level. See "Conditional formatting" below for more information.

Conditional formatting

Starting from Servoy 6 there is a new onRender event added to Forms, Portals and Elements. The aim of this event is to allow changing display properties of supporting components just before they are shown or updated. As such it can be used for conditional formatting for example and it complements the static styling options (setting properties on elements of through StyleSheets, semi conditional Styling (Row styling, see previous item) and the runtime API of all elements.

On Form and Portals the event is fired not only for the Form/Portal itself, but also for all the standard Servoy Elements on the Form/Portal, if the element does not have its own onRender event handler. The Form/Portal level onRedner event will not fire for beans.

The onRender event handler is called with a parameter of type JSRenderEvent, that provides the following functions:

Any updates made in the onRender event to the rendering object are persistent within the Client session until changed through the runtime API of the element or in a consecutive onRender event. This means that in the onRender logic, both states of a property need to be handled. This means that if the onRender is used to set the fgcolor of a field depending if the dataprovider's value is negative or not, the fgcolor needs to be explicitly set for both negative and positive numbers. When the same foreground property is also set in scripting and should overrule the onRender, the developer needs to take care of this inside the onRender logic

Example use: Making negative values in a column red and zero values orange

 * Called before the form component is rendered.
 * @param {JSRenderEvent} event the render event
function onRender(event) {
 /** @type {JSRecord<db:/udm/orders>}*/
 var rec = event.getRecord()
 if (rec.amt_tax == 0) {
    event.getRenderable().fgcolor = '#ff6600';
 } else if (rec.amt_tax < 0) {
    event.getRenderable().fgcolor = '#ff0000';
 } else {
    event.getRenderable().fgcolor = '#000000'; 

(warning)  About performance: The onRender event will be fired often. It's therefor advised to keep the logic inside the onRender event handler method as optimized as possible, for quick execution. It's advised to refrain from calling any code outside the API of the JSRenderEvent or the Renderable class.

Inheritance model

The Inheritance model of Servoy has been enhanced to allow:

Due to the extension of the Inheritance model a behavior change was introduced. When asking for elements and/or parts of forms that extend other forms, the inherited elements/parts are also returned in Servoy 6, whereas prior to Servoy 6, only the non-inherited elements would be returned and the (hierargy of) super forms(s) had to be inspected


Drag 'n' Drop

Web Client specific

Smart Client specific


Solution Model

See more details below under Runtime API > SolutionModel API

Client Design mode
Designtime API
Runtime API

Windowing API

SolutionModel API




Web Client specific
Plugins & Beans

New OpenID plugin:

To be described

Dialogs plugin

DBTree(Table)View beans

File plugin

Maintenance plugin

RESTful Web Services plugin

 * @param {String...} pathArguments
 * @param {Object<Array<String>>} requestParams
function ws_read(pathArgument, requestParams) {
    var _requestParams;
    if (arguments.length > 0 && arguments[arguments.length -1 ] instanceOf Array) {
	_requestParams = arguments[arguments.length - 1];
throw 404; //404 is the HTTP status code for Not Found, for example. (see http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)
 * @param {String} userName
 * @param {String} password
 * @returns {Boolean}
function ws_authenticate(userName, password) {
   //Implement custom authentication logic here
   return true; 

SpellCheck plugin

HTTP plugin

Http plugin enhancements:

PDF plugin

PDF Output plugin

Window plugin





Admin page

All-In-One installer

Service component

Public Java API