Events

UI5 control properties can both display data and fire events. This section walks through backend events, frontend events, and follow-up actions.

Backend

To run backend logic when an event fires, use the client->_event method.

Basic

As an example, we use the press property of a button. To fire events to the backend, assign the result of client->_event( 'MY_EVENT_NAME' ) to the matching UI5 control property. The backend can then read the event details with client->get( )-event.

METHOD z2ui5_if_app~main.

    client->view_display( z2ui5_cl_xml_view=>factory(
        )->button(
            text  = `post`
            press = client->_event( `BUTTON_POST` )
        )->stringify( ) ).

    CASE client->get( )-event.
        WHEN `BUTTON_POST`.
            client->message_box_display( `The button was pressed` ).
    ENDCASE.

ENDMETHOD.

If the backend needs more details about the event, use the t_arg parameter to add extra info. Three prefixes are available:

• $source — the UI5 control that fired the event (e.g., ${$source>/text} returns the button text)
• $parameters — the event parameters defined by the UI5 control (e.g., ${$parameters>/id} returns the element ID)
• $event — the UI5 event object itself (e.g., $event>sId returns the event type like press)

For details, see the UI5 docs on event handler arguments and sample Z2UI5_CL_DEMO_APP_167.

Source

Send properties of the event source control to the backend. The syntax ${$source>/text} reads the text property of the UI5 control that fired the event — here, the button itself, returning the button's label (post):

METHOD z2ui5_if_app~main.

    client->view_display( z2ui5_cl_xml_view=>factory(
        )->button( text = `post` press = client->_event(
            val = `BUTTON_POST`
            "reads button text → result: "post"
            t_arg = VALUE #( ( `${$source>/text}` ) ) )
        )->stringify( ) ).

    CASE client->get( )-event.
      WHEN `BUTTON_POST`.
          client->message_box_display( |The button text is { client->get_event_arg( ) }| ).
    ENDCASE.

ENDMETHOD.

Parameters

Read parameters of the event. The syntax ${$parameters>/id} reads the id parameter out of the event's parameter map — UI5 builds a qualified ID like mainView--button_id:

METHOD z2ui5_if_app~main.

    client->view_display( z2ui5_cl_xml_view=>factory(
        )->button( text = `post` id = `button_id` press = client->_event(
            val = `BUTTON_POST`
            "reads event parameter 'id' → result: "mainView--button_id"
            t_arg = VALUE #( ( `${$parameters>/id}` ) ) )
        )->stringify( ) ).

    CASE client->get( )-event.
        WHEN `BUTTON_POST`.
            client->message_box_display( |The button id is { client->get_event_arg( ) }| ).
    ENDCASE.

ENDMETHOD.

Event

Read specific properties of the event object. The syntax $event>sId reads the sId attribute of the UI5 event — here it returns the event type name (press). Note: there's no ${...} wrapper because $event directly references the event object:

METHOD z2ui5_if_app~main.

    client->view_display( z2ui5_cl_xml_view=>factory(
        )->button( text = `post` press = client->_event(
            val = `BUTTON_POST`
            "reads event object attribute → result: "press"
            t_arg = VALUE #( ( `$event>sId` ) ) )
        )->stringify( ) ).

    CASE client->get( )-event.
        WHEN `BUTTON_POST`.
            client->message_box_display( |The event id is { client->get_event_arg( ) }| ).
    ENDCASE.

ENDMETHOD.

WARNING

You can read any object attribute, but use only public and released attributes to avoid compatibility issues with future UI5 versions.

Model Properties

Read model properties bound to the event:

CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.
    DATA name TYPE string.

ENDCLASS.

CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
  METHOD z2ui5_if_app~main.

    client->view_display( z2ui5_cl_xml_view=>factory(
         )->input( client->_bind_edit( name )
        )->button( text = `post` press = client->_event(
            val   = `BUTTON_POST`
            t_arg = VALUE #( ( `$` && client->_bind_edit( name ) ) ) )
        )->stringify( ) ).

    CASE client->get( )-event.
        WHEN `BUTTON_POST`.
            client->message_box_display( |The name is { client->get_event_arg( ) }| ).
    ENDCASE.

ENDMETHOD.

ENDCLASS.

TIP

This is just a demo. Reading name directly would be easier — the framework updates it automatically.

Frontend

If you don't want to handle the event in the backend, fire actions directly on the frontend with client->_event_client. The difference between the two methods:

• client->_event( ) — causes a backend roundtrip; the event runs in the main method
• client->_event_client( ) — runs an action directly in the browser; no backend call

To use a frontend event on a UI5 control property (like press), wrap _event_client inside _event. To fire a frontend event after backend processing, pass _event_client to client->follow_up_action.

The following frontend events are available:

  CONSTANTS:
    BEGIN OF cs_event,
      popup_close               TYPE string VALUE `POPUP_CLOSE`,
      open_new_tab              TYPE string VALUE `OPEN_NEW_TAB`,
      popover_close             TYPE string VALUE `POPOVER_CLOSE`,
      location_reload           TYPE string VALUE `LOCATION_RELOAD`,
      nav_container_to          TYPE string VALUE `NAV_CONTAINER_TO`,
      nest_nav_container_to     TYPE string VALUE `NEST_NAV_CONTAINER_TO`,
      nest2_nav_container_to    TYPE string VALUE `NEST2_NAV_CONTAINER_TO`,
      cross_app_nav_to_ext      TYPE string VALUE `CROSS_APP_NAV_TO_EXT`,
      cross_app_nav_to_prev_app TYPE string VALUE `CROSS_APP_NAV_TO_PREV_APP`,
      popup_nav_container_to    TYPE string VALUE `POPUP_NAV_CONTAINER_TO`,
      download_b64_file         TYPE string VALUE `DOWNLOAD_B64_FILE`,
      set_size_limit            TYPE string VALUE `SET_SIZE_LIMIT`,
    END OF cs_event.

For example, to open a new tab with the matching event:

METHOD z2ui5_if_app~main.

    client->view_display( z2ui5_cl_xml_view=>factory(
        )->button(
            text = `post`
            press = client->_event( client->_event_client(
                 val   = client->cs_event-open_new_tab
                 t_arg = VALUE #( ( `https://github.com/abap2UI5` ) ) ) )
        )->stringify( ) ).

ENDMETHOD.

Follow-up Action

Sometimes you need to call a backend function and then act on the frontend right afterward. The follow-up action event covers this:

METHOD z2ui5_if_app~main.

    client->follow_up_action( client->_event_client(
        val   = client->cs_event-open_new_tab
        t_arg = VALUE #( ( `https://github.com/abap2UI5` ) ) ) ).

ENDMETHOD.

See sample Z2UI5_CL_DEMO_APP_180 for a complete example.