Add and Format Data

Open our Binding Designer by clicking the Binding-Icon in Widget-Properties. It comes in two modes:

Binding Designer
Code Editor

You can easily switch between the two modes by clicking the mode button on the upper right corner of our Binding Editor view.

When switching from Code Editor to Binding Designer your custom code gets lost.
Currently the Binding Editor does not work for Screen properties

Binding Designer

The Binding Designer lets you use and combine multiple data sources and operators. You also can use a operators output as data source for another operator.

Data sources

Currently the following data sources are supported:

Variables
Constants
Data Sources (if you have configured one in the corresponding Widget or one of its parents)

Adding a data source

Add a data source to the Binding Designer or a configured operator by just dragging & dropping the required source shape to the pane or operator. Then you can configure the shape as in our Process Designer mapping dialogs.

Deleting a data source

To delete a datasource select it and press the delete button on your keyboard or the trash icon.

Within data workbench you can get a reference list to a variable, which indicates all binded properties where that variable is used. (Read more)

Operators

Operators enhance your possibilities of data binding.

Adding an operator and its data sources

Add an operator to the Binding Designer by just dragging & dropping the required operator shape to the pane or function. Then you can add your data sources also per drag&drop.

The use of operators is not limited. Combination of operators is possible. Just link output of one operator shape with input of another operator shape.

Deleting an operator and its data sources

To delete a data source from your operator or the operator itself just select it and press the delete button on your keyboard or the trash icon.

Operator overview

Operator	Description
Concatenate	Concatenate multiple texts
Format Date & Time	Convert a date text in the required data/time format
Format Number	Convert number in the required format

Concatenation of texts

To concatenate multiple texts just use the “Concatenate” operator.

Add the required data sources. To concatenate more than two texts, just add all to the operator’s shape. After adding a data source a new placeholder is created automatically.

Finally set the delimiter by double-clicking the operator’s shape. You can select a predefined delimiter or set your own delimiter.

Date/Time Conversion

To convert a given data source into a specific date/time format just use the “Format Date & Time” operator.

Add a data source and open the conversions settings dialog by double-clicking the operators’ shape.

Set the given format of your data source and the required output format and save your settings. If the predefined format does not fit your needs just set the input and/or output format to custom and set the required custom patterns. (Find out more about possible patterns on unicode.org)

You must set the right input format for the date field coming from business object or connector. You can use the test dialog of the business object method or connector call to find out the delivered format. If you don’t set the suitable input format, the date & time formatter runs in an error and won’t display the data in your application.

Number formatting

To format a given data source into a number format just use the “Format Number” operator.

Add a data source and open the conversions settings dialog by double-clicking the operators’ shape.

Set the given format of your data source and the required output format and save your settings. The preview directly shows the outcome based on given sample.

Code Editor

The Code Editor enables you to add complex bindings. Full set of UI5 data bindings is supported. For more details on types and syntax see UI5 documentation.