From 5d7ff50e387c972c2273e6913e8be6c6af7d4b1c Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 27 May 2026 15:13:00 +0000 Subject: [PATCH] Replace info_frontend custom control with client->get( )-s_device Document client->get( )-s_device as the backend way to access device info on the Device Model page, and remove the info_frontend custom control example. Move the read-side snippets from the Info page into the dedicated Focus and Scrolling pages; the Info page now keeps the UI5 section and references the other three pages. https://claude.ai/code/session_01V9w4eP6AuCzpVHitV9mRXS --- docs/cookbook/browser_interaction/focus.md | 16 +++++ .../cookbook/browser_interaction/scrolling.md | 16 ++++- docs/cookbook/device_capabilities/info.md | 52 +-------------- docs/cookbook/model/device_model.md | 64 +++++-------------- 4 files changed, 49 insertions(+), 99 deletions(-) diff --git a/docs/cookbook/browser_interaction/focus.md b/docs/cookbook/browser_interaction/focus.md index 6c250464..85839a33 100644 --- a/docs/cookbook/browser_interaction/focus.md +++ b/docs/cookbook/browser_interaction/focus.md @@ -3,6 +3,22 @@ outline: [2, 4] --- # Focus +Read which control currently holds the focus from the backend, or move the focus from the backend to a specific field — both work without any custom control. + +#### Read the Current Focus + +`client->get( )-s_focus` tells you which control currently holds the focus and where the caret sits inside it. Useful when an action depends on the field the user was just editing. + +```abap +DATA(focus) = client->get( )-s_focus. + +DATA(id) = focus-id. " id of the focused control +DATA(selection_start) = focus-selection_start. " caret start, in chars +DATA(selection_end) = focus-selection_end. " caret end, in chars +``` + +#### Set the Focus + Set the input focus from the backend with the `set_focus` frontend event. Pass the target control's `id` as the first argument — the framework moves the cursor to that field after the next roundtrip. This is useful for guided data entry, barcode scanning, or any flow where the next field to focus depends on backend logic. diff --git a/docs/cookbook/browser_interaction/scrolling.md b/docs/cookbook/browser_interaction/scrolling.md index 0f9084ec..f11b91d9 100644 --- a/docs/cookbook/browser_interaction/scrolling.md +++ b/docs/cookbook/browser_interaction/scrolling.md @@ -3,13 +3,27 @@ outline: [2, 4] --- # Scrolling -Scroll a control programmatically from the backend with two frontend events: +Read the current scroll positions from the backend, or scroll a control programmatically from the backend with two frontend events: - **`cs_event-scroll_to`** — scroll a container to a specific pixel position. - **`cs_event-scroll_into_view`** — bring a control into the viewport, wherever the surrounding scroll container currently sits. Useful for jump-to-top buttons, restoring positions after navigation, or revealing a row after a backend search. +#### Read the Scroll Position + +`client->get( )-s_scroll` reports the scroll positions of the page and any open dialogs at the moment the event was fired. Each container exposes the id of the scrollable element and its `x` / `y` offsets in pixels. + +```abap +DATA(scroll) = client->get( )-s_scroll. + +DATA(main_y) = scroll-main-y. " main page +DATA(nest_y) = scroll-nest-y. " first nested view +DATA(nest2_y) = scroll-nest2-y. " second nested view +DATA(popup_y) = scroll-popup-y. " open popup +DATA(popover_y) = scroll-popover-y. " open popover +``` + #### Scroll to a Position Pass the control id and the vertical position. Optionally also a horizontal position and a scroll behavior (`auto`, `smooth`, or `instant`): diff --git a/docs/cookbook/device_capabilities/info.md b/docs/cookbook/device_capabilities/info.md index 8403075e..58447074 100644 --- a/docs/cookbook/device_capabilities/info.md +++ b/docs/cookbook/device_capabilities/info.md @@ -7,31 +7,7 @@ abap2UI5 ships the current frontend state with every roundtrip. Read it from `cl #### Device -`client->get( )-s_device` describes the user's device and browser: operating system, browser name and version, screen orientation, current viewport size, and capability flags (touch, pointer, retina). - -```abap -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. -``` - -::: tip **Bind Directly in the View** -If you only need device information in the view (not in ABAP logic), bind to the built-in UI5 device model via `{device>/...}` instead — no backend roundtrip required. See [Device Model](../model/device_model.md). -::: +For reading device information via `client->get( )-s_device`, see [Device Model](../model/device_model.md). #### UI5 @@ -48,30 +24,8 @@ DATA(theme) = ui5-theme. " e.g. `sap_horizon` #### Focus -`client->get( )-s_focus` tells you which control currently holds the focus and where the caret sits inside it. Useful when an action depends on the field the user was just editing. - -```abap -DATA(focus) = client->get( )-s_focus. - -DATA(id) = focus-id. " id of the focused control -DATA(selection_start) = focus-selection_start. " caret start, in chars -DATA(selection_end) = focus-selection_end. " caret end, in chars -``` - -To move the focus from the backend instead of reading it, see [Focus](../browser_interaction/focus.md). +For reading the current focus via `client->get( )-s_focus`, see [Focus](../browser_interaction/focus.md). #### Scroll -`client->get( )-s_scroll` reports the scroll positions of the page and any open dialogs at the moment the event was fired. Each container exposes the id of the scrollable element and its `x` / `y` offsets in pixels. - -```abap -DATA(scroll) = client->get( )-s_scroll. - -DATA(main_y) = scroll-main-y. " main page -DATA(nest_y) = scroll-nest-y. " first nested view -DATA(nest2_y) = scroll-nest2-y. " second nested view -DATA(popup_y) = scroll-popup-y. " open popup -DATA(popover_y) = scroll-popover-y. " open popover -``` - -To scroll from the backend, see [Scrolling](../browser_interaction/scrolling.md). +For reading scroll positions via `client->get( )-s_scroll`, see [Scrolling](../browser_interaction/scrolling.md). diff --git a/docs/cookbook/model/device_model.md b/docs/cookbook/model/device_model.md index a300bf28..c5b88740 100644 --- a/docs/cookbook/model/device_model.md +++ b/docs/cookbook/model/device_model.md @@ -3,7 +3,7 @@ outline: [2, 4] --- # Device Model -abap2UI5 offers two ways to access device information: directly in the view via the UI5 device model (frontend), or by collecting it into ABAP attributes via a custom control (backend). +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 @@ -16,58 +16,24 @@ page->input( For all parameters, see the [UI5 docs](https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.Device). ### Backend -When you need device information in your ABAP logic (e.g., to adapt behavior based on the browser or screen size), use the `info_frontend` custom control. It collects the values on the frontend and returns them via two-way binding (`_bind_edit`). Once the `finished` event fires, all bound attributes are filled and available to ABAP: -```abap -CLASS z2ui5_cl_sample_device DEFINITION PUBLIC. - - PUBLIC SECTION. - INTERFACES z2ui5_if_app. - - DATA ui5_version TYPE string. - DATA ui5_theme TYPE string. - DATA ui5_gav TYPE string. - DATA device_systemtype TYPE string. - DATA device_os TYPE string. - DATA device_browser TYPE string. - DATA check_initialized TYPE abap_bool. - DATA device_phone TYPE abap_bool. - DATA device_desktop TYPE abap_bool. - DATA device_tablet TYPE abap_bool. - DATA device_combi TYPE abap_bool. - DATA device_height TYPE string. - DATA device_width TYPE string. +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: -ENDCLASS. - -CLASS z2ui5_cl_sample_device IMPLEMENTATION. - - METHOD z2ui5_if_app~main. +```abap +DATA(device) = client->get( )-s_device. - DATA(view) = z2ui5_cl_xml_view=>factory( - )->page( )->_z2ui5( - )->info_frontend( - finished = client->_event( `POST` ) - device_browser = client->_bind_edit( device_browser ) - device_os = client->_bind_edit( device_os ) - device_systemtype = client->_bind_edit( device_systemtype ) - ui5_gav = client->_bind_edit( ui5_gav ) - ui5_theme = client->_bind_edit( ui5_theme ) - ui5_version = client->_bind_edit( ui5_version ) - device_phone = client->_bind_edit( device_phone ) - device_desktop = client->_bind_edit( device_desktop ) - device_tablet = client->_bind_edit( device_tablet ) - device_combi = client->_bind_edit( device_combi ) - device_height = client->_bind_edit( device_height ) - device_width = client->_bind_edit( device_width ) ). +DATA(system) = device-system. " e.g. `desktop`, `phone`, `tablet` +DATA(orientation) = device-orientation. " `landscape` | `portrait` - client->view_display( view->stringify( ) ). +DATA(browser) = device-browser-name. " e.g. `chrome` +DATA(brw_version) = device-browser-version. - IF client->get( )-event = `POST`. - "process device info here... - ENDIF. +DATA(os) = device-os-name. " e.g. `win`, `mac`, `ios`, `android` +DATA(os_version) = device-os-version. - ENDMETHOD. +DATA(width) = device-resize-width. " current viewport, in px +DATA(height) = device-resize-height. -ENDCLASS. +DATA(touch) = device-support-touch. +DATA(pointer) = device-support-pointer. +DATA(retina) = device-support-retina. ``` -For a complete example, see `Z2UI5_CL_DEMO_APP_122`.