You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Replace follow_up_action with action method across cookbook
Update all cookbook code samples and prose so that backend-triggered
frontend events use the new client->action( val = ..., t_arg = ... )
method instead of the deprecated
client->follow_up_action( client->_event_client( ... ) ) pattern.
follow_up_action is no longer the recommended call.
Rewrite the four browser interaction pages whose custom controls
(_z2ui5( )->focus/scrolling/timer and the document.title JS pattern)
are now redundant — they can be driven directly from the backend via
the corresponding cs_event constants:
title.md -> cs_event-set_title
focus.md -> cs_event-set_focus
scrolling.md -> cs_event-scroll_to / cs_event-scroll_into_view
timer.md -> cs_event-start_timer (re-arm in the handler to repeat)
Also update soft_keyboard.md to use cs_event-keyboard_set_mode, and
barcode_scanning.md to use cs_event-set_focus and cs_event-play_audio,
removing the previous raw-JavaScript follow-up patterns.
Extend frontend.md with the new cs_event constants
(set_title, set_focus, scroll_to, scroll_into_view, start_timer,
keyboard_set_mode, clipboard_copy, clipboard_app_state, history_back)
and explain the relationship between _event_client (inline frontend)
and the new action method (frontend event triggered from the backend).
Copy file name to clipboardExpand all lines: docs/cookbook/browser_interaction/focus.md
+24-18Lines changed: 24 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,30 +3,28 @@ outline: [2, 4]
3
3
---
4
4
# Focus
5
5
6
-
abap2UI5 offers the custom control `_z2ui5( )->focus( )` to set the input focus from the backend. Pass a bound variable holding the target control's `id` — the framework moves the cursor to that field after the next `view_model_update( )`.
6
+
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.
7
7
8
8
This is useful for guided data entry, barcode scanning, or any flow where the next field to focus depends on backend logic.
9
9
10
10
#### Basic Usage
11
11
12
-
Bind a `focus_id` variable to the focus control. Update its value in any event handler and call `view_model_update( )`— the browser focuses the matching input automatically:
12
+
After processing an event, call `client->action( )`with `cs_event-set_focus` and the id of the input to focus next:
After the user presses Enter in `id1`, the backend sets `focus_id = id2` and the frontend moves the cursor to the second input. The same pattern works for any chain of fields.
60
+
After the user presses Enter in `id1`, the backend fires `set_focus` for `id2` and the cursor moves to the second input. The same pattern works for any chain of fields.
61
+
62
+
#### Selection Range
63
+
64
+
To position the caret inside the field or pre-select a range, pass the start and end offsets as additional arguments:
65
+
66
+
```abap
67
+
client->action( val = client->cs_event-set_focus
68
+
t_arg = VALUE #( ( `id1` ) ( `0` ) ( `5` ) ) ).
69
+
```
64
70
65
71
#### Barcode Scanning
66
72
67
-
Most barcode scanner devices emulate a keyboard. Combine the focus control with input fields to capture scans into the right field automatically — see [Barcode Scanning](../device_capabilities/barcode_scanning.md) for a full walkthrough.
73
+
Most barcode scanner devices emulate a keyboard. Combine `set_focus` with input fields to capture scans into the right field automatically — see [Barcode Scanning](../device_capabilities/barcode_scanning.md) for a full walkthrough.
Copy file name to clipboardExpand all lines: docs/cookbook/browser_interaction/scrolling.md
+31-25Lines changed: 31 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,65 +3,71 @@ outline: [2, 4]
3
3
---
4
4
# Scrolling
5
5
6
-
abap2UI5 offers the custom control `_z2ui5( )->scrolling( )` to read and set the scroll position of any container from the backend. Bind a name/value table of element IDs to scroll positions — the framework reports current positions back into that table on every roundtrip, and applies new positions to the DOM whenever the update flag is set.
6
+
Scroll a control programmatically from the backend with two frontend events:
7
7
8
-
This is useful for jump-to-top buttons, restoring scroll positions after navigation, or scrolling to a specific row after a backend search.
8
+
-**`cs_event-scroll_to`** — scroll a container to a specific pixel position.
9
+
-**`cs_event-scroll_into_view`** — bring a control into the viewport, wherever the surrounding scroll container currently sits.
9
10
10
-
#### Basic Usage
11
+
Useful for jump-to-top buttons, restoring positions after navigation, or revealing a row after a backend search.
11
12
12
-
Bind two variables to the control: a flag `setupdate` that triggers a write to the DOM, and an `items` table mapping element `id` to scroll position. Update the entry and call `view_model_update( )` — the browser scrolls the matching element:
13
+
#### Scroll to a Position
14
+
15
+
Pass the control id and the vertical position. Optionally also a horizontal position and a scroll behavior (`auto`, `smooth`, or `instant`):
13
16
14
17
```abap
15
18
CLASS z2ui5_cl_sample_scrolling DEFINITION PUBLIC.
16
19
17
20
PUBLIC SECTION.
18
21
INTERFACES z2ui5_if_app.
19
-
DATA mv_scrollupdate TYPE abap_bool.
20
-
DATA mt_scroll TYPE z2ui5_if_types=>ty_t_name_value.
21
22
22
23
ENDCLASS.
23
24
24
25
CLASS z2ui5_cl_sample_scrolling IMPLEMENTATION.
25
26
METHOD z2ui5_if_app~main.
26
27
27
28
IF client->check_on_init( ).
28
-
INSERT VALUE #( n = `id_page` ) INTO TABLE mt_scroll.
29
-
30
29
DATA(page) = z2ui5_cl_xml_view=>factory( )->page( id = `id_page` ).
31
-
page->_z2ui5( )->scrolling(
32
-
setupdate = client->_bind_edit( mv_scrollupdate )
33
-
items = client->_bind_edit( mt_scroll ) ).
34
-
35
30
page->footer( )->overflow_toolbar(
36
31
)->button( text = `Top`
37
32
press = client->_event( `SCROLL_TOP` )
38
33
)->button( text = `Bottom`
39
34
press = client->_event( `SCROLL_BOTTOM` ) ).
40
-
41
35
client->view_display( page->stringify( ) ).
42
36
RETURN.
43
37
ENDIF.
44
38
45
39
CASE client->get( )-event.
46
40
WHEN `SCROLL_TOP`.
47
-
mt_scroll[ n = `id_page` ]-v = `0`.
48
-
mv_scrollupdate = abap_true.
49
-
client->view_model_update( ).
50
-
41
+
client->action( val = client->cs_event-scroll_to
42
+
t_arg = VALUE #( ( `id_page` ) ( `0` ) ) ).
51
43
WHEN `SCROLL_BOTTOM`.
52
-
mt_scroll[ n = `id_page` ]-v = `99999`.
53
-
mv_scrollupdate = abap_true.
54
-
client->view_model_update( ).
44
+
client->action( val = client->cs_event-scroll_to
45
+
t_arg = VALUE #( ( `id_page` ) ( `99999` ) ) ).
55
46
ENDCASE.
56
47
57
48
ENDMETHOD.
58
49
ENDCLASS.
59
50
```
60
51
61
-
On every roundtrip the framework also writes the current scroll position of each tracked element back into `mt_scroll`, so the backend always knows where the user is. Setting `mv_scrollupdate = abap_true` switches the next update from read to write — the value in `mt_scroll` is applied to the DOM and the flag is reset by the frontend.
52
+
The arguments for `scroll_to` are `id`, `scrollTop` (y, px), `scrollLeft` (x, px, optional), and `behavior` (optional):
Copy file name to clipboardExpand all lines: docs/cookbook/browser_interaction/timer.md
+28-93Lines changed: 28 additions & 93 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,28 +3,28 @@ outline: [2, 4]
3
3
---
4
4
# Timer
5
5
6
-
abap2UI5 offers a custom control `z2ui5.Timer` that fires events after a set delay. This is handy for dashboards, status monitors, or any case that needs periodic data updates without user interaction.
6
+
Fire a backend event after a delay with the `start_timer` frontend event. Handy for dashboards, status monitors, or any case that needs a delayed or periodic update without user interaction.
7
7
8
-
Add the timer as a view element with `_z2ui5( )->timer( ... )`. These parameters apply:
8
+
Pass the event name to fire and the delay in milliseconds:
client->action( val = client->cs_event-open_new_tab
69
+
t_arg = VALUE #( ( `https://www.google.com/search?q=abap2ui5` ) ) ).
124
70
```
125
-
The timer starts inactive. When the user clicks the button, the handler sets `mv_check_timer_active` to `abap_true` and the timer fires once, opening a new browser tab via `_event_client`.
126
71
127
-
#### Stopping a Repeating Timer
72
+
#### Replacing a Pending Timer
128
73
129
-
To stop a repeating timer, set the bound `checkactive` flag to `abap_false`:
130
-
131
-
```abap
132
-
WHEN client->check_on_event( `TOGGLE_TIMER` ).
133
-
IF check_timer_active = abap_true.
134
-
check_timer_active = abap_false.
135
-
ELSE.
136
-
check_timer_active = abap_true.
137
-
ENDIF.
138
-
client->view_model_update( ).
139
-
```
74
+
There is one timer at a time. Calling `start_timer` again before the previous one fires replaces it — useful for a debounce, e.g. auto-saving an input field 500 ms after the last keystroke.
140
75
141
76
::: warning
142
-
Each timer event causes a full backend roundtrip. Use sensible intervals (e.g., 2000ms or more) to avoid heavy server load.
77
+
Each timer tick causes a full backend roundtrip. Use sensible intervals (e.g. 2000 ms or more) to avoid heavy server load.
Copy file name to clipboardExpand all lines: docs/cookbook/browser_interaction/title.md
+7-3Lines changed: 7 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ outline: [2, 4]
3
3
---
4
4
# Title
5
5
6
-
Set the text the browser shows in the tab and window title bar. abap2UI5 offers a static option via the user-exit configuration, and a dynamic option via a follow-up JavaScript action.
6
+
Set the text the browser shows in the tab and window title bar. abap2UI5 offers a static option via the user-exit configuration, and a dynamic option via the `action` method.
7
7
8
8
#### Static — via User Exit
9
9
@@ -19,7 +19,7 @@ ENDMETHOD.
19
19
20
20
#### Dynamic — at Runtime
21
21
22
-
To change the title after the app is running — for example, to reflect the current record — push a follow-up action that updates `document.title` directly:
22
+
To change the title after the app is running — for example, to reflect the current record — call the `set_title` frontend event from the backend:
0 commit comments