Data Binding of User Interface Element Properties 

The cooperation of UI elements and context elements is made possible by a mutual data binding. The view that contains the UI elements is bound against the context of the controller assigned to it. If a data binding of context element and UI element property is defined, the changes of the UI element property are directly transferred to the context and vice versa. These changes are also adopted by the properties of other UI elements of the same view if they are bound to the same context element. More complex UI elements – for example, the Table UI element or Tree UI element – can be bound to a context node that represents a collection. Therefore, these UI elements can display the complete data and content of the node.

By storing a reference to a context element, data can be passed directly from the context to the UI element and back. This reference is created by specifying an entry that is similar to a path – for example, MONTHSOFYEAR.MONTHNAME – as a value of a bindable UI element property. A period separates the individual context elements – for example, MONTHSOFYEAR.MONTHNAME.

The Web Dynpro Explorer provides graphical support of the context elements and allows application developers to assign the context nodes and context attributes to the corresponding UI element properties. This means that the data transport between the context element and the UI element does not require an explicit implementation.

Different Data Binding Approaches

There are different data binding concepts for the individual UI elements. The following general rules apply:

●     Data binding with identical or convertible data types

The type of the context attribute must be compatible to the property type. This means that the types must be either identical or the property of the UI element must be of the type String and convertible. In the latter case, the type of the context attribute (for example, InputField.value) does not matter.

●     Data binding of UI elements with dynamic or static character, respectively

For certain UI element properties it does not make sense to be bound to a related context - for example, properties that have a static character. This is why the ID of a UI element, which a label control refers to, cannot be bound to a context. However, the data source of a table UI element, which is usually created dynamically and also represents a structure, must be bound to a context.

●     Data binding of UI elements with a non-scalar character

Many properties of UI elements are not of a scalar character but resemble a collection of values. These elements are not bound to an individual root attribute but to the context attribute of a multiple node. A multiple node can be a dropdown list box, for example. Each element of the multiple node contains a different instance of the context attribute. Therefore, several elements appear in the selection list.

●     Data binding to a context node

There are also properties that refer to an entire node and not only to one of its attributes. This applies to the data source of a table: The elements of the bound node correspond to the table rows, its attributes to the columns.

Note that the IDs of the UI elements are not bound. The same applies to these properties that represent the names of an action and can be executed when an event occurs - for example, CheckBox.onToggle.

Certain properties, however, can be bound to any type of the context attribute if they are defined as convertible. These include:

●      InputField.value

●      Label.text

●      TextEdit.value

●      TextView.text

All other properties can only be bound to a context attribute of the same data type.

 

DDIC Binding of UI Element Properties

As well as being able to be bound to a context attribute (context binding), some properties of certain UI elements can also be bound to a DDIC data type.

For example, the length property of the UI element Inputfield can be bound to either of the following:

●     An attribute of the context of the view

●     A DDIC data type independent of the context attributes

It is thus possible to adapt the length of the input field to the length of the used context attribute or vary it with the length of a DDIC data type. 

Depending on the individual UI element, DDIC binding is possible for properties connected with field labels and the character length of fields. In the case of the above example of the UI element Inputfield, the properties length and tooltip can be bound to a DDIC data type. You normally choose from the options Short Text, Medium Text, Long Text, and so on.