Binding ​

In abap2UI5 you share data between your ABAP code and the UI5 frontend with client->_bind( ). There is only one binding, and it works in both directions: when the value is changed in an editable control, the framework writes it back to your ABAP attribute before the next event handler runs. Only the paths the user actually edited are transported back (a delta), so read-only data costs nothing on the way back.

Displaying Data ​

Bind an attribute to a display-only control (e.g. text) — nothing is editable there, so nothing syncs back:

CLASS zcl_app_hello_world DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.
    DATA name TYPE string.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS zcl_app_hello_world IMPLEMENTATION.
  METHOD z2ui5_if_app~main.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
        )->ele( n = `View` ns = `mvc`
            )->a( n = `xmlns`     v = `sap.m`
            )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`

            )->ele( `Page`
                )->a( n = `title` v = `abap2UI5 - Hello World`

                )->tag( `Text`
                    )->a( n = `text` v = `My Text`
                )->tag( `Text`
                    )->a( n = `text` v = client->_bind( name ) ).

    client->view_display( view->stringify( ) ).

  ENDMETHOD.
ENDCLASS.

This method works with tables, trees, and other nested data structures — see Tables and Trees.

Editing Data ​

Bind an attribute to an editable control (e.g. input). After an event, the framework has already synced the user's changes back to your ABAP attribute:

CLASS zcl_app_hello_world DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.
    DATA name TYPE string.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS zcl_app_hello_world IMPLEMENTATION.
  METHOD z2ui5_if_app~main.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
        )->ele( n = `View` ns = `mvc`
            )->a( n = `xmlns`     v = `sap.m`
            )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`

            )->ele( `Page`
                )->a( n = `title` v = `abap2UI5 - Hello World`

                )->tag( `Text`
                    )->a( n = `text` v = `Enter your name`
                )->tag( `Input`
                    )->a( n = `value` v = client->_bind( name )
                )->tag( `Button`
                    )->a( n = `text`  v = `post`
                    )->a( n = `press` v = client->_event( `POST` ) ).

    client->view_display( view->stringify( ) ).


    CASE client->get( )-event.
      WHEN `POST`.
        client->message_box_display( |Your name is { name }.| ).
        RETURN.
    ENDCASE.

  ENDMETHOD.
ENDCLASS.

BINDING_ERROR - No class attribute for binding found -
Please check if the bound values are public attributes of your class

Binding to Structures ​

When the bound attribute is a structure, refer to a field directly with the - component selector. The framework generates one model path per field — the structure name and the component name, in upper case, joined by /:

TYPES: BEGIN OF ts_order,
         customer TYPE string,
         material TYPE string,
         quantity TYPE i,
       END OF ts_order.

DATA edit_row TYPE ts_order.

...

)->tag( `Input`
    )->a( n = `value` v = client->_bind( edit_row-customer )   " resolves to {/EDIT_ROW/CUSTOMER}
)->tag( `Input`
    )->a( n = `value` v = client->_bind( edit_row-material )
)->tag( `Input`
    )->a( n = `value` v = client->_bind( edit_row-quantity )

Nested structures follow the same rule recursively (edit_row-address-city → /EDIT_ROW/ADDRESS/CITY). Internal tables of structures use one row context per item — see Tables.

Data-Type Mapping ​

ABAP and UI5 do not share a type system. When ABAP values cross to the frontend they are serialized to JSON and then read by UI5 controls. The table below is the reference for how each ABAP type travels on the wire and which UI5 binding it pairs with. For the controls that need an explicit type: or formatter, the linked sections in Formatter show the full binding-string pattern.

When a value looks wrong, the fix is almost always a UI5-side type (e.g. sap.ui.model.type.Date, sap.ui.model.type.Float) or an abap2UI5 Formatter. The shape is always the same — build a JSON binding string with parts and type, using path = abap_true on _bind to inject the raw model path:

)->tag( `Input`
    )->a( n = `value` v = |\{ parts: [ `{ client->_bind( val = amount   path = abap_true ) }`,
                                       `{ client->_bind( val = currency path = abap_true ) }` ],
                              type: 'sap.ui.model.type.Currency' \}|

See Formatter for the full example with formatOptions, constraints, and read-only display variants.

Working Samples ​

Complete apps from the sample catalog that use what this page describes. Each is a single class — pull the repository with abapGit and start it with ?app_start=<class>.