Skip to content

Commit 9976250

Browse files
claudeclaude
committed
Add Snippets page with common app starting points
1 parent bcd5acd commit 9976250

2 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎docs/.vitepress/config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,7 @@ export default defineConfig({
252252
text: "Patterns, Helpers",
253253
collapsed: true,
254254
items: [
255+
{ text: "Snippets", link: "/cookbook/expert_more/snippets" },
255256
{ text: "Value Help", link: "/cookbook/expert_more/value_help" },
256257
{ text: "Demo Output", link: "/cookbook/expert_more/demo_output" },
257258
{ text: "E-Mail", link: "/cookbook/expert_more/email" },

‎docs/cookbook/expert_more/snippets.md‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
---
2+
outline: [2, 4]
3+
---
4+
# Snippets
5+
6+
Copy-paste starting points for the most common app shapes. Each snippet is a complete, self-contained class — drop it in, activate it, and launch it by its name from the abap2UI5 landing page.
7+
8+
## Basic App Structure
9+
10+
The skeleton every abap2UI5 app starts from: implement `z2ui5_if_app`, dispatch on lifecycle phases with `CASE abap_true`, build the view in `check_on_init`, react to user actions in `check_on_event`.
11+
12+
```abap
13+
CLASS z2ui5_cl_app_skeleton DEFINITION PUBLIC.
14+
15+
PUBLIC SECTION.
16+
INTERFACES z2ui5_if_app.
17+
18+
ENDCLASS.
19+
20+
CLASS z2ui5_cl_app_skeleton IMPLEMENTATION.
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( `Hello World`
29+
)->button( text = `Go`
30+
press = client->_event( `GO` ) ).
31+
client->view_display( view->stringify( ) ).
32+
33+
WHEN client->check_on_event( `GO` ).
34+
client->message_box_display( `Button pressed!` ).
35+
36+
ENDCASE.
37+
38+
ENDMETHOD.
39+
ENDCLASS.
40+
```
41+
42+
## Selection Screen
43+
44+
A classic input form: a few fields bound with `_bind_edit`, a button that triggers backend logic, results shown after submission.
45+
46+
```abap
47+
CLASS z2ui5_cl_app_selection DEFINITION PUBLIC.
48+
49+
PUBLIC SECTION.
50+
INTERFACES z2ui5_if_app.
51+
DATA carrid TYPE string.
52+
DATA connid TYPE string.
53+
DATA fldate TYPE string.
54+
55+
ENDCLASS.
56+
57+
CLASS z2ui5_cl_app_selection IMPLEMENTATION.
58+
METHOD z2ui5_if_app~main.
59+
60+
CASE abap_true.
61+
62+
WHEN client->check_on_init( ).
63+
DATA(page) = z2ui5_cl_xml_view=>factory( )->page( `Selection Screen` ).
64+
65+
page->simple_form( title = `Selection Criteria` editable = abap_true
66+
)->content( ns = `form`
67+
)->label( `Carrier ID`
68+
)->input( client->_bind_edit( carrid )
69+
)->label( `Connection ID`
70+
)->input( client->_bind_edit( connid )
71+
)->label( `Flight Date`
72+
)->date_picker( client->_bind_edit( fldate ) ).
73+
74+
page->footer( )->overflow_toolbar(
75+
)->toolbar_spacer(
76+
)->button( text = `Execute`
77+
type = `Emphasized`
78+
press = client->_event( `EXECUTE` ) ).
79+
80+
client->view_display( page->stringify( ) ).
81+
82+
WHEN client->check_on_event( `EXECUTE` ).
83+
" run the search with carrid / connid / fldate
84+
client->message_box_display(
85+
|Executing with { carrid } / { connid } / { fldate }| ).
86+
87+
ENDCASE.
88+
89+
ENDMETHOD.
90+
ENDCLASS.
91+
```
92+
93+
## Write Output
94+
95+
The quickest way to surface ABAP data on screen: build the HTML with `cl_demo_output=>get( )` and render it with the UI5 `html` control. Useful for prototypes and porting demo programs.
96+
97+
See [Demo Output](/cookbook/expert_more/demo_output) for the full CSS block. The minimal version:
98+
99+
```abap
100+
CLASS z2ui5_cl_app_write_output DEFINITION PUBLIC.
101+
102+
PUBLIC SECTION.
103+
INTERFACES z2ui5_if_app.
104+
DATA html TYPE string.
105+
106+
ENDCLASS.
107+
108+
CLASS z2ui5_cl_app_write_output IMPLEMENTATION.
109+
METHOD z2ui5_if_app~main.
110+
111+
IF client->check_on_init( ).
112+
113+
cl_demo_output=>begin_section( `My Report` ).
114+
cl_demo_output=>write_data( sy-uname ).
115+
cl_demo_output=>write_data( sy-datum ).
116+
html = cl_demo_output=>get( ).
117+
118+
DATA(view) = z2ui5_cl_xml_view=>factory( )->page( `Write Output` ).
119+
view->html( content = client->_bind( html ) ).
120+
client->view_display( view->stringify( ) ).
121+
122+
ENDIF.
123+
124+
ENDMETHOD.
125+
ENDCLASS.
126+
```
127+
128+
## Basic Table
129+
130+
A read-only table bound to an internal table, with three columns and one cell template per column.
131+
132+
```abap
133+
CLASS z2ui5_cl_app_table_basic DEFINITION PUBLIC.
134+
135+
PUBLIC SECTION.
136+
INTERFACES z2ui5_if_app.
137+
TYPES:
138+
BEGIN OF ty_row,
139+
id TYPE i,
140+
name TYPE string,
141+
descr TYPE string,
142+
END OF ty_row.
143+
DATA rows TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY.
144+
145+
ENDCLASS.
146+
147+
CLASS z2ui5_cl_app_table_basic IMPLEMENTATION.
148+
METHOD z2ui5_if_app~main.
149+
150+
IF client->check_on_init( ).
151+
152+
DO 20 TIMES.
153+
INSERT VALUE #( id = sy-index
154+
name = |Item { sy-index }|
155+
descr = `Sample row` ) INTO TABLE rows.
156+
ENDDO.
157+
158+
DATA(view) = z2ui5_cl_xml_view=>factory( )->page( `Basic Table` ).
159+
DATA(tab) = view->table( client->_bind( rows ) ).
160+
tab->columns(
161+
)->column( )->text( `ID` )->get_parent(
162+
)->column( )->text( `Name` )->get_parent(
163+
)->column( )->text( `Description` ).
164+
tab->items( )->column_list_item( )->cells(
165+
)->text( `{ID}`
166+
)->text( `{NAME}`
167+
)->text( `{DESCR}` ).
168+
169+
client->view_display( view->stringify( ) ).
170+
171+
ENDIF.
172+
173+
ENDMETHOD.
174+
ENDCLASS.
175+
```
176+
177+
## Table with Filtering, Sorting
178+
179+
Enable UI5's built-in column sorting and filtering by setting `sortProperty` and `filterProperty` on each column header. The `p13n` settings expose the personalization icon.
180+
181+
```abap
182+
CLASS z2ui5_cl_app_table_p13n DEFINITION PUBLIC.
183+
184+
PUBLIC SECTION.
185+
INTERFACES z2ui5_if_app.
186+
TYPES:
187+
BEGIN OF ty_row,
188+
id TYPE i,
189+
name TYPE string,
190+
status TYPE string,
191+
END OF ty_row.
192+
DATA rows TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY.
193+
194+
ENDCLASS.
195+
196+
CLASS z2ui5_cl_app_table_p13n IMPLEMENTATION.
197+
METHOD z2ui5_if_app~main.
198+
199+
IF client->check_on_init( ).
200+
201+
DO 30 TIMES.
202+
INSERT VALUE #(
203+
id = sy-index
204+
name = |Item { sy-index }|
205+
status = COND #( WHEN sy-index MOD 2 = 0 THEN `open` ELSE `closed` )
206+
) INTO TABLE rows.
207+
ENDDO.
208+
209+
DATA(view) = z2ui5_cl_xml_view=>factory( )->page( `Sortable / Filterable Table` ).
210+
211+
DATA(tab) = view->table(
212+
items = client->_bind( rows )
213+
growing = abap_true
214+
growing_threshold = `10`
215+
mode = `MultiSelect`
216+
sticky = `ColumnHeaders` ).
217+
218+
tab->columns(
219+
)->column( sort_property = `ID` filter_property = `ID`
220+
)->text( `ID` )->get_parent(
221+
)->column( sort_property = `NAME` filter_property = `NAME`
222+
)->text( `Name` )->get_parent(
223+
)->column( sort_property = `STATUS` filter_property = `STATUS`
224+
)->text( `Status` ).
225+
226+
tab->items( )->column_list_item( )->cells(
227+
)->text( `{ID}`
228+
)->text( `{NAME}`
229+
)->text( `{STATUS}` ).
230+
231+
client->view_display( view->stringify( ) ).
232+
233+
ENDIF.
234+
235+
ENDMETHOD.
236+
ENDCLASS.
237+
```
238+
239+
For an interactive personalization dialog (column visibility, multi-sort, grouped filters), pair the table with `sap.m.p13n.Engine` or wrap it in a `SmartTable` — see the [UI5 SDK](https://sapui5.hana.ondemand.com) for the full feature set.

0 commit comments

Comments
 (0)