Skip to content

Commit 11bbe26

Browse files
oblomov-devoblomov-dev
authored
update
1 parent 60f0cf2 commit 11bbe26

File tree

2 files changed

+51
-31
lines changed

2 files changed

+51
-31
lines changed

‎docs/.vitepress/config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ export default defineConfig({
9595
{ text: 'General', link: '/development/general' },
9696
{ text: 'View', link: '/development/view' },
9797
{ text: 'Model', link: '/development/model' },
98-
// { text: 'Events', link: '/development/events' },
99-
// { text: 'Navigation', link: '/development/navigation' },
98+
{ text: 'Events', link: '/development/events' },
99+
{ text: 'Navigation', link: '/development/navigation' },
100100
{ text: 'Messages, Errors', link: '/development/messages' },
101101
{ text: 'Translation, i18n', link: '/development/translation' },
102102
{ text: 'Popups, Popover', link: '/development/popups' },

‎docs/development/events.md‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ outline: [2, 4]
33
---
44
# Events
55

6-
### Frontend
6+
UI5 Control properties can be used not only to display data but also to trigger events. Let’s explore how we can leverage this functionality.
77

8-
#### Basic
8+
### Backend
9+
You can trigger backend processing when an event occurs using the `client->_event` method.
910

10-
If an UI5 property is an event, just import the result of the method `client->_event` to trigger events in the backend. Check out the event with the value `client->get( )-event`:
11+
#### Basic
12+
As an example, we will use the `press` property of a button. To trigger events in the backend, assign the result of `client->_event('MY_EVENT_NAME')` to the relevant UI5 control property. Once triggered, the backend can retrieve the event details with `client->get( )-event`.
1113

1214
```abap
1315
METHOD z2ui5_if_app~main.
@@ -25,16 +27,16 @@ METHOD z2ui5_if_app~main.
2527
2628
ENDMETHOD.
2729
```
30+
If the backend requires 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. See (this documentation)[(https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe)] for more information, and refer to sample `Z2UI5_CL_DEMO_APP_167`.
2831

29-
Sometimes the backend needs more information about the süpecific event, you can use the parameter `$event`, `$source` and `$params` to send further information into the backend. Therefore use the parameter `t_arg`. Check the documentation [here.](https://openui5.hana.ondemand.com/#/topic/b0fb4de7364f4bcbb053a99aa645affe). Check out sampple `Z2UI5_CL_DEMO_APP_167`:
30-
31-
#### Source Properties
32-
Send properties of the event source control:
32+
#### Source
33+
Send properties of the event source control to the backend:
3334
```abap
3435
METHOD z2ui5_if_app~main.
3536
3637
client->view_display( z2ui5_cl_xml_view=>factory(
37-
)->button( text = `post` press = client->_event( val = `BUTTON_POST`
38+
)->button( text = `post` press = client->_event(
39+
val = `BUTTON_POST`
3840
t_arg = VALUE #( ( `${$source>/text}` ) ) )
3941
)->stringify( ) ).
4042
@@ -46,66 +48,83 @@ METHOD z2ui5_if_app~main.
4648
ENDMETHOD.
4749
```
4850

49-
#### Event Parameters
50-
Read Event Parameters:
51+
#### Parameters
52+
Retrieve parameters of the event:
5153
```abap
5254
METHOD z2ui5_if_app~main.
5355
5456
client->view_display( z2ui5_cl_xml_view=>factory(
55-
)->button( text = `post` press = client->_event( val = `BUTTON_POST`
56-
t_arg = VALUE #( ( `${$source>/text}` ) ) )
57+
)->button( text = `post` id = `button_id` press = client->_event(
58+
val = `BUTTON_POST`
59+
t_arg = VALUE #( ( `${$parameters>/id}` ) ) )
5760
)->stringify( ) ).
5861
5962
CASE client->get( )-event.
6063
WHEN 'BUTTON_POST'.
61-
client->message_box_display( |The button text is { client->get_event_arg( ) }| ).
64+
"mainView--button_id
65+
client->message_box_display( |The button id is { client->get_event_arg( ) }| ).
6266
ENDCASE.
6367
6468
ENDMETHOD.
6569
```
6670

67-
#### Event Properties
68-
Read Event Parameters:
71+
#### Event
72+
Retrieve specific properties of the event:
6973
```abap
7074
METHOD z2ui5_if_app~main.
7175
7276
client->view_display( z2ui5_cl_xml_view=>factory(
73-
)->button( text = `post` press = client->_event( val = `BUTTON_POST`
74-
t_arg = VALUE #( ( `${$source>/text}` ) ) )
77+
)->button( text = `post` press = client->_event(
78+
val = `BUTTON_POST`
79+
t_arg = VALUE #( ( `$event>sId` ) ) )
7580
)->stringify( ) ).
7681
7782
CASE client->get( )-event.
7883
WHEN 'BUTTON_POST'.
79-
client->message_box_display( |The button text is { client->get_event_arg( ) }| ).
84+
"press
85+
client->message_box_display( |The evend id is { client->get_event_arg( ) }| ).
8086
ENDCASE.
8187
8288
ENDMETHOD.
8389
```
90+
::: warning
91+
You can access any object attribute, but ensure you access only public and released attributes to avoid compatibility issues with future UI5 versions.
92+
:::
8493

8594
#### Model Properties
86-
Read Event Parameters:
95+
Retrieve model properties associated with the event:
8796
```abap
97+
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC CREATE PUBLIC.
98+
99+
PUBLIC SECTION.
100+
INTERFACES z2ui5_if_app.
101+
DATA name TYPE string.
102+
103+
ENDCLASS.
104+
88105
METHOD z2ui5_if_app~main.
89106
90107
client->view_display( z2ui5_cl_xml_view=>factory(
108+
)->input( client->_bind_edit( name )
91109
)->button( text = `post` press = client->_event(
92110
val = `BUTTON_POST`
93-
t_arg = VALUE #( ( `${$source>/text}` ) ) )
111+
t_arg = VALUE #( ( `$` && client->_bind_edit( name ) ) ) )
94112
)->stringify( ) ).
95113
96114
CASE client->get( )-event.
97115
WHEN 'BUTTON_POST'.
98-
client->message_box_display( |The button text is { client->get_event_arg( ) }| ).
116+
client->message_box_display( |The name is { client->get_event_arg( ) }| ).
99117
ENDCASE.
100-
118+
101119
ENDMETHOD.
102120
```
103121

104-
### Frontend
105-
106-
#### Event Frontend
122+
::: tipp
123+
This is just a demonstration. In this case, it would be easier to access `mv_name` directly since it’s automatically updated by the framework.
124+
:::
107125

108-
The following frontend events re availibkle:
126+
### Frontend
127+
If you dont want to process the event in the backend, you can also directly trigger actions at the frontend. The following frontend events re availibkle:
109128
```abap
110129
CONSTANTS:
111130
BEGIN OF cs_event,
@@ -123,7 +142,7 @@ The following frontend events re availibkle:
123142
set_size_limit TYPE string VALUE `SET_SIZE_LIMIT`,
124143
END OF cs_event.
125144
```
126-
145+
For example, to open a new tab with the corresponding event:
127146
```abap
128147
METHOD z2ui5_if_app~main.
129148
@@ -138,7 +157,8 @@ METHOD z2ui5_if_app~main.
138157
ENDMETHOD.
139158
```
140159

141-
#### Follow Up Action
160+
### Follow Up Action
161+
Sometimes, you might want to first call a backend function and then immediately perform an action in the frontend. This is possible with the follow-up action event:
142162
```abap
143163
METHOD z2ui5_if_app~main.
144164
@@ -148,4 +168,4 @@ METHOD z2ui5_if_app~main.
148168
149169
ENDMETHOD.
150170
```
151-
Check out sample `Z2UI5_CL_DEMO_APP_180` for a working snippet.
171+
Refer to sample `Z2UI5_CL_DEMO_APP_180` for a working example of this functionality.

0 commit comments

Comments
 (0)