Skip to end of metadata
Go to start of metadata

Servoy allows conversion from the data shown in the UI elements to the data used in dataProviders.
By default a dataprovider value is used directly in a UI element.
The UI element must support the data type and knows how to handle it.

A UI converter can be configured to realize the conversion between the dataprovider data and UI data.

For example, a datetime dataprovider can be shown and edited in a calendar UI element.
With a UI converter, one can use any dataprovider type in any UI element.

UI converters are currently not supported by the Solution Model.

In This Chapter

Configuring UI Converters in Form Editor

The UI converter is configured at element level in the form editor.
It is edited as part of the format property of an element.

The format property editor allows configuration of the UI converter (mark the checkbox and select one of the available converters).

Built-in UI Converter (GlobalMethodConverter)

Servoy delivers one built-in UI converter, the GlobalMethodConverter, which can also be used as database value converter.
The GlobalMethodConverter has 3 properties:

  • fromObjectMethodName
    The global method that converts from UI value to dataprovider value
  • toObjectMethodName
    The global method that converts from dataprovider value to UI value
  • type (one of TEXT, INTEGER, NUMBER, DATETIME or MEDIA)
    The UI data type (so the resulting type of the toObjectMethodName method).

Example of configuring a UI converter for a form element using the GlobalMethodConverter: This example shows the conversion of null values to '-' in the UI.

Defining the converter methods in globals.js:

function nullToDash() {
    var nr = arguments[0];
    if(nr == null)
        return '-';
    return nr;
}

function dashToNull() {
    var nr = arguments[0];
    if(nr == '-')
        return null;
    return nr;
}

Configuring the UI converter of field 'fldAge' format property:

Code that tests the dataprovider/UI value:

/** @type {JSRecord<db:/example_data/employees>}*/
var rec = foundset.getSelectedRecord();
if(rec.age == null) {
	application.output('Dataprovider value: null')
	application.output('UI value:' + elements.fldAge)
}

The image below shows how data is displayed in the UI:

UI Converter from Java Code (plugin)

A UI converter can be contributed by a Java plugin.

See Providing UI Converters from Plugins for an example on how to implement a plugin which provides a UI converter.

  • No labels