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->popup_message_box( `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: (1) id_prev_app_stack which is the ID of the calling application and (2) id_prev_app which is 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->set_next( VALUE #( xml_popup = lv_popup_xml ) ).

We can also show the main view in the background again by filling both xml variables:

 client->set_next( VALUE #( 
     xml_main  = lv_main_xml 
     xml_popup = lv_popup_xml ) ).

Or, display the previous view, which is very useful for popups encapsulated in separated apps – they simultaneously display their values and the previous view (without owning it) in the background. Just define at the event that the view should be kept instead of rerender it:

client->_event( val = 'BUTTON_POPUP_04' hold_view = abap_true )

Popups can be closed without additional server roundtrips, use the method _event_close_popup:

client->_event_close_popup( )

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:

app-s_next-popup_open_by_id = 'TEST'.

And the rendering of the popover looks like this:

xml_popup = 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.  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:

client->factory_view( 'POPUP_TABLE_F4'
      )->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' ).

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->popup_message_toast( 'this is a message toast' ).

Or, you can also use the message box:.

 client->popup_message_box( 'this is a message box' ).
 client->popup_message_box( 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 or 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}` ).

A demo looks like this:

Message Manager with abap2UI5

Check the full source code here.

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!