Skip to Content
Technical Articles
Author's profile photo Oblomov Dev

abap2UI5 – Development of UI5 Selection Screens in pure ABAP

Update 23.02.2023
Thank you all for the great feedback and comments on this blog article. The approach is now extended, enabling the creation of views for a wide range of UI5 Controls. Check out the new blog post here.

Introduction

In new ABAP releases, SAP-GUI is no longer available, and one feature that I miss a lot is the classic selection screen. With just a few lines of ABAP, an application with GUI and event handling was automatically generated. Unfortunately, if_oo_adt_classrun cannot replace this functionality since it does not allow data transfer of inputs to the server, nor does it generate a browser-based app that can be used by end users.

So how we can bring the Selection Screen approach to the new (non-SAP-GUI) ABAP Environment?

One solution is this little open-source project called abap2UI5. With this project you can create standalone and ready to use UI5 applications in pure ABAP. No app deployment or JavaScript is needed. Data transfer and event handling in the backend is automatically integrated. It has the function scope of the former selection screen.

Example:

The entire functionality is based on a single HTTP handler. The frontend app is a generic one-page UI5 application, and the framework dynamically generates UI5-XML-Views and JSON-View-Models at runtime based on the ABAP implementation of the user.

Let’s start with a basic example:

First App

After installing the project with abapGit you will find the interface z2ui5_if_app in your system:

INTERFACE z2ui5_if_app PUBLIC.
  INTERFACES if_serializable_object.

  METHODS set_view
    IMPORTING
      view TYPE REF TO z2ui5_if_view.

  METHODS on_event
    IMPORTING
      client TYPE REF TO z2ui5_if_client.

ENDINTERFACE.

To develop a new abap2UI5 application, create a global ABAP class and implement the above interface. You can use the following code snippet as a template:

CLASS z2ui5_cl_app_demo_01 DEFINITION PUBLIC.

  PUBLIC SECTION.

    INTERFACES z2ui5_if_app.

    DATA product TYPE string.
    DATA quantity TYPE string.
    DATA check_initialized TYPE abap_bool.

ENDCLASS.

CLASS z2ui5_cl_app_demo_01 IMPLEMENTATION.

  METHOD z2ui5_if_app~on_event.

    "set initial values
    IF check_initialized = abap_false.
      check_initialized = abap_true.
      product = 'tomato'.
      quantity = '500'.
    ENDIF.

    "user event handling
    CASE client->event( )->get_id( ).

      WHEN 'BUTTON_POST'.
        "do something
        client->popup( )->message_toast( |{ product } { quantity } ST - GR successful| ).

    ENDCASE.

  ENDMETHOD.

  METHOD z2ui5_if_app~set_view.

    "define selection screen
    view->factory_selscreen_page( title = 'My ABAP Application - Z2UI5_CL_APP_DEMO_01'
        )->begin_of_block( 'Selection Screen Title'
            )->begin_of_group( 'Stock Information'
                )->label( 'Product'
                )->input( product
                )->label( 'Quantity'
                )->input( quantity
                )->button( text = 'Post Goods Receipt' on_press_id = 'BUTTON_POST' ).

  ENDMETHOD.
ENDCLASS.

There is nothing else left to do and your application is already ready to start now.

Simply call the HTTP interface z2ui5_http_cloud of the project in your browser. You can find the URL for this interface in the project’s package:

Replace the ‘app’ parameter in the URL with the name of your new ABAP class. The updated URL should look similar to this:

<your_system>:<port>/sap/bc/http/sap/z2ui5_http_cloud?app=<your_abap_class_name>

Next call it in your browser and your new app will be displayed:

This is just a small example, but it can be seen as a starting point. Feel free to modify the view and add your own custom logic to the controller as needed.

Data Transfer & Event Handling

We will now change the values on the frontend to “potato” and a quantity of 200:

Then we set a breakpoint in Eclipse and take a look at the backend system:

As you can see, the attributes of the class have been changed to “potato” and 200. This demonstrates that we have a working data transfer between the client and the backend. Additionally, the correct event was sent and the message toast is triggered in the backend and displayed in the frontend with the updated values:

Note that the attributes must be in the public section of the implemented class, as this enables the transfer of values between the frontend and the backend.

How does this work? Let’s take a closer look into the functionality.

Functional Background

The development of abap2UI5 is influenced by the following ideas:

  • the if_oo_adt_classrun interface allows users to create an output by implementing just one interface, which is extremely efficient
  • selection screens provide a full working UI with data transfer & event handling, just a few lines of code are needed. this makes it additionally very easy to copy code snippets between systems or projects providing a simple way to reuse functionality
  • frontend development based on a single page application combined with asynchronous AJAX updates provide ways to develop frontend applications using only backend languages, which is reducing a lot of complexity (for example, check out this very nice blog post of Patrick VILLENEUVE)
The approach of abap2UI5 aims to incorporate these ideas as much as possible: The user only needs to implement one interface in pure ABAP to develop a fully working UI5 application and the frontend is kept as small as possible, so there is no need for specific app deployment or JavaScript. Everything is created in the backend during runtime.

Server-Client Communication:

By calling the abap2UI5 HTTP service, a generic one-page UI5 application is first sent to the client:

After that, every event triggers an AJAX round-trip between the server and the client. The updated values and event information are sent with the request to the backend. The response includes a new UI5-XML-View and a JSON-View-Model:

Server-> Client:

For example, the response of first view of the application at the beginning of this blog post looks like this:

JSON-Response

UI5-XML-View

Client -> Server:

And after changing the input, the request with the updated values and event information looks like this:

JSON Request

Persistence, stateful-like feeling:

The HTTP Interface is based on REST, meaning that there is no server session between two requests. Despite this, the implementation saves all class attributes since the abap2UI5 interface also implements the interface if_serializable_object. With every request, the object is saved to the database:

z2ui5_t_draft

The next request then re-creates the object with the saved attributes from the previous request. For example, this is why the check_initialized attribute is only false for the initial request, because it gets set to true during the first request and then saved in the database with the other attributes.

Detailed Example

A more detailed example of a selection screen looks like this:

Selection Screen Rendering in pure ABAP

And the controller looks like this:

abap2UI5 Controller

Summary

The goal of abap2UI5 is to offer a simple and efficient method of generating selection screens on the new non-SAP-GUI ABAP Releases. The user can create apps with minimal effort and without the need to learn new technologies and languages. Knowledge of ABAP and previous experience with selection screen logic is enough to use this project and develop applications.

Thank you for reading this blog post – what do you think of this approach?

Your questions, comments and wishes for this project are always welcome.

Assigned Tags

      29 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shai Sinai
      Shai Sinai

      Very interesting.

      Thanks for sharing.

       

      It seems it isn't compatible with NW 7.5. .e.g It uses the new class CL_ABAP_RANGE.

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      Hi Shai,

      Thanks for reading and your comment! Technically it is portable to very old releases, because it is only using a plain http handler and some abap code, but i still need to replace the modern syntax and abap classes. I will fix this and replace cl_anap_range as soon as possible.

      Best wishes!

      Author's profile photo Matthew Billingham
      Matthew Billingham

      That class only a front end for the function modules

      FREE_SELECTIONS_EX_2_RANGE

      FREE_SELECTIONS_RANGE_2_EX

      FREE_SELECTIONS_RANGE_2_EX

      FREE_SELECTIONS_WHERE_2_RANGE

      Author's profile photo Marco Beier
      Marco Beier

      Powerful & Lightweight approach. There is so much one can do with ICF HTTP Handlers.

      Really appreciate that a technical part was included in this post, I love reading them.

      Author's profile photo Kai Sicker
      Kai Sicker

      I really like the approach. Kudos!

      I always asked myself in the context of S4 migration:
      What shall I do with the tons of legacy reports in my company that start with a selection screen, trigger some logic and give out a protocol generated with WRITE statements?
      RAP is great when you have underlying tables but if not it is not a solution (correct me if I'm wrong).

      I will definitely give this a try and if it works out it could remove one of the major impediments of migration from Dynpro to UI5.
      (Replacement for WRITE-based protocols would still be an issue but that's another topic)

      Regards
      Kai

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      Hi Kai,

      Thanks for reading and your comment! Yes I think so too, with RAP you always need an underlying table and then you also have to handle all these DDIC artifacts etc.

      Including the write statement is a very good idea! Similar to the popups, i can add a write method and then at the frontend a new UI5 View is created with some sap.m.Text. The basic functionality should be not so complicated and I can try to add this soon. But of course including tables, icons and so on, is more effort.

      Best wishes

      Author's profile photo Michael Keller
      Michael Keller

      Kai Sicker: Maybe custom entity and/or virtual fields and a lot of "good will" and work may help. I made a lot of very powerful tools for customers in SAP context with selection screen starting and then ALV or functions that are just executed from selection screen. That was cheap, fast and powerful. So I'm a big fan of backward compatibility to protect customer's already done investments.

      Oblomov Dev: Nice approach what I have seen so far. Thanks for sharing!

      Author's profile photo Petr Plenkov
      Petr Plenkov

      Hi! Great exercise. So it looks like some ABAP SSR concept is being applied here. Could you please share the use case and the problem you tried to solve ?

      I think what you’ve created is similar to ABAP web dynpro - stateful SSR written in ABAP

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      Hi Petr,

      Thanks for reading and your comment!

      Use Case 1:

      I use if_oo_adt_classrun a lot for testing. I like the easy and lightweight approach, just implement one interface to create outputs is a very good service. This pure abap code based approach makes it also very easy to copy and collect code snippets etc. But unfortunately you have no chance to send input values to the server with if_oo_adt_classrun. So this approach could be one solution to solve this.

      Use Case 2:

      I miss the selection screen in the abap cloud environment. Of course you can use RAP, but for a simple selection screens you have a much higher effort with RAP compared with the selection screen in the past. This approach is very similar to the former selection screen syntax and logic and could also be helpful for colleagues who are not so familiar with all the new abap cloud stuff in the beginning 😉

      Dynpro / Web Dynpro

      Yes similar to the selection screen, there is also no dynpro or web dynpro in the cloud anymore. So far i only focused on the selection screen functionality, but adding more features and including more UI5 Controls and Events is possible. So this project and approach could also handle a lot more features similar to dynpro or web dynpro in the future.

      Best wishes

      Author's profile photo Rodrigo Giner de la Vega
      Rodrigo Giner de la Vega

      Dude, this is awesome !!!

      This is what SAP should had aimed all along. The stament that they created ABAP cloud/SAP so any ABAPer could leverage they knowledge for easy transition to the cloud is nonsense, The only thing that are shared is "syntax" and not even, because all the new syntax introduced and you can't use 95% of the ABAP workbench.

      SAP UI5 is awful, just like Webdynpro was awfull and CRM UI was horrendous. BSP was cool and shocking when you deploy a UI5 app is deployed as a BSP app. -__-

      For any customer that want to stick to on-premise deployment this would be great.

      I'm cheering for you !!! keep the good work.

      Regards

      Author's profile photo Tomas Buryanek
      Tomas Buryanek

      SAP UI5 is awful, just like Webdynpro was awfull...

      Nice to see I am not alone thinking this 🙂

      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      I'd like to hear more on why "SAP UI5 is awful". Would you mind sharing?

      Author's profile photo Gabor Toldi
      Gabor Toldi

      I agree to you. As i have seen yet for me it's only a half mvc in UI5. And i am more for MVP or MVVM Model. UI should be easy changeable. SAP is thinking in "bring all to SAP" but less into "bring SAP to all" to integrate it in other solutions and so on.

      Author's profile photo Gabor Farkas
      Gabor Farkas

      This is a great concept, I like the idea of replicating the declarative and easy form of selection screens.

      Maybe it would also be worth looking into creating a purely frontend equivalent where you can use a simplified language to describe screens and it would build the UI5 view automatically.

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      Hi Gabor,

      yes, great idea! I already experimented with defining and persist ui5 abap views in the backend at design time, similar to the good old-fashioned screen painter. Then at runtime this views could be modified to real ui5 views based on the implemented class and send together with a matching view model to the frontend. That gives the user more freedom in the selection of ui5 controls and how the view is structured. I can give this a try when i finished the current changes.

      Greetings.

      Author's profile photo Marc Bernard
      Marc Bernard

      Don't persist anything. That makes things more complicated (like transporting). Keep it 100% code. That's the beauty of this approach.

      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      We already have it: Fiori Elements

      For example, you can use local annotations (frontend only) or CDS View Annotations (backend only), no js code required.

      Author's profile photo Gabor Farkas
      Gabor Farkas

      Yeah that's a fair point, Fiori Elements is kind of a similar concept and it's indeed very powerful.

      Author's profile photo Felipe Silva
      Felipe Silva

      This is really great! I see it as a bridge for those old z developments to the "new world". Curious to try it out and make it work in non cloud scenarios.

      Kudos!

      Author's profile photo Christian Crusan
      Christian Crusan

      Nice work! If you now add a support for display  table content like ALV (not necessary with all the features, just the header and rows) this would make it even more useful.

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      Yes, something similar to the classic ALV Fullscreen output with a rudimentary fcat should be possible. I will take a look on it.

      Author's profile photo Bruno Santana
      Bruno Santana

      Hi!

       

      I'm tryng create my tests here but I'm facing with one error during my pull from git.

       

      error from DDIF_TABL_PUTImport of object Z2UI5_T_001 failed

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      Are you using an on-premise system or cloud? which version is your system?

      Author's profile photo Bruno Santana
      Bruno Santana

      on-premise

      S4 2020

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      uhh! I checked this again, the table works fine on my side. so at the moment maybe the only way is  to create the table manually in the system. you can use the following snippet:

      @EndUserText.label : 'draft'
      @AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
      @AbapCatalog.tableCategory : #TRANSPARENT
      @AbapCatalog.deliveryClass : #A
      @AbapCatalog.dataMaintenance : #RESTRICTED
      define table z2ui5_t_001 {
      
        key client : abap.clnt not null;
        key uuid   : abap.char(32) not null;
        timestampl : timestampl;
        uname      : abap.char(20);
        data       : cmis_string;
      
      }

      let me know if you have further problems. I make some bigger changes at the moment, so soon there will be a new version. I hope the problems will also be solved with this version.

      Author's profile photo Jasper Nan
      Jasper Nan

      excellent!!

       

      I'm testing with S4 version 1809 on-premise, and some objects are not exist.

      ex: IF_WEB_HTTP_REQUEST

      TYPE utcl

      What is the minimum version required to run this successfully?

       

       

      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      It is working and tested with ABAP Platform 1909.

      I am working at the moment to make it compatible with v7.50. Next week the new version should be ready. Now i already replaced the UTCL and IF_WEB_HTTP_REQUEST in it, so thanks for the hint.

      Author's profile photo Sadullah TANRIKULU
      Sadullah TANRIKULU

      Excellent work, I'm a jr ABAPer, after experience with 1 year js frontend frameworks like react, angular. This approach makes implementation simpler. I prefer lightweight frontend, with powerful backend logic. btw that's why I'm here in SAP world. Please keep this simple, do not add a lot of features that makes it complicated. Thanks again because of contributions to the IT world.

      Author's profile photo Gabor Toldi
      Gabor Toldi

      Thank you for this great work. For me SAP had make with UI5 the same mistake like on dynpros, to bring business logic to near to screen logic. The result was a lot of horrible UI mixed business logic. A lot of people prefer to have the UI more changeable or support different you implementations.