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 an ABAP Dictionary (DDIC) data type.

 

Example: The property length of the UI element InputField can be retrieved by DDIC binding:

●        Length of a specific ABAP Dictionary type

●        Length of the ABAP Dictionary type of a specific context attribute

●        Length of the ABAP Dictionary type of the context attribute of the property value

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 an ABAP Dictionary 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 an ABAP Dictionary data type.

The following options to bind to the ABAP Dictionary are available:

●      Specify context attribute

The ABAP Dictionary information is determined from the ABAP Dictionary type defined in the context attribute.

●      Specify type

The ABAP Dictionary information is determined from the specified ABAP Dictionary type.

●      No specification

Automatic DDIC binding, if it is a Primary Property or it is a label or caption within a table column.

Procedure

...

       1.      Select the binding switch for the properties of the UI element.

If it is the binding for the property explanation, a popup for help texts appears. For more information see Help Texts in and for Web Dynpro Applications.

       2.      Select the switch for the DDIC binding in the window to select the context element.

       3.      Enter the required type and the type characteristics.

○       Type

Specifies which ABAP Dictionary data type is to be used

○       Type characteristic

Specifies which properties of the ABAP Dictionary data type is to be used Possible values are:

■       Short text

■       Medium text

■       Long text

■       Text heading

■       Suitable text

This option is presently not supported. It is open to future ehancements. In the HTML client the first existing text is placed in Matching Text in the following search sequence: medium-length, long, short.

■       Visual length

Standard Behavior with Initial Values

If the value of the following properties of UI elements is set to initial, the value is automatically taken from the ABAP Dictionary:

UI Element	Property	Value from the ABAP Dictionary
AbstractInputField	length	CO_OUTPUT_LEN
TextEdit	cols	CO_OUTPUT_LEN
Label	text	CO_AUTO_TEXT
ProgressIndicator	displayValue	CO_AUTO_TEXT
Caption for use in a TableColumn	text	CO_AUTO_TEXT

The texts from the ABAP Dictionary are evaluated in the following sequence:

       4.      Medium length text

       5.      Long text

       6.      Short text

       7.      Header text

 

Binding to Properties of Context Attributes

There are four special properties of UI elements:

●      enabled

●      readOnly

●      state

●      visible

These UI element properties can be bound to context attribute properties of the primary UI element property.

You can find more information in Properties of Context Attributes.