|
1 | | -# Popups |
| 1 | +--- |
| 2 | +outline: [2, 4] |
| 3 | +--- |
| 4 | +# Popups, Popovers |
2 | 5 |
|
3 | 6 |
|
4 | 7 | ### Popup |
5 | 8 |
|
6 | 9 |
|
| 10 | +#### Simple Example |
7 | 11 |
|
8 | | -Popups it’s recommend to use for every popup an own app so use navigation |
| 12 | +To display a popup, use the method `client->popup_display` instead of `client->view_display`: |
| 13 | +```abap |
| 14 | +METHOD z2ui5_if_app~main. |
9 | 15 |
|
10 | | -### Popup in separated App |
11 | | -### Popover |
| 16 | + data(lo_popup) = z2ui5_cl_xml_view=>factory_popup( |
| 17 | + )->dialog( 'Popup - Info' |
| 18 | + )->text( 'this is an information shown in a popup' ). |
12 | 19 |
|
| 20 | + client->popup_display( lo_popup->stringify( ) ). |
13 | 21 |
|
| 22 | +ENDMETHOD. |
| 23 | +``` |
14 | 24 |
|
15 | | -### Built-in Popups |
16 | | -a few you already saw at message and errors section. |
| 25 | +#### Flow Logic |
| 26 | +Typically, a common flow for using popups involves displaying a normal view, then showing a popup, and finally closing it. Here’s how this can be structured: |
17 | 27 |
|
| 28 | +```abap |
| 29 | +METHOD Z2UI5_if_app~main. |
| 30 | +
|
| 31 | + me->client = client. |
| 32 | +
|
| 33 | + IF client->check_on_init( ). |
| 34 | + |
| 35 | + DATA(lo_view) = z2ui5_cl_xml_view=>factory( |
| 36 | + )->page( 'abap2UI5 - Popups' |
| 37 | + )->button( |
| 38 | + text = 'popup rendering, no background rendering' |
| 39 | + press = client->_event( 'POPUP_OPEN' ) ). |
| 40 | + client->view_display( lo_view->stringify( ) ). |
| 41 | +
|
| 42 | + RETURN. |
| 43 | + ENDIF. |
| 44 | +
|
| 45 | + CASE client->get( )-event. |
| 46 | +
|
| 47 | + WHEN 'POPUP_OPEN'. |
| 48 | + |
| 49 | + DATA(lo_popup) = Z2UI5_cl_xml_view=>factory_popup( |
| 50 | + )->dialog( 'Popup' |
| 51 | + )->text( 'this is a text in a popup' |
| 52 | + )->button( |
| 53 | + text = 'close' |
| 54 | + press = client->_event( 'POPUP_CLOSE' ) ). |
| 55 | +
|
| 56 | + client->popup_display( lo_popup->stringify( ) ). |
| 57 | +
|
| 58 | + WHEN 'POPUP_CLOSE'. |
| 59 | + client->popup_destroy( ). |
| 60 | + ENDCASE. |
| 61 | +
|
| 62 | +ENDMETHOD. |
18 | 63 | ``` |
19 | | -. |
20 | | -│─ abap2ui5 |
21 | | - ├─ 01 |
22 | | - ├─ 02 |
23 | | - ├─ 01 (popups) |
24 | | -``` |
25 | | -Feel free to send a PR if you extend a need a new popup. |
26 | 64 |
|
| 65 | +#### Separated App |
| 66 | + |
| 67 | +For each popup, it’s recommended to use a separated app by using navigation. |
| 68 | + |
| 69 | +### Popover |
| 70 | + |
| 71 | +Use the method client->popover_display and specify the ID of the control where you want to display the popover: |
27 | 72 |
|
| 73 | + ```abap |
| 74 | +METHOD Z2UI5_if_app~main. |
28 | 75 |
|
| 76 | + IF client->check_on_init( ). |
29 | 77 |
|
| 78 | + DATA(view) = z2ui5_cl_xml_view=>factory( |
| 79 | + )->shell( |
| 80 | + )->page( 'Popover Example' |
| 81 | + )->button( |
| 82 | + text = 'display popover' |
| 83 | + press = client->_event( 'POPOVER_OPEN' ) |
| 84 | + id = 'TEST' ). |
30 | 85 |
|
31 | | -#### Popup to Select |
| 86 | + client->view_display( view->stringify( ) ). |
32 | 87 |
|
| 88 | + ENDIF. |
33 | 89 |
|
34 | | -#### Popup to Confirm |
| 90 | + CASE client->get( )-event. |
35 | 91 |
|
| 92 | + WHEN 'POPOVER_OPEN'. |
36 | 93 |
|
37 | | -#### Popup to |
| 94 | + DATA(popover) = Z2UI5_cl_xml_view=>factory_popup( |
| 95 | + )->popover( placement = 'Left' |
| 96 | + )->text( `this is a popover` |
| 97 | + )->button( |
| 98 | + text = `close` |
| 99 | + press = client->_event( `POPOVER_CLOSE` ) ). |
| 100 | +
|
| 101 | + client->popover_display( |
| 102 | + xml = view->stringify( ) |
| 103 | + by_id = `test` ). |
| 104 | +
|
| 105 | + WHEN 'POPOVER_CLOSE'. |
| 106 | + client->popover_destroy( ). |
| 107 | + ENDCASE. |
| 108 | +
|
| 109 | +ENDMETHOD. |
| 110 | + ``` |
| 111 | + |
| 112 | +### Built-in Popups |
38 | 113 |
|
| 114 | +Several pre-built popup classes are available for specific scenarios: |
| 115 | + |
| 116 | +* z2ui5_cl_pop_error |
| 117 | +* z2ui5_cl_pop_file_dl |
| 118 | +* z2ui5_cl_pop_file_ul |
| 119 | +* z2ui5_cl_pop_get_range |
| 120 | +* z2ui5_cl_pop_get_range_m |
| 121 | +* z2ui5_cl_pop_html |
| 122 | +* z2ui5_cl_pop_input_val |
| 123 | +* z2ui5_cl_pop_itab_json_dl |
| 124 | +* z2ui5_cl_pop_js_loader |
| 125 | +* z2ui5_cl_pop_messages |
| 126 | +* z2ui5_cl_pop_pdf |
| 127 | +* z2ui5_cl_pop_table |
| 128 | +* z2ui5_cl_pop_textedit |
| 129 | +* z2ui5_cl_pop_to_confirm |
| 130 | +* z2ui5_cl_pop_to_inform |
| 131 | +* z2ui5_cl_pop_to_select |
0 commit comments