Device Model

abap2UI5 offers two ways to access device information: directly in the view via the UI5 device model (frontend), or in ABAP logic via client->get( )-s_device (backend).

Frontend

By default, the device model binds to the view under the name device. Use standard UI5 binding syntax to show device properties directly — no backend roundtrip needed:

    )->tag( `Input`
        )->a( n = `description` v = `device model - resize - width`
        )->a( n = `value`       v = `{device>/resize/width}` )

For all parameters, see the UI5 docs.

Backend

When you need device information in your ABAP logic (e.g., to adapt behavior based on the browser or screen size), read it from client->get( )-s_device — no custom control, no extra event needed. The value is shipped with every roundtrip:

DATA(device) = client->get( )-s_device.

DATA(system)      = device-system.            " e.g. `desktop`, `phone`, `tablet`
DATA(orientation) = device-orientation.       " `landscape` | `portrait`

DATA(browser)     = device-browser-name.      " e.g. `chrome`
DATA(brw_version) = device-browser-version.

DATA(os)          = device-os-name.           " e.g. `win`, `mac`, `ios`, `android`
DATA(os_version)  = device-os-version.

DATA(width)       = device-resize-width.      " current viewport, in px
DATA(height)      = device-resize-height.

DATA(touch)       = device-support-touch.
DATA(pointer)     = device-support-pointer.
DATA(retina)      = device-support-retina.

Both Together

Press Run — the top half reads the device model straight in the view, the bottom half is the same information taken from ABAP:

CLASS z2ui5_cl_sample_device DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    DATA mv_system  TYPE string.
    DATA mv_browser TYPE string.
    DATA mv_size    TYPE string.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS z2ui5_cl_sample_device IMPLEMENTATION.
  METHOD z2ui5_if_app~main.

    IF client->check_on_navigated( ).

      DATA(device) = client->get( )-s_device.
      mv_system  = device-system.
      mv_browser = |{ device-browser-name } { device-browser-version }|.
      mv_size    = |{ device-resize-width } x { device-resize-height }|.

      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`
              )->a( n = `xmlns:form` v = `sap.ui.layout.form`

              )->ele( `Page`
                  )->a( n = `title` v = `Device Model`

                  )->ele( n = `SimpleForm` ns = `form`
                      )->a( n = `title`    v = `From the view (frontend)`
                      )->a( n = `editable` b = abap_true

                      )->ele( n = `content` ns = `form`
                          )->tag( `Label`
                              )->a( n = `text` v = `width`
                          )->tag( `Text`
                              )->a( n = `text` v = `{device>/resize/width}`
                          )->tag( `Label`
                              )->a( n = `text` v = `phone`
                          )->tag( `Text`
                              )->a( n = `text` v = `{device>/system/phone}`

                      )->end(

                  )->end(

                  )->ele( n = `SimpleForm` ns = `form`
                      )->a( n = `title`    v = `From ABAP (backend)`
                      )->a( n = `editable` b = abap_true

                      )->ele( n = `content` ns = `form`
                          )->tag( `Label`
                              )->a( n = `text` v = `system`
                          )->tag( `Text`
                              )->a( n = `text` v = client->_bind( mv_system )
                          )->tag( `Label`
                              )->a( n = `text` v = `browser`
                          )->tag( `Text`
                              )->a( n = `text` v = client->_bind( mv_browser )
                          )->tag( `Label`
                              )->a( n = `text` v = `viewport`
                          )->tag( `Text`
                              )->a( n = `text` v = client->_bind( mv_size ) ) ).

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

    ENDIF.

  ENDMETHOD.
ENDCLASS.

The frontend half updates as the window is resized; the backend half is a snapshot of the roundtrip that built the view.

Working Samples

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

Sample	Class
Device Model: Phone, Tablet, Desktop (A)	Z2UI5_CL_SMP_APP_445