abap2UI5 – (2/7) Displaying Selection Screens & Tables

Welcome to the second part of this blog series introducing abap2UI5 — an open-source project for developing standalone UI5 apps in pure ABAP.

This post focuses on selection screens and displaying tables. We will enhance them by adding a toolbar, selection modes and edit functionality.

Find all the information about the project on GitHub and stay up-to-date by following on Twitter.

Blog Series

Demo

For an impression of the possibilities with abap2UI5, let’s take a look at this demo displaying tables & lists –  everything is created in pure ABAP:

Tables & Lists in abap2UI5

Displaying Tables

First let’s take a look at the classic SAP-GUI method for displaying tables in ABAP:

TYPES: 
   BEGIN OF ty_s_flight,
       carrid TYPE s_carr_id,
       connid TYPE s_conn_id,
       fldate TYPE s_date,
       price TYPE s_price,
   END OF ty_s_flight.
DATA gt_flight TYPE STANDARD TABLE OF t_flight.

SELECT carrid connid fldate price FROM sflight INTO TABLE gt_flight.

DATA gr_flight TYPE REF TO cl_gui_alv_grid.
CREATE OBJECT gr_flight
  EXPORTING
    i_parent = cl_gui_container=>screen0.

gr_flight->set_table_for_first_display(
  EXPORTING
    i_structure_name = 'TY_S_FLIGHT'
  CHANGING
    it_outtab = gt_flight ).

It takes only around of 25 lines of ABAP to display a view with table output, making it a very efficient process. With just a few extra lines of code, you can also add buttons, toolbars and interactions.

However, when we develop this example in a non-SAP-GUI or ABAP Cloud Environment, we need to start with RAP or develop UI5 freestyle applications. The first way requires CDS artifacts and the second one needs JavaScript knowledge. In both approaches you can not use 100% ABAP source code anymore which makes it considerably more complex.

In contrast, the idea behind abap2UI5 is to return more to the classic SAP GUI approach again. The code for the example above looks like this:

CLASS z2ui5_cl_app_demo_43 DEFINITION PUBLIC.

  PUBLIC SECTION.

    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF t_flight,
        carrid TYPE string,
        connid TYPE string,
        fldate TYPE string,
        price  TYPE string,
      END OF t_flight.
    DATA: mt_flight TYPE STANDARD TABLE OF t_flight.

ENDCLASS.

CLASS z2ui5_cl_app_demo_43 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    SELECT carrid connid fldate price FROM sflight INTO TABLE mt_flight.

    DATA(page) = z2ui5_cl_xml_view=>factory( client )->page(
            )->scroll_container( height = '70%' vertical = abap_true
                )->table( items = client->_bind( mt_flight )
                )->columns(
                    )->column( )->text( 'Carrid' )->get_parent(
                    )->column( )->text( 'Connid' )->get_parent(
                    )->column( )->text( 'Fldate' )->get_parent(
                    )->column( )->text( 'Price'  )->get_parent(
                )->get_parent(
                )->items( )->column_list_item( )->cells(
                    )->text( '{CARRID}'
                    )->text( '{CONNID}'
                    )->text( '{FLDATE}'
                    )->text( '{PRICE}' ).

    client->view_display( page->stringify( ) ).

  ENDMETHOD.
ENDCLASS.

As we can see, with just a few additional lines of code compared to the classic approach, we can create a standalone UI5 application displaying tables (and it is also ABAP OO now 😉). We set the content of the table with the class z2ui5_cl_xml_view at the following position:

page->scroll_container( height = '70%' vertical = abap_true
       )->table( items = view->_bind( t_tab ) ).

In contrast to Labels and Texts shown in the previous blog post, we cannot directly write the value of the attribute into the XML for a table, as a table has a deep data model. Instead, we use one-way binding by using the method _bind. The data is then automatically transformed into JSON and sent to the frontend as a part of the UI5-View-Model.

Fieldcatalog

The column definition in classic ABAP was made with the fieldcatalog. In abap2UI5, we define it with the view class as well:

         )->columns(
             )->column( )->text( 'Carrid' )->get_parent(
             )->column( )->text( 'Connid' )->get_parent(
             )->column( )->text( 'Fldate' )->get_parent(
             )->column( )->text( 'Price'  )->get_parent(
         )->get_parent(
             )->items( )->column_list_item( )->cells(
                )->text( '{CARRID}'
                )->text( '{CONNID}'
                )->text( '{FLDATE}'
                )->text( '{PRICE}' ).

We have a lot of possibilities to customize the output of the columns, similar to the classic fieldcatalog, such as choosing a checkbox instead of a normal text output, changing the title or adding hotspots. Take a look at the full source code of this example here.

In this example the column definition is set manually, but it is also possible to do it automatically with RTTS, similar to what cl_salv_table does. We’ll see this in part four of this blog series, when we develop a table maintenance app. Next, we will extend the table output with a toolbar.

Toolbar

Here’s what a demo app of a table with toolbar looks like:

Toolbar in abap2UI5

The view definition is similar to the first example, we just extended the table header:

tab->header_toolbar( )->overflow_toolbar(
                )->title( 'title of the table'
                )->button(
                    text  = 'left side button'
                    icon  = 'sap-icon://account'
                    press = client->_event( 'BUTTON_SORT' )
                )->segmented_button( selected_key = mv_key
                    )->items(
                        )->segmented_button_item(
                            key = 'BLUE'
                            icon = 'sap-icon://accept'
                            text = 'blue'
                        )->segmented_button_item(
                            key = 'GREEN'
                            icon = 'sap-icon://add-favorite'
                            text = 'green'
                )->get_parent( )->get_parent(
                )->toolbar_spacer(
                )->generic_tag(
                        text           = 'Project Cost'
                        design         = 'StatusIconHidden'
                        status         = 'Error'
                    )->object_number(
                        state      = 'Error'
                        emphasized = 'false'
                        number     = '3.5M'
                        unit       = 'EUR'
                )->get_parent(
                )->toolbar_spacer(
                )->button(
                    text  = 'Sort'
                    icon = 'sap-icon://sort-descending'
                    press = client->_event( 'BUTTON_SORT' )
                )->button(
                    icon  = 'sap-icon://edit'
                    press = client->_event( 'BUTTON_POST' ) ).

The full source code of this example can be found here. Next we will add different selection modes.

Selection Modes

There are four selection modes available: (1) SingleSelect, (2) SingleSelectLeft, (3) SingleSelectMaster and (4) MultiSelect. Here’s a preview of the selection modes in action:

Selection Modes in abap2UI5

The selection mode is set in the beginning of the table definition:

 page->table(
     mode  = 'SingleSelectLeft'
     items = client->_bind_edit( t_tab ) ).

In addition, we define the column that saves the information of the selected rows. Similarly to the classic fieldcatalog, we define a column which will be automatically updated with the selected rows. We set the column with the name ‘selkz’ (more modern names are also possible 😉) as the ‘selected’ attribute for the column list item:

tab->items( 
    )->column_list_item( selected = '{SELKZ}'
        )->cells(
            ...

You can find the full source code of this example here. Now we will make the table editable.

Editable

Look at this example of an editable table in abap2UI5:

Editable Tables in abap2UI5

The code is similar to the previous example, but the column definition differs. Every time the editable function is activated, input controls are used instead of text controls:

 IF check_editable_active = abap_true.

      tab->items( )->column_list_item( )->cells(
              )->input( '{TITLE}'
              )->input( '{VALUE}'
              )->input( '{INFO}'
              )->input( '{DESCR}'
              )->checkbox( selected = '{CHECKBOX}' enabled = abap_true ).
 ELSE.
      tab->items( )->column_list_item( )->cells(
             )->text( '{TITLE}'
             )->text( '{VALUE}'
             )->text( '{INFO}'
             )->text( '{DESCR}'
             )->checkbox( '{CHECKBOX}' ).
ENDIF.

Furthermore, we need to ensure that abap2UI5 sends the updated values back to the server. Therefore, we have to change the type of the data binding from one-way to two-way binding:

DATA(tab) = page->table( items = view->_bind_edit( t_tab ) ).

Now, with every request, the changed table data is sent back to the server. The full source code of this example can be found here.

Up until now, we have implemented many of the basic features found in cl_gui_alv_grid and cl_salv_table for our table output. There are still many more functionalities to explore, as we will see in the next blog posts. But before that, let’s move on to the last part of this post and take a look at selection screens — an important aspect of ABAP development that enables us to obtain selection criteria for database queries.

Selection Screens

We start again with a demo:

Selection Screen – Example in abap2UI5

This is the source code of the above view:

view->page( 'abap2UI5 - Selection-Screen'
    )->simple_form('Input' )->content( 'f'
        )->label( 'Input with value help'
        )->input(
            value       = view->_bind( screen-colour )
            placeholder = 'fill in your favorite colour'
            suggestion_items = view->_bind_one_way( mt_suggestion ) )->get(
            )->suggestion_items( )->get(
                )->list_item( text = '{VALUE}' additional_text = '{DESCR}' 
        )->get_parent( )->get_parent(

        )->label( 'Date'
        )->date_picker( view->_bind( screen-date )

        )->label( 'Date and Time'
        )->date_time_picker( view->_bind( screen-date_time )

        )->label( 'Time Begin/End'
        )->time_picker( view->_bind( screen-time_start )
        )->time_picker( view->_bind( screen-time_end ) ).

        )->label( 'Checkbox'
        )->checkbox(
           selected = view->_bind( screen-check_is_active )
           text     = 'this is a checkbox'
           enabled  = abap_true

       )->label( 'Combobox'
       )->combobox(
           selectedkey = view->_bind( screen-combo_key )
           items      = view->_bind_one_way( VALUE ty_t_combo(
              ( key = 'BLUE'  text = 'green' )
              ( key = 'GREEN' text = 'blue'  )
              ( key = 'BLACK' text = 'red'   )
              ( key = 'GRAY'  text = 'gray'  ) )
           ) )->get( )->item( key = '{KEY}' text = '{TEXT}'
        )->get_parent( )->get_parent(

      )->label( 'Segmented Button'
      )->segmented_button( view->_bind( screen-segment_key ) )->get(
        )->items( )->get(
             )->segmented_button_item( key = 'BLUE'  icon = 'sap-icon://accept'       text = 'blue'
             )->segmented_button_item( key = 'GREEN' icon = 'sap-icon://add-favorite' text = 'green'
             )->segmented_button_item( key = 'BLACK' icon = 'sap-icon://attachment'   text = 'black'
       )->get_parent( )->get_parent(

      )->label( 'Switch disabled'
      )->switch( enabled = abap_false    customtexton = 'A' customtextoff = 'B'
      )->label( 'Switch accept/reject'
      )->switch( state = screen-check_switch_01 customtexton = 'on'  customtextoff = 'off' type = 'AcceptReject'
      )->label( 'Switch normal'
      )->switch( state = screen-check_switch_02 customtexton = 'YES' customtextoff = 'NO' ).

This looks very technical, but this level of complexity was also present in classic selection screens. The class z2ui5_cl_xml_view provides only the technical rendering layer upon which users can build their own more user-friendly functions. You can find the full source code of the above example here.

And an other demonstration is here:

Selection Screen – More Controls

Summary

This was the second part of this introduction to abap2UI5. We saw that abap2UI5 tries to mimic the classic ABAP way to develop apps for displaying tables and selection screens. We can also easily add toolbars, use selection modes and make tables editable.