Skip to content

Commit 1f030b9

Browse files
claudeclaude
committed
Split Event page into Backend, Frontend, Follow-up submenu
1 parent 5ba0a1b commit 1f030b9

4 files changed

Lines changed: 77 additions & 65 deletions

File tree

‎docs/.vitepress/config.mjs‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,16 @@ export default defineConfig({
137137
{ text: "OData", link: "/development/model/odata" },
138138
],
139139
},
140-
{ text: "Event", link: "/development/events" },
140+
{
141+
text: "Event",
142+
link: "/development/events/backend",
143+
collapsed: true,
144+
items: [
145+
{ text: "Backend", link: "/development/events/backend" },
146+
{ text: "Frontend", link: "/development/events/frontend" },
147+
{ text: "Follow-up", link: "/development/events/follow_up" },
148+
],
149+
},
141150
{
142151
text: "Navigation",
143152
link: "/development/navigation/navigation",

docs/development/events.md renamed to docs/development/events/backend.md

Lines changed: 7 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
---
22
outline: [2, 4]
33
---
4-
# Events
4+
# Backend
55

6-
UI5 control properties can both display data and fire events. This section walks through backend events, frontend events, and follow-up actions.
6+
UI5 control properties can both display data and fire events. To run backend logic when an event fires, use the `client->_event` method.
77

8-
### Backend
9-
To run backend logic when an event fires, use the `client->_event` method.
10-
11-
#### Basic
8+
## Basic
129
As an example, we use the `press` property of a button. To fire events to the backend, assign the result of `client->_event( 'MY_EVENT_NAME' )` to the matching UI5 control property. The backend can then read the event details with `client->get( )-event`.
1310

1411
```abap
@@ -35,7 +32,7 @@ If the backend needs more details about the event, use the `t_arg` parameter to
3532

3633
For details, see the [UI5 docs on event handler arguments](https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe) and sample `Z2UI5_CL_DEMO_APP_167`.
3734

38-
#### Source
35+
## Source
3936
Send properties of the event source control to the backend. The syntax `${$source>/text}` reads the `text` property of the UI5 control that fired the event — here, the button itself, returning the button's label (`post`):
4037

4138
```abap
@@ -56,7 +53,7 @@ METHOD z2ui5_if_app~main.
5653
ENDMETHOD.
5754
```
5855

59-
#### Parameters
56+
## Parameters
6057
Read parameters of the event. The syntax `${$parameters>/id}` reads the `id` parameter out of the event's parameter map — UI5 builds a qualified ID like `mainView--button_id`:
6158
```abap
6259
METHOD z2ui5_if_app~main.
@@ -76,7 +73,7 @@ METHOD z2ui5_if_app~main.
7673
ENDMETHOD.
7774
```
7875

79-
#### Event
76+
## Event
8077
Read specific properties of the event object. The syntax `$event>sId` reads the `sId` attribute of the UI5 event — here it returns the event type name (`press`). Note: there's no `${...}` wrapper because `$event` directly references the event object:
8178
```abap
8279
METHOD z2ui5_if_app~main.
@@ -99,7 +96,7 @@ ENDMETHOD.
9996
You can read any object attribute, but use only public and released attributes to avoid compatibility issues with future UI5 versions.
10097
:::
10198

102-
#### Model Properties
99+
## Model Properties
103100
Read model properties bound to the event:
104101
```abap
105102
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
@@ -133,57 +130,3 @@ ENDCLASS.
133130
::: tip
134131
This is just a demo. Reading `name` directly would be easier — the framework updates it automatically.
135132
:::
136-
137-
### Frontend
138-
If you don't want to handle the event in the backend, fire actions directly on the frontend with `client->_event_client`. The difference between the two methods:
139-
140-
- **`client->_event( )`** — causes a backend roundtrip; the event runs in the `main` method
141-
- **`client->_event_client( )`** — runs an action directly in the browser; no backend call
142-
143-
To use a frontend event on a UI5 control property (like `press`), wrap `_event_client` inside `_event`. To fire a frontend event after backend processing, pass `_event_client` to `client->follow_up_action`.
144-
145-
The following frontend events are available:
146-
```abap
147-
CONSTANTS:
148-
BEGIN OF cs_event,
149-
popup_close TYPE string VALUE `POPUP_CLOSE`,
150-
open_new_tab TYPE string VALUE `OPEN_NEW_TAB`,
151-
popover_close TYPE string VALUE `POPOVER_CLOSE`,
152-
location_reload TYPE string VALUE `LOCATION_RELOAD`,
153-
nav_container_to TYPE string VALUE `NAV_CONTAINER_TO`,
154-
nest_nav_container_to TYPE string VALUE `NEST_NAV_CONTAINER_TO`,
155-
nest2_nav_container_to TYPE string VALUE `NEST2_NAV_CONTAINER_TO`,
156-
cross_app_nav_to_ext TYPE string VALUE `CROSS_APP_NAV_TO_EXT`,
157-
cross_app_nav_to_prev_app TYPE string VALUE `CROSS_APP_NAV_TO_PREV_APP`,
158-
popup_nav_container_to TYPE string VALUE `POPUP_NAV_CONTAINER_TO`,
159-
download_b64_file TYPE string VALUE `DOWNLOAD_B64_FILE`,
160-
set_size_limit TYPE string VALUE `SET_SIZE_LIMIT`,
161-
END OF cs_event.
162-
```
163-
For example, to open a new tab with the matching event:
164-
```abap
165-
METHOD z2ui5_if_app~main.
166-
167-
client->view_display( z2ui5_cl_xml_view=>factory(
168-
)->button(
169-
text = `post`
170-
press = client->_event( client->_event_client(
171-
val = client->cs_event-open_new_tab
172-
t_arg = VALUE #( ( `https://github.com/abap2UI5` ) ) ) )
173-
)->stringify( ) ).
174-
175-
ENDMETHOD.
176-
```
177-
178-
### Follow-up Action
179-
Sometimes you need to call a backend function and then act on the frontend right afterward. The follow-up action event covers this:
180-
```abap
181-
METHOD z2ui5_if_app~main.
182-
183-
client->follow_up_action( client->_event_client(
184-
val = client->cs_event-open_new_tab
185-
t_arg = VALUE #( ( `https://github.com/abap2UI5` ) ) ) ).
186-
187-
ENDMETHOD.
188-
```
189-
See sample `Z2UI5_CL_DEMO_APP_180` for a complete example.

‎docs/development/events/follow_up.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
outline: [2, 4]
3+
---
4+
# Follow-up
5+
6+
Sometimes you need to call a backend function and then act on the frontend right afterward. The follow-up action event covers this:
7+
```abap
8+
METHOD z2ui5_if_app~main.
9+
10+
client->follow_up_action( client->_event_client(
11+
val = client->cs_event-open_new_tab
12+
t_arg = VALUE #( ( `https://github.com/abap2UI5` ) ) ) ).
13+
14+
ENDMETHOD.
15+
```
16+
See sample `Z2UI5_CL_DEMO_APP_180` for a complete example.

‎docs/development/events/frontend.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
outline: [2, 4]
3+
---
4+
# Frontend
5+
6+
If you don't want to handle the event in the backend, fire actions directly on the frontend with `client->_event_client`. The difference between the two methods:
7+
8+
- **`client->_event( )`** — causes a backend roundtrip; the event runs in the `main` method
9+
- **`client->_event_client( )`** — runs an action directly in the browser; no backend call
10+
11+
To use a frontend event on a UI5 control property (like `press`), wrap `_event_client` inside `_event`. To fire a frontend event after backend processing, pass `_event_client` to `client->follow_up_action`.
12+
13+
The following frontend events are available:
14+
```abap
15+
CONSTANTS:
16+
BEGIN OF cs_event,
17+
popup_close TYPE string VALUE `POPUP_CLOSE`,
18+
open_new_tab TYPE string VALUE `OPEN_NEW_TAB`,
19+
popover_close TYPE string VALUE `POPOVER_CLOSE`,
20+
location_reload TYPE string VALUE `LOCATION_RELOAD`,
21+
nav_container_to TYPE string VALUE `NAV_CONTAINER_TO`,
22+
nest_nav_container_to TYPE string VALUE `NEST_NAV_CONTAINER_TO`,
23+
nest2_nav_container_to TYPE string VALUE `NEST2_NAV_CONTAINER_TO`,
24+
cross_app_nav_to_ext TYPE string VALUE `CROSS_APP_NAV_TO_EXT`,
25+
cross_app_nav_to_prev_app TYPE string VALUE `CROSS_APP_NAV_TO_PREV_APP`,
26+
popup_nav_container_to TYPE string VALUE `POPUP_NAV_CONTAINER_TO`,
27+
download_b64_file TYPE string VALUE `DOWNLOAD_B64_FILE`,
28+
set_size_limit TYPE string VALUE `SET_SIZE_LIMIT`,
29+
END OF cs_event.
30+
```
31+
For example, to open a new tab with the matching event:
32+
```abap
33+
METHOD z2ui5_if_app~main.
34+
35+
client->view_display( z2ui5_cl_xml_view=>factory(
36+
)->button(
37+
text = `post`
38+
press = client->_event( client->_event_client(
39+
val = client->cs_event-open_new_tab
40+
t_arg = VALUE #( ( `https://github.com/abap2UI5` ) ) ) )
41+
)->stringify( ) ).
42+
43+
ENDMETHOD.
44+
```

0 commit comments

Comments
 (0)