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 catalog
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 |