Technical Articles
abap2UI5 – (3/7) Popups, F4-Help, Messages & Controller Logic
Welcome to the third part of this blog series introducing abap2UI5 — an open-source project for developing standalone UI5 apps in pure ABAP.
This post focuses on the controller logic, demonstrating how different apps can call each other and exchange data. Additionally, it explains the development of popups which we will use to build F4-Helps.
Find all the information about the project on GitHub and stay up-to-date by following on Twitter.
Blog Series
Controller Logic
Abap2UI5 apps call and transfer data between each other very easily, much like how we used function modules to call screens of other function groups in the past. Take a look at this demo (two apps call each other and exchange their values):
Controller Logic in abap2UI5
To call a new app, create the app instance and call it with the method nav_app_call:
client->nav_app_call( NEW z2ui5_cl_app_demo_25( ) ).Initial values can be set by changing the attributes of the class before calling it:
DATA(lo_app_next) = NEW z2ui5_cl_app_demo_25( ).
lo_app_next->mv_input_previous = mv_input.
client->nav_app_call( lo_app_next ).You can also do this the other way around – recreate the previous app and read its attributes:
DATA(lo_called_app) = CAST z2ui5_cl_app_demo_25( client->get_app_by_id( client->get( )-id_prev_app ) ).
client->message_box_display( `Input of the previous app:` && lo_called_app->mv_input ).For a ‘Back’ or ‘Exit’ command you can also call an already existing app again:
data(lo_prev_stack_app) = client->get_app( client->get( )-id_prev_app_stack ).
client->nav_app_leave( lo_prev_stack_app ).The difference between ‘nav_app_leave’ and ‘nav_app_call’ is that the former method reduces the call stack, while the latter increases it. This is similar to the ‘call screen’ and ‘leave screen’ commands in the SAP GUI screen logic. Therefore, you need to consider two IDs:
- id_prev_app_stack – the ID of the calling application
- id_prev_app – the ID of the previously used app (ignoring the call stack).
Be careful when selecting the appropriate ID and method to avoid unexpected behavior. As you can see, the draft table working in the background makes the flow logic very simple. The source code for this example can be found here. In the next part we’ll use this to display popups.
Popups
The view of a popup is defined in exactly the same way as that of a normal view. This gives us a lot of possibilities — take a look at this demo:
Popups in abap2UI5
The full source code of this example can be found here. To define a popup, we just need to start the the view definition with a dialog control. A former popup_to_decide FM developed with abap2UI5 looks like this:
lv_popup_xml = z2ui5_cl_xml_view=>factory_popup(
)->dialog(
title = 'Title'
icon = 'sap-icon://question-mark'
)->content(
)->vbox( 'sapUiMediumMargin'
)->text( 'This is a question, cancel or confirm?'
)->get_parent( )->get_parent(
)->footer( )->overflow_toolbar(
)->toolbar_spacer(
)->button(
text = 'Cancel'
press = client->_event( 'BUTTON_CANCEL' )
)->button(
text = 'Confirm'
press = client->_event( 'BUTTON_CONFIRM' )
type = 'Emphasized' ).To display this view as a popup, we have to set the content in the variable ‘xml_popup’:
client->popup_display( lv_popup_xml ).We can also show the main view in the background again by filling both xml variables:
client->view_display( lv_main_xml ).
client->popup_display( lv_popup_xml ).Popups can be closed without additional server roundtrips, use the method _event_client:
client->_event_client( client->cs_event-popup_close ).The simple popup to inform is a good use case for this:
lo_popup->dialog( 'Popup - Info'
)->vbox(
)->text( 'press close to go back to the main view without a server roundtrip'
)->get_parent(
)->footer( )->overflow_toolbar(
)->toolbar_spacer(
)->button(
text = 'close'
press = client->_event_close_popup( )
type = 'Emphasized' ).This demo shows the above code snippets in action:
Popups and Flow Logic in abap2UI5
You can find the source code for this demo here.
Popover
Sometimes, you may not want to block the entire screen for a popup. In such cases, you can use a popover instead. To display a popover, you need to define the view with the popover control instead of the dialog control. You also need to choose the placement and the ID of the control where it should be displayed:
Popover with abap2UI5
Set the ID of the popover placement using the following parameter:
client->popover_display( xml = xml_popover by_id = 'TEST' ).And the rendering of the popover looks like this:
xml_popover = z2ui5_cl_xml_view=>factory_popup( )->popover(
title = 'Popover Title'
placement = mv_placement
)->footer( )->overflow_toolbar(
)->toolbar_spacer(
)->button(
text = 'Cancel'
press = client->_event( 'BUTTON_CANCEL' )
)->button(
text = 'Confirm'
press = client->_event( 'BUTTON_CONFIRM' )
type = 'Emphasized'
)->get_parent( )->get_parent(
)->text( 'make an input here:'
)->input( value = 'abcd'
)->get_root( )->xml_get( ).You can find the source code for this demo here. In combination with tables, popovers are very useful to display additional information for certain cells. Take a look at the following example:
Popover on cell level
Next, we’ll use popups to create F4-Helps.
F4-Help
F4-Helps can be created in many different ways, take a look at this demo:
Demo F4-Help
Check out the source code. F4-Helps in abap2UI5 are just normal popups like we saw before. For example, a popup to choose a table entry can be defined like this:
z2ui5_cl_xml_view=>factory(
)->dialog( 'abap2UI5 - F4 Value Help'
)->table( mode = 'SingleSelectLeft' items = client->_bind( mt_suggestion_sel )
)->columns(
)->column( )->text( 'Color' )->get_parent(
)->column( )->text( 'Description'
)->get_parent( )->get_parent(
)->items( )->column_list_item( selected = '{SELKZ}' )->cells(
)->text( '{VALUE}'
)->text( '{DESCR}'
)->get_parent( )->get_parent( )->get_parent( )->get_parent(
)->footer( )->overflow_toolbar(
)->toolbar_spacer(
)->button(
text = 'continue'
press = client->_event( 'POPUP_TABLE_F4_CONTINUE' )
type = 'Emphasized' ).Or you can also create popups to fill select options, as you can see here:
Select Options in abap2UI5
There are no limitations, you have complete freedom in developing F4-Helps — they can be as simple or as extensive as you need.
Messages
Messages can be displayed in several ways. The simplest way is to use a message toast, which can be called using the following syntax:
client->message_toast_display( 'this is a message toast' ).Or, you can also use the message box:.
client->message_box_display( 'this is a message box' ).
client->message_box_display( text = 'this is a message box' type = 'error' ).The message strip can be integrated into the view and displayed using the following code:
page->message_strip( text = 'This is a Message Strip' type = strip_type ).A demo of these three message types looks like this:
Message Strip, Box and Toast
The source code can be found here.
In situations where errors occur, it may be necessary to display a message that covers the entire page. An illustrated message can be a good solution for this purpose, and you can use it with the following syntax:
page->illustrated_message( illustrationtype = 'NoEntries'
)->additional_content( )->button(
text = 'information'
press = client->_event( 'BUTTON_MESSAGE_BOX' ) ).A lot of different illustration types are available, as you can see in this documentation. A demo of the illustrated message looks like this:
Illustrated Message with abap2UI5
You can see the demo source code here. The last option to display messages is the Message Manager. It is useful for T100, BAPIRET or other logging tables. You can display it on the page, as a popup, or as a popover using this code:
popup->message_view(
items = client->_bind( t_msg )
groupitems = abap_true
)->message_item(
type = `{TYPE}`
title = `{TITLE}`
subtitle = `{SUBTITLE}`
description = `{DESCRIPTION}`
groupname = `{GROUP}` ).Check the full source code here and the demo looks like this:
Message Manager in abap2UI5
Summary
This was the third part of this introduction to abap2UI5. You now have a better understanding of how apps call each other and exchange data. We also saw how to develop popups and use them to create F4-Helps and display Messages & Errors.
In the next blog post, we will build on this and develop full demo applications to see different use cases and additional features of abap2UI5.
Thank you for reading this blog post!
Your questions, comments and wishes for this project are always welcome, create an issue or leave a comment.