abap2UI5 – (3) Popups, F4-Help, Messages & Controller Logic

[oblomov]

Welcome to the third part of this blog series introducing abap2UI5 -- an open-source project for developing UI5 apps purely in ABAP.

In this post we'll focuses on the controller logic, showcasing how different apps can call each other and exchange data. Additionally, we'll delve into message output and the development of popups, which we'll use to to create F4-Helps.

Blog Series & More

You can find all the information about this project on GitHub, stay up-to-date by following on Twitter and be sure to explore the other articles of this blog series:

1. Introduction: Developing UI5 Apps Purely in ABAP
2. Displaying Selection Screens & Tables
3. Popups, F4-Help, Messages & Controller Logic (this blog post)
4. Advanced Functionality & Demonstrations
5. Creating UIs with XML Views, HTML, CSS & JavaScript
6. Installation, Configuration & Troubleshooting
7. Technical Background: Under the Hood of abap2UI5
8. Repository Organization: Working with abapGit, abaplint & open-abap
9. Update I: Community Feedback & New Features - Sep. 2023
10. Extensions I: Exploring External Libraries & Native Device Capabilities
11. Extensions II: Guideline for Developing New Features in JavaScript
12. Update II: Community Feedback, New Features & Outlook - Jan. 2024

Content

This post covers the following areas:

1. Controller Logic

1. Popups

1. Popover

1. F4-Help

1. Messages

1. Conclusion

Let’s begin with the first topic.

1. Controller Logic

In abap2UI5, apps can easily call each other and transfer data, reminiscent of the function modules used to call screens of other function groups in the past. Take a look at this demo demonstrating two apps calling each other and exchanging 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 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 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 - the ID of the calling application

1. id_prev_app - the ID of the previously used app (ignoring the call stack)

The draft table working in the background makes the flow logic very simple, but select the appropriate ID and method carefully to avoid unexpected behavior. The source code for this example can be found here. Next, we'll use this logic to display popups.

2. Popups

The view of a popup is defined just like a normal view, offering a wide range of possibilities. Here's a demo:

Popups in abap2UI5

The full source code of this example can be found here. To define a popup, start the view definition with a dialog control. For instance, a former 'Popup_to_decide' FM developed with abap2UI5 might look 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, set the content in the variable 'xml_popup':

client->popup_display( lv_popup_xml ).

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

client->view_display( lv_main_xml ).

client->popup_display( lv_popup_xml ).

Popups can also 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' ).

Here's a demo showing the code snippet in action:

Popups and Flow Logic in abap2UI5

You can find the source code for this demo here.

3. Popover

For situations where you don't want to block the entire screen, a popover is useful. To display a popover, define the view with the popover control instead of the dialog control, and specify the placement and ID of the control for display:

Popover with abap2UI5

Set the ID of the popover placement using the following parameter:

client->popover_display( xml = xml_popover by_id = 'TEST' ).

The rendering of the popover is as follows:

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. Popovers are particularly useful in conjunction with tables to display additional information for certain cells, as shown in this example:

Popover on cell level

Next, let's use popups to create F4-Helps.

4. F4-Help

F4-Helps can be created in various ways. Check out this demo:

Demo F4-Help

The source code is available here. F4-Helps in abap2UI5 are simply normal popups. For instance, 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 shown here:

Select Options in abap2UI5

There's complete freedom in developing F4-Helps—they can range from simple to complex as needed.

5. Messages

Messages can be displayed in various ways. The simplest method is a message toast:

 client->message_toast_display( 'this is a message toast' ).

Alternatively, use a 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:

page->message_strip( text = 'This is a Message Strip' type = strip_type ).

Here's a demo of these three message types:

Message Strip, Box and Toast

The source code is availible 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 View. It is useful for T100, BAPIRET or other logging tables. You can display it on the page 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 here's the demo:

Message View in abap2UI5

6. Conclusion

This concludes the third part of this introduction to abap2UI5. We've covered how apps can call each other and exchange data, as well as the development and application of popups for creating F4-Helps and displaying messages and errors.

In the next part, we will expand upon these concepts by developing comprehensive demo applications. These demos will illustrate various use cases and highlight additional features of abap2UI5.

Thank you for reading! Your questions, comments and wishes for this project are always welcome, create an issue or leave a comment.