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/configuration/performance.md
+30-2Lines changed: 30 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,10 +10,38 @@ Frontend logic is kept to a minimum: no business logic runs in the browser. Ever
10
10
11
11
abap2UI5 has been successfully tested with tables containing large numbers of entries and columns. So, you can confidently develop your app — performance shouldn't be a concern.
12
12
13
+
### view_display vs view_model_update
14
+
15
+
The most impactful optimization is choosing the right update method:
16
+
17
+
-**`client->view_display( )`** — sends a new XML view and model to the frontend. UI5 destroys the current view and creates a new one from scratch. Use this only on initialization or when the view structure changes.
18
+
-**`client->view_model_update( )`** — sends only updated model data. UI5 refreshes the existing view via data binding — only the changed controls are re-rendered. This preserves UI state (scroll position, focus, etc.) and is significantly faster.
19
+
20
+
```abap
21
+
METHOD z2ui5_if_app~main.
22
+
23
+
CASE abap_true.
24
+
25
+
WHEN client->check_on_init( ).
26
+
DATA(view) = z2ui5_cl_xml_view=>factory(
27
+
)->page( `My App`
28
+
)->text( client->_bind( mv_text )
29
+
)->button( text = `update` press = client->_event( `UPDATE` ) ).
30
+
client->view_display( view->stringify( ) ).
31
+
32
+
WHEN client->check_on_event( `UPDATE` ).
33
+
mv_text = `new value`.
34
+
client->view_model_update( ).
35
+
36
+
ENDCASE.
37
+
38
+
ENDMETHOD.
39
+
```
40
+
13
41
### Suggestions
14
42
Want to optimize your app even more? Here are a few tips:
15
-
* Only call the `client->view_display`method when necessary. Instead, prefer using `client->model_update` so the UI5 framework only re-renders the controls that have actually changed
16
-
* Prefer using `client->bind` and use `client->bind_edit` only when users need to make changes that are processed in the backend. Otherwise, it leads to unnecessary data transfers
43
+
* Only call `client->view_display` when necessary. Prefer `client->view_model_update` so the UI5 framework only re-renders controls that have actually changed
44
+
* Prefer `client->_bind` and use `client->_bind_edit` only when users need to make changes that are processed in the backend. Otherwise, it leads to unnecessary data transfers
17
45
* Declare public attributes in your app class only for variables displayed in the frontend. This helps prevent the framework from accessing unused values
18
46
* Follow standard ABAP best practices, such as reducing loops and using sorted tables, as you would in any other ABAP development project
Copy file name to clipboardExpand all lines: docs/development/events.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
@@ -27,7 +27,13 @@ METHOD z2ui5_if_app~main.
27
27
28
28
ENDMETHOD.
29
29
```
30
-
If the backend needs additional information about the specific event, use parameters like `$event`, `$source`, and `$params` to send further details. Use the t_arg parameter to include these details. Check out [this documentation](https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe) for more information, and refer to sample `Z2UI5_CL_DEMO_APP_167`.
30
+
If the backend needs additional information about the specific event, use the `t_arg` parameter to include additional details. Three special prefixes are available:
31
+
32
+
-**`$source`** — the UI5 control that triggered the event (e.g. `${$source>/text}` returns the button text)
33
+
-**`$parameters`** — the event parameters as defined by the UI5 control (e.g. `${$parameters>/id}` returns the element ID)
34
+
-**`$event`** — the UI5 event object itself (e.g. `$event>sId` returns the event type like `press`)
35
+
36
+
Check out [this documentation](https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe) for more information, and refer to sample `Z2UI5_CL_DEMO_APP_167`.
31
37
32
38
#### Source
33
39
Send properties of the event source control to the backend:
@@ -127,7 +133,14 @@ This is just a demonstration. In this case, it would be easier to access `name`
127
133
:::
128
134
129
135
### Frontend
130
-
If you don't want to process the event in the backend, you can also directly trigger actions at the frontend. The following frontend events are available:
136
+
If you don't want to process the event in the backend, you can directly trigger actions at the frontend using `client->_event_client`. The difference between the two methods:
137
+
138
+
-**`client->_event( )`** — triggers a backend roundtrip, the event is processed in the `main` method
139
+
-**`client->_event_client( )`** — executes an action directly in the browser, no backend call
140
+
141
+
To use a frontend event on a UI5 control property (like `press`), wrap `_event_client` inside `_event`. To execute a frontend event after backend processing, pass `_event_client` to `client->follow_up_action`.
Copy file name to clipboardExpand all lines: docs/development/model/expression_binding.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,8 @@
2
2
3
3
Expression Binding lets you compute values directly in XML views using JavaScript-like expressions. This is especially useful in abap2UI5, as it can reduce server roundtrips by moving calculations, logical conditions, and string operations to the frontend.
4
4
5
+
The syntax `{= ... }` marks a UI5 expression binding. Inside the expression, you can use JavaScript operators (like `===` for strict equality or `Math.max`) and reference model properties with `$` followed by a binding path. Note: `===` is the JavaScript strict equality operator (not an ABAP operator) — it is required because UI5 evaluates these expressions in the browser.
Copy file name to clipboardExpand all lines: docs/development/model/model.md
+10Lines changed: 10 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,3 +66,13 @@ ENDCLASS.
66
66
::: tip **Data in Public Attributes**
67
67
When using One-Way or Two-Way binding, ensure your data is stored in the public attributes of your class. This allows the framework to access it from outside. This is similar to the PBO/PAI logic, where data had to be stored in global variables.
68
68
:::
69
+
70
+
#### Path Parameter
71
+
Both `_bind` and `_bind_edit` accept an optional parameter `path = abap_true`. By default, these methods return the full binding expression (e.g. `{/XX/NAME}`). With `path = abap_true`, only the raw model path is returned (e.g. `/XX/NAME`), which is useful when you need to embed it in complex binding expressions like UI5 types or expression binding:
72
+
```abap
73
+
"default - returns full binding expression: {/XX/QUANTITY}
74
+
client->_bind( quantity )
75
+
76
+
"with path - returns only the model path: /XX/QUANTITY
Copy file name to clipboardExpand all lines: docs/development/view.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
@@ -20,7 +20,7 @@ In abap2UI5, the UI is rendered from a UI5 XML view that you build in your ABAP
20
20
21
21
ENDMETHOD.
22
22
```
23
-
You can use any UI5 control available in the [UI5 SDK](https://sapui5.hana.ondemand.com). However, writing raw XML quickly gets cumbersome. A more practical approach is to use the `Z2UI5_CL_XML_VIEW` helper class, which provides a fluent API for building views:
23
+
You can use any UI5 control available in the [UI5 SDK](https://sapui5.hana.ondemand.com). However, writing raw XML quickly gets cumbersome. A more practical approach is to use the `Z2UI5_CL_XML_VIEW` helper class, which provides a fluent API for building views. The `stringify( )` method at the end serializes the view tree into an XML string that the framework sends to the frontend:
Copy file name to clipboardExpand all lines: docs/get_started/hello_world.md
+19-2Lines changed: 19 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,8 +3,19 @@ outline: [2, 4]
3
3
---
4
4
# Hello World
5
5
6
+
### The Interface
7
+
Every abap2UI5 app implements the `Z2UI5_IF_APP` interface. It has a single method `main` with one parameter — `client` of type `Z2UI5_IF_CLIENT`:
8
+
```abap
9
+
INTERFACE z2ui5_if_app PUBLIC.
10
+
METHODS main
11
+
IMPORTING
12
+
client TYPE REF TO z2ui5_if_client.
13
+
ENDINTERFACE.
14
+
```
15
+
The `client` object is your only access point to the framework. Use it to display views, handle events, exchange data, and navigate between apps.
16
+
6
17
### Basic Example
7
-
Every abap2UI5 app implements the `Z2UI5_IF_APP` interface. Create a new class with the following code:
18
+
Create a new class with the following code:
8
19
```abap
9
20
CLASS zcl_app_hello_world DEFINITION PUBLIC.
10
21
@@ -44,7 +55,13 @@ ENDCLASS.
44
55
```
45
56
46
57
### Event Handler
47
-
Next, we extend the app with a button and an event handler. To ensure that the view is only rendered at the start, we also check for the `on_init` event:
58
+
The `main` method is called on every roundtrip — that is, on initialization and after every user interaction (button press, input submit, etc.). To control what happens when, use `CASE abap_true` to distinguish between lifecycle events:
59
+
60
+
-`client->check_on_init( )` — first call when the app starts
61
+
-`client->check_on_event( )` — user triggered an event (e.g. button press)
62
+
-`client->check_on_navigated( )` — returned from another app via navigation
63
+
64
+
This pattern works because each `check_*` method returns `abap_true` only for its specific phase, making `CASE abap_true` act as a dispatcher:
0 commit comments