Skip to content

Commit b5efe45

Browse files
claudeclaude
committed
Split Table, Tree page into separate Tables and Trees pages
https://claude.ai/code/session_0188k14QNhv7aWeXMPQHmxZo
1 parent 4c84ef5 commit b5efe45

3 files changed

Lines changed: 80 additions & 72 deletions

File tree

‎docs/.vitepress/config.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,8 @@ export default defineConfig({
144144
collapsed: true,
145145
items: [
146146
{ text: "Binding", link: "/development/model/binding" },
147-
{ text: "Table, Tree", link: "/development/model/tables" },
147+
{ text: "Tables", link: "/development/model/tables" },
148+
{ text: "Trees", link: "/development/model/trees" },
148149
{ text: "Device Model", link: "/development/model/device" },
149150
],
150151
},

‎docs/development/model/tables.md‎

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
outline: [2, 4]
33
---
4-
# Tables, Trees
5-
This section walks through rendering nested data structures — tables, trees, and nested records — in views.
4+
# Tables
5+
This section walks through rendering tabular and nested data in views.
66

77
### Tables
88
The example below binds a simple table to a UI5 control:
@@ -82,75 +82,6 @@ To make a table editable, switch the binding to `bind_edit`:
8282
ENDMETHOD.
8383
```
8484

85-
### Tree
86-
For trees, use nested structures:
87-
```abap
88-
CLASS z2ui5_cl_sample_tree DEFINITION PUBLIC.
89-
90-
PUBLIC SECTION.
91-
INTERFACES z2ui5_if_app.
92-
TYPES:
93-
BEGIN OF ty_prodh_node_level3,
94-
is_selected TYPE abap_bool,
95-
text TYPE string,
96-
prodh TYPE string,
97-
END OF ty_prodh_node_level3,
98-
BEGIN OF ty_prodh_node_level2,
99-
is_selected TYPE abap_bool,
100-
text TYPE string,
101-
prodh TYPE string,
102-
nodes TYPE STANDARD TABLE OF ty_prodh_node_level3 WITH DEFAULT KEY,
103-
END OF ty_prodh_node_level2,
104-
BEGIN OF ty_prodh_node_level1,
105-
is_selected TYPE abap_bool,
106-
text TYPE string,
107-
prodh TYPE string,
108-
nodes TYPE STANDARD TABLE OF ty_prodh_node_level2 WITH DEFAULT KEY,
109-
END OF ty_prodh_node_level1,
110-
ty_prodh_nodes TYPE STANDARD TABLE OF ty_prodh_node_level1 WITH DEFAULT KEY.
111-
DATA prodh_nodes TYPE ty_prodh_nodes.
112-
113-
ENDCLASS.
114-
115-
CLASS z2ui5_cl_sample_tree IMPLEMENTATION.
116-
METHOD z2ui5_if_app~main.
117-
118-
prodh_nodes = VALUE #( (
119-
text = `Machines`
120-
prodh = `00100`
121-
nodes = VALUE #( (
122-
text = `Pumps`
123-
prodh = `0010000100`
124-
nodes = VALUE #( (
125-
text = `Pump 001`
126-
prodh = `001000010000000100` ) (
127-
text = `Pump 002`
128-
prodh = `001000010000000105` ) )
129-
) ) ) (
130-
text = `Paints`
131-
prodh = `00110`
132-
nodes = VALUE #( (
133-
text = `Gloss paints`
134-
prodh = `0011000105`
135-
nodes = VALUE #( (
136-
text = `Paint 001`
137-
prodh = `001100010500000100` ) (
138-
text = `Paint 002`
139-
prodh = `001100010500000105` )
140-
) ) ) ) ).
141-
142-
DATA(tree) = z2ui5_cl_xml_view=>factory( )->page(
143-
)->tree( items = client->_bind_edit( prodh_nodes )
144-
)->items( )->standard_tree_item(
145-
selected = `{IS_SELECTED}`
146-
title = `{TEXT}` ).
147-
148-
client->view_display( tree->stringify( ) ).
149-
150-
ENDMETHOD.
151-
ENDCLASS.
152-
```
153-
15485
### Nested Structures
15586
You can also bind nested structures — use `structure/component` as the binding path:
15687
```abap

‎docs/development/model/trees.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
outline: [2, 4]
3+
---
4+
# Trees
5+
For hierarchical data, abap2UI5 uses nested ABAP structures to represent tree levels. Each level holds a table of child nodes, which UI5 traverses to build the expandable tree control.
6+
7+
### Tree
8+
Define a type hierarchy where each node contains a child table of the next level:
9+
```abap
10+
CLASS z2ui5_cl_sample_tree DEFINITION PUBLIC.
11+
12+
PUBLIC SECTION.
13+
INTERFACES z2ui5_if_app.
14+
TYPES:
15+
BEGIN OF ty_prodh_node_level3,
16+
is_selected TYPE abap_bool,
17+
text TYPE string,
18+
prodh TYPE string,
19+
END OF ty_prodh_node_level3,
20+
BEGIN OF ty_prodh_node_level2,
21+
is_selected TYPE abap_bool,
22+
text TYPE string,
23+
prodh TYPE string,
24+
nodes TYPE STANDARD TABLE OF ty_prodh_node_level3 WITH DEFAULT KEY,
25+
END OF ty_prodh_node_level2,
26+
BEGIN OF ty_prodh_node_level1,
27+
is_selected TYPE abap_bool,
28+
text TYPE string,
29+
prodh TYPE string,
30+
nodes TYPE STANDARD TABLE OF ty_prodh_node_level2 WITH DEFAULT KEY,
31+
END OF ty_prodh_node_level1,
32+
ty_prodh_nodes TYPE STANDARD TABLE OF ty_prodh_node_level1 WITH DEFAULT KEY.
33+
DATA prodh_nodes TYPE ty_prodh_nodes.
34+
35+
ENDCLASS.
36+
37+
CLASS z2ui5_cl_sample_tree IMPLEMENTATION.
38+
METHOD z2ui5_if_app~main.
39+
40+
prodh_nodes = VALUE #( (
41+
text = `Machines`
42+
prodh = `00100`
43+
nodes = VALUE #( (
44+
text = `Pumps`
45+
prodh = `0010000100`
46+
nodes = VALUE #( (
47+
text = `Pump 001`
48+
prodh = `001000010000000100` ) (
49+
text = `Pump 002`
50+
prodh = `001000010000000105` ) )
51+
) ) ) (
52+
text = `Paints`
53+
prodh = `00110`
54+
nodes = VALUE #( (
55+
text = `Gloss paints`
56+
prodh = `0011000105`
57+
nodes = VALUE #( (
58+
text = `Paint 001`
59+
prodh = `001100010500000100` ) (
60+
text = `Paint 002`
61+
prodh = `001100010500000105` )
62+
) ) ) ) ).
63+
64+
DATA(tree) = z2ui5_cl_xml_view=>factory( )->page(
65+
)->tree( items = client->_bind_edit( prodh_nodes )
66+
)->items( )->standard_tree_item(
67+
selected = `{IS_SELECTED}`
68+
title = `{TEXT}` ).
69+
70+
client->view_display( tree->stringify( ) ).
71+
72+
ENDMETHOD.
73+
ENDCLASS.
74+
```
75+
76+
The child table field (`nodes` in the example above) is the key: UI5 follows that field name to locate sub-items at each level. The name must match across all levels but can be anything you choose.

0 commit comments

Comments
 (0)