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
Audio feedback is handy in some scenarios. Fire the `play_audio` frontend event with the URL of a sound file — for example a `.wav` from the SAP MIME repository at `/SAP/PUBLIC/BC/ABAP/mime_demo/bam.wav`:
9
+
10
+
```abap
11
+
CLASS z2ui5_cl_sample_sound DEFINITION PUBLIC.
12
+
13
+
PUBLIC SECTION.
14
+
INTERFACES z2ui5_if_app.
15
+
DATA company_code TYPE string.
16
+
17
+
ENDCLASS.
18
+
19
+
CLASS z2ui5_cl_sample_sound IMPLEMENTATION.
20
+
METHOD z2ui5_if_app~main.
21
+
22
+
IF client->check_on_init( ).
23
+
24
+
DATA(view) = z2ui5_cl_xml_view=>factory( ).
25
+
DATA(vbox) = view->page( )->vbox( ).
26
+
vbox->input( id = `inputApp`
27
+
value = client->_bind_edit( company_code )
28
+
type = `Number`
29
+
placeholder = `Company Code`
30
+
submit = client->_event( `CHECK_INPUT` ) ).
31
+
vbox->button( text = `check`
32
+
press = client->_event( `CHECK_INPUT` ) ).
33
+
34
+
client->view_display( view->stringify( ) ).
35
+
RETURN.
36
+
ENDIF.
37
+
38
+
IF client->get( )-event = `CHECK_INPUT`.
39
+
IF company_code IS INITIAL.
40
+
client->action( val = client->cs_event-play_audio
41
+
t_arg = VALUE #( ( `/SAP/PUBLIC/BC/ABAP/mime_demo/bam.wav` ) ) ).
42
+
client->message_box_display( type = `error` text = `Input is empty!` ).
43
+
ELSE.
44
+
CLEAR company_code.
45
+
ENDIF.
46
+
client->view_model_update( ).
47
+
ENDIF.
48
+
49
+
ENDMETHOD.
50
+
ENDCLASS.
51
+
```
52
+
For a complete sound sample, see `Z2UI5_CL_DEMO_APP_304`.
Copy file name to clipboardExpand all lines: docs/cookbook/device_capabilities/info.md
+64-52Lines changed: 64 additions & 52 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,63 +3,75 @@ outline: [2, 4]
3
3
---
4
4
# Info
5
5
6
-
abap2UI5 offers a custom control for reading all frontend information from the user's device — UI5 version and theme, browser, operating system, system type, screen dimensions, and device class (phone, tablet, desktop). This is handy whenever your ABAP logic needs to adapt to the runtime environment.
6
+
abap2UI5 ships the current frontend state with every roundtrip. Read it from `client->get( )` — no custom control, no extra event needed. The relevant sub-structures are `s_device`, `s_ui5`, `s_focus`, and `s_scroll`.
7
7
8
-
The control collects the values on the frontend and returns them via two-way binding. Once the `finished` event fires, all bound attributes are filled and available to ABAP. See also `Z2UI5_CL_DEMO_APP_122`.
8
+
#### Device
9
+
10
+
`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).
9
11
10
12
```abap
11
-
CLASS z2ui5_cl_sample_frontend_info DEFINITION PUBLIC.
12
-
13
-
PUBLIC SECTION.
14
-
INTERFACES z2ui5_if_app.
15
-
16
-
DATA ui5_version TYPE string.
17
-
DATA ui5_theme TYPE string.
18
-
DATA ui5_gav TYPE string.
19
-
DATA device_systemtype TYPE string.
20
-
DATA device_os TYPE string.
21
-
DATA device_browser TYPE string.
22
-
DATA device_phone TYPE abap_bool.
23
-
DATA device_desktop TYPE abap_bool.
24
-
DATA device_tablet TYPE abap_bool.
25
-
DATA device_combi TYPE abap_bool.
26
-
DATA device_height TYPE string.
27
-
DATA device_width TYPE string.
28
-
29
-
ENDCLASS.
30
-
31
-
CLASS z2ui5_cl_sample_frontend_info IMPLEMENTATION.
DATA(browser) = device-browser-name. " e.g. `chrome`
19
+
DATA(brw_version) = device-browser-version.
20
+
21
+
DATA(os) = device-os-name. " e.g. `win`, `mac`, `ios`, `android`
22
+
DATA(os_version) = device-os-version.
23
+
24
+
DATA(width) = device-resize-width. " current viewport, in px
25
+
DATA(height) = device-resize-height.
26
+
27
+
DATA(touch) = device-support-touch.
28
+
DATA(pointer) = device-support-pointer.
29
+
DATA(retina) = device-support-retina.
61
30
```
62
31
63
32
::: tip **Bind Directly in the View**
64
33
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).
65
34
:::
35
+
36
+
#### UI5
37
+
38
+
`client->get( )-s_ui5` returns the runtime UI5 framework details — handy for version-dependent branching or for logging which build a user runs on.
39
+
40
+
```abap
41
+
DATA(ui5) = client->get( )-s_ui5.
42
+
43
+
DATA(version) = ui5-version. " e.g. `1.141.0`
44
+
DATA(build_timestamp) = ui5-build_timestamp.
45
+
DATA(gav) = ui5-gav. " group, artifact, version
46
+
DATA(theme) = ui5-theme. " e.g. `sap_horizon`
47
+
```
48
+
49
+
#### Focus
50
+
51
+
`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.
52
+
53
+
```abap
54
+
DATA(focus) = client->get( )-s_focus.
55
+
56
+
DATA(id) = focus-id. " id of the focused control
57
+
DATA(selection_start) = focus-selection_start. " caret start, in chars
58
+
DATA(selection_end) = focus-selection_end. " caret end, in chars
59
+
```
60
+
61
+
To move the focus from the backend instead of reading it, see [Focus](../browser_interaction/focus.md).
62
+
63
+
#### Scroll
64
+
65
+
`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.
66
+
67
+
```abap
68
+
DATA(scroll) = client->get( )-s_scroll.
69
+
70
+
DATA(main_y) = scroll-main-y. " main page
71
+
DATA(nest_y) = scroll-nest-y. " first nested view
72
+
DATA(nest2_y) = scroll-nest2-y. " second nested view
73
+
DATA(popup_y) = scroll-popup-y. " open popup
74
+
DATA(popover_y) = scroll-popover-y. " open popover
75
+
```
76
+
77
+
To scroll from the backend, see [Scrolling](../browser_interaction/scrolling.md).
Copy file name to clipboardExpand all lines: docs/cookbook/expert_more/follow_up_action.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
outline: [2, 4]
3
3
---
4
-
# follow_up_action (Obsolete)
4
+
# Follow-up Action (Obsolete)
5
5
6
6
::: warning Do Not Use Anymore
7
7
`client->follow_up_action( )` is obsolete. Use `client->action( )` instead. It works the same way, but **does not allow sending arbitrary JavaScript to the frontend** — which is exactly why `follow_up_action` was deprecated. See [Custom JS](/cookbook/expert_more/custom_js) for the full reasoning behind removing direct JS execution.
Copy file name to clipboardExpand all lines: docs/cookbook/model/expression_binding.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
outline: [2, 4]
3
3
---
4
-
# Expression Binding
4
+
# Expressions
5
5
6
6
Expression Binding lets you compute values directly in XML views with JavaScript-like expressions. This is especially handy in abap2UI5, since it cuts server roundtrips by moving calculations, logical conditions, and string operations to the frontend.
Copy file name to clipboardExpand all lines: docs/cookbook/translation_messages/translation_i18n.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
outline: [2, 4]
3
3
---
4
-
# Translation, i18n
4
+
# Translation
5
5
6
6
Standard UI5 apps handle translations with i18n files stored as frontend artifacts. Since abap2UI5 apps live entirely on the ABAP backend, use ABAP's built-in translation tools instead — text elements, message classes, or data element descriptions.
Copy file name to clipboardExpand all lines: docs/cookbook/view/definition.md
+48-2Lines changed: 48 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,13 @@ outline: [2, 4]
3
3
---
4
4
# Definition
5
5
6
-
In abap2UI5, UI5 renders the UI from an XML view that you build in ABAP. A simple example with raw XML:
6
+
abap2UI5 uses [SAP UI5](https://sapui5.hana.ondemand.com) on the frontend without modification. Whatever your ABAP code sends to the browser is a **standard UI5 XML view** — the same XML you would write in any UI5 freestyle project.
7
+
8
+
The consequence: **everything in the UI5 SDK works in abap2UI5 1:1**. Any control, any property, any namespace from the [UI5 Demo Kit](https://sapui5.hana.ondemand.com/sdk) is available. Copy the XML, paste it into your ABAP class, and it renders.
9
+
10
+
#### Sending a View
11
+
12
+
The simplest case: build an XML string and ship it to the client.
7
13
8
14
```abap
9
15
METHOD z2ui5_if_app~main.
@@ -20,7 +26,12 @@ In abap2UI5, UI5 renders the UI from an XML view that you build in ABAP. A simpl
20
26
21
27
ENDMETHOD.
22
28
```
23
-
You can use any UI5 control from the [UI5 SDK](https://sapui5.hana.ondemand.com). But writing raw XML quickly turns cumbersome. A handier approach is the `Z2UI5_CL_XML_VIEW` helper class, with a fluent API for building views. The `stringify( )` method at the end converts the view tree into an XML string that the framework sends to the frontend:
29
+
30
+
Swap `<Text>` for any other control from the SDK; the framework doesn't care.
31
+
32
+
#### Helper Class
33
+
34
+
Writing raw XML by hand quickly turns cumbersome. abap2UI5 ships the helper class `z2ui5_cl_xml_view` with a fluent API that mirrors the XML structure and gives you code completion. The `stringify( )` method at the end converts the view tree into an XML string that the framework sends to the frontend:
24
35
25
36
```abap
26
37
METHOD z2ui5_if_app~main.
@@ -35,6 +46,8 @@ You can use any UI5 control from the [UI5 SDK](https://sapui5.hana.ondemand.com)
35
46
ENDMETHOD.
36
47
```
37
48
49
+
Both snippets produce the exact same view. Use whichever you prefer — raw strings are fine for a handful of lines, the fluent API scales better for real apps.
50
+
38
51
Tips for working with views:
39
52
- Use code completion on `Z2UI5_CL_XML_VIEW` to find controls and properties
40
53
- See the [samples repository](/get_started/next#sample-apps) for ready-made XML examples to copy and adapt
@@ -52,6 +65,39 @@ Combining controls in a way that violates these rules can lead to broken renderi
52
65
The ABAP compiler cannot catch these mistakes — they are pure UI5 concerns and must be verified against the SDK documentation.
53
66
:::
54
67
68
+
#### Where to Look for Controls
69
+
70
+
Because UI5 XML is used 1:1, **the UI5 documentation is your reference** for anything visual:
71
+
72
+
-[UI5 Demo Kit](https://sapui5.hana.ondemand.com/sdk) — interactive samples for every control
73
+
-[UI5 Control API](https://sapui5.hana.ondemand.com/sdk/#/api) — properties, aggregations, events
74
+
75
+
Find a control you like in the UI5 docs, copy its XML, paste it into `view_display( )` — done. abap2UI5 has no separate control catalog to learn.
76
+
77
+
#### Choosing a Control
78
+
79
+
The UI5 SDK is large. The table below covers the choices that come up in almost every abap2UI5 app — use it as a starting point before diving into the SDK.
| Multi-select dropdown |`sap.m.MultiComboBox`| Pills appear inside the field. |
95
+
| Date / time input |`sap.m.DatePicker` / `sap.m.TimePicker` / `sap.m.DateTimePicker`| Needs a formatter — see [Binding → Data-Type Mapping](/cookbook/model/binding#data-type-mapping). |
96
+
| Status indicator |`sap.m.ObjectStatus`| Colored text + icon for state. |
97
+
| Modal dialog |`sap.m.Dialog` (built with `factory_popup`) | See [Popover](/cookbook/popup_popover/popover). |
98
+
99
+
When two controls fit, prefer the simpler one: `Table` over `TreeTable`, `SimpleForm` over `Form`, `Select` over `ComboBox`. Switch to the richer variant only when a concrete requirement justifies it.
100
+
55
101
## Mapping UI5 XML ↔ ABAP Fluent API
56
102
57
103
`Z2UI5_CL_XML_VIEW` is a hand-curated wrapper around UI5 controls. It does not cover every UI5 control, and the naming is not always a strict 1:1 mapping of the UI5 SDK:
0 commit comments