Step 7: Popups
Clicking a row now opens a dialog to edit the invoice's quantity. A popup is
built with the same builder and the same verbs as the view — only the root
element changes (core:FragmentDefinition instead of mvc:View), and it is
handed to popup_display( ) while the main view stays untouched behind it:
abap
CLASS zcl_app_walkthrough DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES:
BEGIN OF ty_s_invoice,
product TYPE string,
supplier TYPE string,
quantity TYPE string,
END OF ty_s_invoice.
DATA t_invoices TYPE STANDARD TABLE OF ty_s_invoice WITH EMPTY KEY.
DATA s_edit TYPE ty_s_invoice.
PROTECTED SECTION.
PRIVATE SECTION.
ENDCLASS.
CLASS zcl_app_walkthrough IMPLEMENTATION.
METHOD z2ui5_if_app~main.
IF client->check_on_navigated( ).
t_invoices = VALUE #(
( product = `Pineapple` supplier = `ACME` quantity = `21` )
( product = `Milk` supplier = `Green Growers` quantity = `4` )
( product = `Canned Beans` supplier = `Corner Deli` quantity = `3` )
( product = `Salad` supplier = `Green Growers` quantity = `2` )
( product = `Bread` supplier = `Corner Deli` quantity = `1` ) ).
DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
)->ele( n = `View` ns = `mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->ele( `Shell`
)->ele( `Page`
)->a( n = `title` v = `Walkthrough - Step 7`
)->ele( `List`
)->a( n = `headerText` v = `Invoices`
)->a( n = `items` v = client->_bind( t_invoices )
)->ele( `items`
)->tag( `StandardListItem`
)->a( n = `title` v = `{PRODUCT}`
)->a( n = `description` v = `{SUPPLIER}`
)->a( n = `info` v = `{QUANTITY}`
)->a( n = `type` v = `Active`
)->a( n = `press` v = client->_event( val = `EDIT` arg = `${PRODUCT}` ) ).
client->view_display( view->stringify( ) ).
ELSEIF client->check_on_event( `EDIT` ).
s_edit = VALUE #( t_invoices[ product = client->get_event_arg( ) ] OPTIONAL ).
DATA(popup) = z2ui5_cl_ui5_view_builder=>factory(
)->ele( n = `FragmentDefinition` ns = `core`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->ele( `Dialog`
)->a( n = `title` t = |Edit { s_edit-product }|
)->ele( `content`
)->tag( `Label`
)->a( n = `text` v = `Quantity`
)->tag( `Input`
)->a( n = `value` v = client->_bind( s_edit-quantity )
)->end(
)->ele( `buttons`
)->tag( `Button`
)->a( n = `text` v = `Cancel`
)->a( n = `press` v = client->_event( `CANCEL` )
)->tag( `Button`
)->a( n = `text` v = `Save`
)->a( n = `press` v = client->_event( `SAVE` )
)->a( n = `type` v = `Emphasized` ).
client->popup_display( popup->stringify( ) ).
ELSEIF client->check_on_event( `SAVE` ).
t_invoices[ product = s_edit-product ]-quantity = s_edit-quantity.
client->popup_destroy( ).
client->message_toast_display( |{ s_edit-product } updated.| ).
ELSEIF client->check_on_event( `CANCEL` ).
client->popup_destroy( ).
ENDIF.
ENDMETHOD.
ENDCLASS.What Is New
s_editis the popup's model. TheEDIThandler copies the clicked row into it, and the dialog's input binds tos_edit-quantity— by the timeSAVEarrives, the attribute already holds the new value.popup_display( )/popup_destroy( )show and close the dialog. The main view is never rebuilt — it waits behind the popup.tfor the title. It carries the product name, which is data: throughva brace in it would be read as a binding, throughtit is shown as written.- No refresh call after
SAVE. The handler changest_invoicesand does nothing else: every roundtrip that changed bound data pushes the new model to the browser by itself, and the list updates.
Popovers and message boxes are covered under Popup, Popover.
The app works end to end. Next, a selection screen on top of the list and a proper table — then Step 10 separates it into the structure real apps use.
Working Samples
Complete apps from the sample catalog
that use what this page describes. Each is a single class in abap2UI5/samples
unless its row names another of the three sample repositories — pull that repository with
abapGit and start the class with ?app_start=<class>.
| Sample | Class |
|---|---|
| Ways to Open a Dialog (A) | Z2UI5_CL_SMP_APP_012 |
Edit this page on GitHub ↗
Last updated: