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
Copy file name to clipboardExpand all lines: docs/development/events.md
+21-20Lines changed: 21 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -36,61 +36,62 @@ If the backend needs additional information about the specific event, use the `t
36
36
Check out [this documentation](https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe) for more information, and refer to sample `Z2UI5_CL_DEMO_APP_167`.
37
37
38
38
#### Source
39
-
Send properties of the event source control to the backend:
39
+
Send properties of the event source control to the backend. The syntax `${$source>/text}` reads the `text` property from the UI5 control that fired the event — here the button itself, so the result is the button's label (`post`):
40
40
```abap
41
41
METHOD z2ui5_if_app~main.
42
42
43
43
client->view_display( z2ui5_cl_xml_view=>factory(
44
-
)->button( text = `post` press = client->_event(
45
-
val = `BUTTON_POST`
46
-
t_arg = VALUE #( ( `${$source>/text}` ) ) )
44
+
)->button( text = `post` press = client->_event(
45
+
val = `BUTTON_POST`
46
+
"reads button text → result: "post"
47
+
t_arg = VALUE #( ( `${$source>/text}` ) ) )
47
48
)->stringify( ) ).
48
-
49
+
49
50
CASE client->get( )-event.
50
51
WHEN `BUTTON_POST`.
51
52
client->message_box_display( |The button text is { client->get_event_arg( ) }| ).
52
53
ENDCASE.
53
-
54
+
54
55
ENDMETHOD.
55
56
```
56
57
57
58
#### Parameters
58
-
Retrieve parameters of the event:
59
+
Retrieve parameters of the event. The syntax `${$parameters>/id}` reads the `id` parameter from the event's parameter map — UI5 generates a qualified ID like `mainView--button_id`:
59
60
```abap
60
61
METHOD z2ui5_if_app~main.
61
62
62
63
client->view_display( z2ui5_cl_xml_view=>factory(
63
-
)->button( text = `post` id = `button_id` press = client->_event(
64
-
val = `BUTTON_POST`
65
-
t_arg = VALUE #( ( `${$parameters>/id}` ) ) )
64
+
)->button( text = `post` id = `button_id` press = client->_event(
client->message_box_display( |The button id is { client->get_event_arg( ) }| ).
72
73
ENDCASE.
73
-
74
+
74
75
ENDMETHOD.
75
76
```
76
77
77
78
#### Event
78
-
Retrieve specific properties of the event:
79
+
Retrieve specific properties of the event object. The syntax `$event>sId` accesses the `sId` attribute of the UI5 event — here it returns the event type name (`press`). Note: no `${...}` wrapper here because `$event` directly references the event object:
79
80
```abap
80
81
METHOD z2ui5_if_app~main.
81
82
82
83
client->view_display( z2ui5_cl_xml_view=>factory(
83
-
)->button( text = `post` press = client->_event(
84
-
val = `BUTTON_POST`
85
-
t_arg = VALUE #( ( `$event>sId` ) ) )
84
+
)->button( text = `post` press = client->_event(
85
+
val = `BUTTON_POST`
86
+
"reads event object attribute → result: "press"
87
+
t_arg = VALUE #( ( `$event>sId` ) ) )
86
88
)->stringify( ) ).
87
-
89
+
88
90
CASE client->get( )-event.
89
91
WHEN `BUTTON_POST`.
90
-
"press
91
92
client->message_box_display( |The event id is { client->get_event_arg( ) }| ).
Copy file name to clipboardExpand all lines: docs/development/model/expression_binding.md
+16Lines changed: 16 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,14 @@ The syntax `{= ... }` marks a UI5 expression binding. Inside the expression, you
6
6
7
7
#### Calculate the Maximum Value at the Frontend
8
8
9
+
The inputs use a UI5 type binding (`{ type: ..., path: "..." }`) to ensure integer validation. The third input uses an expression binding (`{= ... }`) to compute the maximum of both values directly in the browser. Here's what the ABAP string concatenation produces at runtime:
10
+
11
+
| ABAP code | UI5 binding result |
12
+
|---|---|
13
+
|`client->_bind( val = input31 path = abap_true )`|`/XX/INPUT31` (raw path for type binding) |
14
+
|`client->_bind( input31 )`|`{/XX/INPUT31}` (full binding for expression) |
The `enabled` property uses an expression binding that resolves to `{= 500===${/XX/QUANTITY} }` — the product field is only editable when the quantity is exactly 500. Note that `===` is the JavaScript strict equality operator.
55
+
41
56
```abap
42
57
CLASS z2ui5_cl_demo_editable DEFINITION PUBLIC.
43
58
@@ -57,6 +72,7 @@ CLASS z2ui5_cl_demo_editable IMPLEMENTATION.
57
72
)->input( `{ type : "sap.ui.model.type.Integer",` &&
Copy file name to clipboardExpand all lines: docs/development/model/odata.md
+13-1Lines changed: 13 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -111,7 +111,19 @@ In SAP contexts, OData services are often enriched with additional annotations.
111
111
<PropertyName="IsPrimaryCurrencyForISOCrcy"Type="Edm.Boolean"sap:display-format="UpperCase"sap:label="primär"sap:quickinfo="primärer SAP-Währungscode zum ISO-Code"/>
112
112
</EntityType>
113
113
```
114
-
We can use these SAP annotations in our UI5 view to utilize backend translations via the property `label`. Here’s an example:
114
+
We can use these SAP annotations in our UI5 view to utilize backend translations via the property `label`. The metadata binding path follows this pattern:
115
+
116
+
```
117
+
{MODEL>/#EntityType/PropertyName/@sap:annotation}
118
+
```
119
+
120
+
-**`TRAVEL>`** — the named OData model
121
+
-**`/#Currency`** — `#` switches to the metadata document, `Currency` is the entity type name (from `<EntityType Name="CurrencyType">`)
122
+
-**`/Currency`** — the property name within that entity type
123
+
-**`/@sap:label`** — the SAP annotation attribute (here: the translated label text)
124
+
125
+
So `{TRAVEL>/#Currency/Currency/@sap:label}` resolves to the value of `sap:label="Währungsschlüssel"` from the metadata — displayed in the user's logon language.
Copy file name to clipboardExpand all lines: docs/development/specific/formatter.md
+17Lines changed: 17 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,23 @@
2
2
3
3
You can format values such as currencies, numerics, or timestamps directly in the frontend using formatter functions.
4
4
5
+
UI5 formatter types use a special JSON-based binding syntax. The key elements:
6
+
-**`parts: [...]`** — lists the model paths used as input (e.g. amount + currency)
7
+
-**`type: '...'`** — the UI5 formatter type (e.g. `sap.ui.model.type.Currency`)
8
+
-**`formatOptions: {...}`** — optional settings that control the output format
9
+
-**`\{ ... \}`** — in ABAP string templates (`|...|`), curly braces must be escaped with `\` because `{ }` normally denotes an ABAP expression
10
+
11
+
The `path = abap_true` parameter on `_bind_edit` returns only the raw model path (e.g. `/XX/AMOUNT`) instead of the full binding expression (`{/XX/AMOUNT}`), so it can be embedded inside the `parts` array.
Copy file name to clipboardExpand all lines: docs/development/trouble.md
+15-2Lines changed: 15 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,17 +2,27 @@
2
2
3
3
#### Hide Soft Keyboard
4
4
5
-
For UI5 input fields, the soft keyboard is automatically shown when focusing an input field. In some use cases, e.g. in the context of warehouses with small devices, this is not always wanted. To change this behavior, we have to adjust the HTML input element and switch the input type to `none`. The following snippet demonstrates how to activate/deactivate the soft keyboard:
5
+
For UI5 input fields, the soft keyboard is automatically shown when focusing an input field. In some use cases, e.g. in the context of warehouses with small devices, this is not always wanted. To change this behavior, we have to adjust the HTML input element and switch the input type to `none`. The following snippet demonstrates how to activate/deactivate the soft keyboard.
6
6
7
-
```abap
7
+
This example uses the **`z2ui5.afterBE` hook** — a JavaScript callback function that the abap2UI5 frontend framework executes after every backend roundtrip. By assigning a custom function to `z2ui5.afterBE`, you can run JavaScript code in the browser after the backend has responded. This is useful for DOM manipulations that UI5 doesn't support natively.
8
+
9
+
The pattern works in two steps:
10
+
1.**Define** the JavaScript function in a `<html:script>` tag (rendered once on init)
11
+
2.**Execute** it after a backend event using `client->follow_up_action( )` with a raw JavaScript string
8
12
13
+
```abap
9
14
METHOD z2ui5_if_app~main.
10
15
11
16
DATA input TYPE string.
12
17
13
18
IF client->check_on_init( ).
14
19
15
20
DATA(view) = z2ui5_cl_xml_view=>factory( ).
21
+
22
+
"Step 1: Define a JavaScript function via an inline <script> tag.
23
+
"z2ui5.afterBE is a hook that runs after the backend responds.
24
+
"This function takes a UI5 control ID and an inputmode value,
25
+
"then modifies the HTML input element's inputmode attribute.
0 commit comments