Events

UI5 Control properties can be used not only to display data but also to trigger events. Let’s explore how we can leverage this functionality.

Backend

You can trigger backend processing when an event occurs using the client->_event method.

Basic

As an example, we will use the press property of a button. To trigger events in the backend, assign the result of client->_event('MY_EVENT_NAME') to the relevant UI5 control property. Once triggered, the backend can retrieve 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( |Your name is { name }| ).
    ENDCASE.
 
ENDMETHOD.

If the backend requires additional information about the specific event, use parameters like $event, $source, and $params to send further details. Use the t_arg parameter to include these details. See this documentation for more information, and refer to sample Z2UI5_CL_DEMO_APP_167.

Source

Send properties of the event source control to the backend:

METHOD z2ui5_if_app~main.
 
    client->view_display( z2ui5_cl_xml_view=>factory(
        )->button( text = `post` press = client->_event( 
            val = `BUTTON_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

Retrieve parameters of the event:

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` 
            t_arg = VALUE #( ( `${$parameters>/id}` ) ) ) 
        )->stringify( ) ).
 
    CASE client->get( )-event.
        WHEN 'BUTTON_POST'.
            "mainView--button_id
            client->message_box_display( |The button id is { client->get_event_arg( ) }| ).
    ENDCASE.
 
ENDMETHOD.

Event

Retrieve specific properties of the event:

METHOD z2ui5_if_app~main.
 
    client->view_display( z2ui5_cl_xml_view=>factory(
        )->button( text = `post` press = client->_event( 
            val = `BUTTON_POST` 
            t_arg = VALUE #( ( `$event>sId` ) ) ) 
        )->stringify( ) ).
 
    CASE client->get( )-event.
        WHEN 'BUTTON_POST'.
            "press
            client->message_box_display( |The evend id is { client->get_event_arg( ) }| ).
    ENDCASE.
 
ENDMETHOD.

WARNING

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

Model Properties

Retrieve model properties associated with the event:

CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC CREATE PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.
    DATA name TYPE string.

ENDCLASS.

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.

TIP

This is just a demonstration. In this case, it would be easier to access name directly since it’s automatically updated by the framework.

Frontend

If you dont want to process the event in the backend, you can also directly trigger actions at the frontend. The following frontend events re availibkle:

  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 corresponding 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 might want to first call a backend function and then immediately perform an action in the frontend. This is possible with the follow-up action event:

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.

Refer to sample Z2UI5_CL_DEMO_APP_180 for a working example of this functionality.