Skip to content

Commit 29f1b78

Browse files
oblomov-devoblomov-dev
authored
Merge pull request #21 from abap2UI5/tree
Tree
2 parents bfa3dfe + e1d6e23 commit 29f1b78

File tree

6 files changed

+183
-21
lines changed

6 files changed

+183
-21
lines changed

‎docs/.vitepress/config.mjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,10 @@ export default defineConfig({
9696
items: [
9797
{ text: 'General', link: '/development/general' },
9898
{ text: 'View', link: '/development/view' },
99-
{ text: 'Model', link: '/development/model', collapsed: true , items:[
100-
// { text: 'Tables, Trees', link: '/development/tables' },
101-
{ text: 'OData', link: '/development/specific/odata' },
102-
// { text: 'Device Model', link: '/development/specific/device' },
99+
{ text: 'Model', link: '/development/model/model', collapsed: true , items:[
100+
{ text: 'Tables, Trees', link: '/development/model/tables' },
101+
{ text: 'OData', link: '/development/model/odata' },
102+
{ text: 'Device Model', link: '/development/model/device' },
103103
]},
104104
{ text: 'Events', link: '/development/events' },
105105
{ text: 'Navigation', link: '/development/navigation' },

docs/development/specific/device.md renamed to docs/development/model/device.md

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1+
---
2+
outline: [2, 4]
3+
---
14
# Device Model
25

6+
### Frontend
37

8+
The device model is bound to the view by default with the name `device`. You can access it easily in your view. For example:
9+
```abap
10+
page->input(
11+
description = `device model - resize - width`
12+
value = `{device>/resize/width}` ).
13+
```
14+
Explore all available parameters in the [UI5 Documentation.](https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.Device)
415

5-
#### Device Information
6-
This example demonstrates how to retrieve detailed device information such as UI5 version, device type, OS, browser, and screen dimensions. Also see `z2ui5_cl_demo_app_122`.
16+
### Backend
17+
You can also retrieve detailed device information on the backend using a custom info frontend control. This allows you to access UI5 version, device type, OS, browser details, and screen dimensions. Below is an example implementation, which demonstrates how to collect and use this information:
718
```abap
819
CLASS z2ui5_cl_sample_device DEFINITION PUBLIC CREATE PUBLIC.
920
@@ -50,10 +61,11 @@ CLASS z2ui5_cl_sample_device IMPLEMENTATION.
5061
client->view_display( lo_view->stringify( ) ).
5162
5263
IF client->get( )-event = 'POST'.
53-
client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ).
64+
"process device info here...
5465
ENDIF.
5566
5667
ENDMETHOD.
5768
5869
ENDCLASS.
59-
```
70+
```
71+
For a working example, refer to `z2ui5_cl_demo_app_122`.

docs/development/model.md renamed to docs/development/model/model.md

File renamed without changes.

docs/development/specific/odata.md renamed to docs/development/model/odata.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
---
2+
outline: [2, 4]
3+
---
14
# OData
25

36
By default, you can bind all public attributes of your implementation class to UI5 properties, enabling the display of internal tables and, with bind_edit, even updating data. Additionally, in scenarios where direct access to database tables is required, using pre-defined OData services can be beneficial. Leveraging OData protocols provides features such as pagination and growing, which enhance performance when handling large datasets.
47

5-
### Define Second Model
8+
#### Define Second Model
69
As an example, we will use the test OData service `/sap/opu/odata/DMO/API_TRAVEL_U_V2/`, which is available in most ABAP systems. Ensure the service is publicly accessible. Use the following method to define the model and make it available under the name `TRAVEL`:
710
```abap
811
client->follow_up_action( client->_event_client(
@@ -11,7 +14,7 @@ client->follow_up_action( client->_event_client(
1114
( `/sap/opu/odata/DMO/UI_FLIGHT_R_V2/` )
1215
( `FLIGHT` ) ) ) ).
1316
```
14-
### Bind Data
17+
#### Bind Data
1518
Next, bind this OData model to your view definition. Since we’re using a non-default model, we must explicitly specify the model name for each binding. Here's an example:
1619
```abap
1720
DATA(tab) = z2ui5_cl_xml_view=>factory( )->page( )->table(
@@ -32,7 +35,7 @@ tab->items( )->column_list_item( )->cells(
3235
```
3336
By using the growing property we can make use of the feature that not all data is loaded at once, leveraging performance.
3437

35-
### Full Example
38+
#### Full Example
3639
Here’s the complete source code:
3740
```abap
3841
METHOD z2ui5_if_app~main.
@@ -62,7 +65,7 @@ METHOD z2ui5_if_app~main.
6265
ENDMETHOD.
6366
```
6467

65-
### Multiple OData Models
68+
#### Multiple OData Models
6669
You can also bind multiple OData models simultaneously. Here’s an example:
6770
```abap
6871
DATA(tab) = z2ui5_cl_xml_view=>factory( )->page( )->table(

‎docs/development/model/tables.md‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
# Tables, Trees
2+
In this section, we will explore how to bind deep data models, such as tables and trees.
3+
4+
### Tables
5+
The example below demonstrates how to bind a simple table to a UI5 control:
6+
```abap
7+
CLASS z2ui5_cl_sample_tab DEFINITION PUBLIC.
8+
9+
PUBLIC SECTION.
10+
INTERFACES z2ui5_if_app.
11+
12+
TYPES:
13+
BEGIN OF ty_row,
14+
count TYPE i,
15+
value TYPE string,
16+
descr TYPE string,
17+
END OF ty_row.
18+
DATA t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY.
19+
20+
ENDCLASS.
21+
22+
CLASS z2ui5_cl_sample_tab IMPLEMENTATION.
23+
METHOD z2ui5_if_app~main.
24+
25+
DO 100 TIMES.
26+
DATA ls_row TYPE ty_row.
27+
ls_row-count = sy-index.
28+
ls_row-value = 'red'.
29+
ls_row-descr = 'this is a description'.
30+
INSERT ls_row INTO TABLE t_tab.
31+
ENDDO.
32+
33+
DATA(view) = z2ui5_cl_xml_view=>factory( )->page( )->table(
34+
items = client->_bind( t_tab ) ).
35+
36+
tab->columns(
37+
)->column( )->text( 'Color' )->get_parent(
38+
)->column( )->text( 'Info' )->get_parent(
39+
)->column( )->text( 'Description' ).
40+
tab->items( )->column_list_item( )->cells(
41+
)->text( '{VALUE}'
42+
)->text( '{INFO}'
43+
)->text( '{DESCR}' ).
44+
45+
client->view_display( view->stringify( ) ).
46+
47+
ENDMETHOD.
48+
ENDCLASS.
49+
50+
```
51+
52+
### Editable
53+
Making a table editable is a simple change. You just need to switch the binding mode to `bind_edit` :
54+
```abap
55+
METHOD z2ui5_if_app~main.
56+
57+
DO 100 TIMES.
58+
DATA ls_row TYPE ty_row.
59+
ls_row-count = sy-index.
60+
ls_row-value = 'red'.
61+
ls_row-descr = 'this is a description'.
62+
INSERT ls_row INTO TABLE t_tab.
63+
ENDDO.
64+
65+
DATA(view) = z2ui5_cl_xml_view=>factory( )->page( )->table(
66+
items = client->_bind_edit( t_tab ) ).
67+
68+
tab->columns(
69+
)->column( )->text( 'Color' )->get_parent(
70+
)->column( )->text( 'Info' )->get_parent(
71+
)->column( )->text( 'Description' ).
72+
tab->items( )->column_list_item( )->cells(
73+
)->text( '{VALUE}'
74+
)->text( '{INFO}'
75+
)->text( '{DESCR}' ).
76+
77+
client->view_display( view->stringify( ) ).
78+
79+
ENDMETHOD.
80+
```
81+
82+
### Tree
83+
To work with trees, you need to use nested structures. Here is an example:
84+
```abap
85+
CLASS z2ui5_cl_sample_tree DEFINITION
86+
PUBLIC
87+
FINAL
88+
CREATE PUBLIC .
89+
90+
PUBLIC SECTION.
91+
INTERFACES z2ui5_if_app.
92+
93+
TYPES:
94+
BEGIN OF ty_prodh_node_level3,
95+
is_selected TYPE abap_bool,
96+
text TYPE string,
97+
prodh TYPE string,
98+
END OF ty_prodh_node_level3,
99+
BEGIN OF ty_prodh_node_level2,
100+
is_selected TYPE abap_bool,
101+
text TYPE string,
102+
prodh TYPE string,
103+
nodes TYPE STANDARD TABLE OF ty_prodh_node_level3 WITH DEFAULT KEY,
104+
END OF ty_prodh_node_level2,
105+
BEGIN OF ty_prodh_node_level1,
106+
is_selected TYPE abap_bool,
107+
text TYPE string,
108+
prodh TYPE string,
109+
nodes TYPE STANDARD TABLE OF ty_prodh_node_level2 WITH DEFAULT KEY,
110+
END OF ty_prodh_node_level1,
111+
ty_prodh_nodes TYPE STANDARD TABLE OF ty_prodh_node_level1 WITH DEFAULT KEY.
112+
113+
DATA prodh_nodes TYPE ty_prodh_nodes.
114+
115+
ENDCLASS.
116+
117+
CLASS z2ui5_cl_sample_tree IMPLEMENTATION.
118+
METHOD z2ui5_if_app~main.
119+
120+
prodh_nodes =
121+
VALUE #( ( text = 'Machines'
122+
prodh = '00100'
123+
nodes = VALUE #( ( text = 'Pumps'
124+
prodh = '0010000100'
125+
nodes = VALUE #( ( text = 'Pump 001'
126+
prodh = '001000010000000100' )
127+
( text = 'Pump 002'
128+
prodh = '001000010000000105' )
129+
)
130+
) )
131+
)
132+
( text = 'Paints'
133+
prodh = '00110'
134+
nodes = VALUE #( ( text = 'Gloss paints'
135+
prodh = '0011000105'
136+
nodes = VALUE #( ( text = 'Paint 001'
137+
prodh = '001100010500000100' )
138+
( text = 'Paint 002'
139+
prodh = '001100010500000105' )
140+
)
141+
) )
142+
) ).
143+
144+
DATA(page) = z2ui5_cl_xml_view=>factory( )->page( ).
145+
146+
page->tree( items = client->_bind_edit( prodh_nodes )
147+
)->items(
148+
)->standard_tree_item( selected = '{IS_SELECTED}'
149+
title = '{TEXT}' ).
150+
151+
client->view_display( page->button( text = 'Open Popup here...'
152+
press = client->_event( 'POPUP_TREE' ) )->stringify( ) ).
153+
154+
ENDMETHOD.
155+
ENDCLASS.
156+
```

‎docs/development/tables.md‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)