Welcome to the second part of this blog series introducing abap2UI5 — an open-source project for developing UI5 apps purely in ABAP.
In this post, we're focusing on selection screens and displaying tables. We'll enhance these features by adding a toolbar, various selection modes, and edit functionality.
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:
Content
This post covers the following areas:
Before we begin let's look at this demo showcasing tables and lists to get an impression of what is possible with abap2UI5 – everything is created purely in ABAP in the backend.
Let's start by examining the classic SAP-GUI method for displaying tables in ABAP:
Displaying a view with table output in ABAP takes only about 25 lines, making it an efficient process. With just a few extra lines, you can add buttons, toolbars, and interactions.
However, creating this result in a non-SAP-GUI or ABAP Cloud Environment requires either RAP or the development of 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, abap2UI5 aims to return to the classic SAP GUI approach. The code for the example above in abap2UI5 is as follows:
As you can see, with just a few additional lines compared to the classic approach, we can create a standalone UI5 application displaying tables (and now it's also ABAP OO 😉). We set the content of the table with the class z2ui5_cl_xml_view as follows:
Unlike Labels and Texts shown in the previous blog post, we can't 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 with the method '_bind'. The content of the table is then automatically transformed into JSON and sent to the frontend as part of the UI5-View-Model.
In classic ABAP, column definition was done using the fieldcatalog. In abap2UI5, we define it with the view class as well:
There are many customization options for column outputs, similar to the classic fieldcatalog, such as choosing a checkbox instead of a normal text output, changing the title or adding hotspots. The full source code of this example can be found here.
In this example, column definition is set manually, but automatic definition using RTTS is also possible, similar to 'cl_salv_table' We'll explore this in part four of this blog series, where we develop a table maintenance app. Next, let's extend the table output with a toolbar.
Here’s what a demo app of a table with toolbar looks like:
The view definition is similar to the first example, with the table header extended:
The full source code of this example can be found here. Next we will add different 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:
The selection mode is set in the beginning of the table definition:
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:
You can find the full source code of this example here. Now we will make the table editable.
Look at this example of an editable table 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:
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:
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.
We start again with a demo:
This is the source code of the above view:
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:
This concludes the second part of our introduction to abap2UI5. We've seen that abap2UI5 strives to mimic the classic ABAP way of developing apps for displaying tables and selection screens. We can also easily add toolbars, utilize selection modes, and make tables editable.
In this post, we're focusing on selection screens and displaying tables. We'll enhance these features by adding a toolbar, various selection modes, and edit functionality.
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:
Content
This post covers the following areas:
- Displaying Tables
- Fieldcatalog
- Toolbar
- Selection Modes
- Editable
- Selection Screens
- Conclusion
Before we begin let's look at this demo showcasing tables and lists to get an impression of what is possible with abap2UI5 – everything is created purely in ABAP in the backend.
Demo of Tables & Lists in abap2UI5
1. Displaying Tables
Let's start by examining 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 ).Displaying a view with table output in ABAP takes only about 25 lines, making it an efficient process. With just a few extra lines, you can add buttons, toolbars, and interactions.
However, creating this result in a non-SAP-GUI or ABAP Cloud Environment requires either RAP or the development of 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, abap2UI5 aims to return to the classic SAP GUI approach. The code for the example above in abap2UI5 is as follows:
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( )->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 you can see, with just a few additional lines compared to the classic approach, we can create a standalone UI5 application displaying tables (and now it's also ABAP OO 😉). We set the content of the table with the class z2ui5_cl_xml_view as follows:
page->scroll_container( height = '70%' vertical = abap_true
)->table( items = view->_bind( t_tab ) ).Unlike Labels and Texts shown in the previous blog post, we can't 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 with the method '_bind'. The content of the table is then automatically transformed into JSON and sent to the frontend as part of the UI5-View-Model.
1.1. Fieldcatalog
In classic ABAP, column definition was done using 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}' ).There are many customization options for column outputs, similar to the classic fieldcatalog, such as choosing a checkbox instead of a normal text output, changing the title or adding hotspots. The full source code of this example can be found here.
In this example, column definition is set manually, but automatic definition using RTTS is also possible, similar to 'cl_salv_table' We'll explore this in part four of this blog series, where we develop a table maintenance app. Next, let's extend the table output with a toolbar.
1.2 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, with the table header extended:
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.
1.3. 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.
1.4. 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.
2. 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
3. Conclusion
This concludes the second part of our introduction to abap2UI5. We've seen that abap2UI5 strives to mimic the classic ABAP way of developing apps for displaying tables and selection screens. We can also easily add toolbars, utilize selection modes, and make tables editable.
- SAP Managed Tags:
3 Comments
