Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
oblomov
Active Participant
15,117
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 newer ABAP releases, SAP-GUI is no longer available. 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 can we adapt the Selection Screen approach to the new non-SAP-GUI and browser-based ABAP environment?

As a solution, I have developed this 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:

UI5 App with Selection Screen Functionality Developed in Pure ABAP

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:

Getting Started & Example

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:

HTTP Endpoint of abap2UI5

Replace the 'app' parameter in the URL with the name of your new ABAP class. The updated URL looks like 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:

UI5 App sent from the Backend

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:

Changing Values at the Frontend

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

ABAP Attribute Updated with the Changed Value of the Frontend

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:

Displaying Updated Values Sent from the Backend

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:

Initial Request sends the Index.html

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:

1+n Requests: Exchanging XML-Views and JSON-Models via AJAX Calls

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. Similarly, you can work with internal tables or other variables; they are preserved between requests, providing an experience akin to developing a stateful selection screen.

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

Conclusion

The idea of abap2UI5 is to offer a simple and efficient method of generating selection screens on the newer 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 welcome.

31 Comments
shais
Participant
0 Kudos
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.
oblomov
Active Participant

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!

wridgeu
Participant
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.
Former Member

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

pepl
Active Participant
0 Kudos
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
matt
Active Contributor
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
oblomov
Active Participant

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

oblomov
Active Participant

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

Rodrigo-Giner
Active Contributor
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
Michael_Keller
Active Contributor
kaisicker: 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: Nice approach what I have seen so far. Thanks for sharing!
gabor_farkas96
Explorer
0 Kudos
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.
Tomas_Buryanek
Active Contributor

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

Nice to see I am not alone thinking this 🙂

felipe_dimmu23
Participant

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!

oblomov
Active Participant
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.
marcfbe
Participant
Don't persist anything. That makes things more complicated (like transporting). Keep it 100% code. That's the beauty of this approach.
crus_ch
Explorer
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.
mauriciolauffer
Product and Topic Expert
Product and Topic Expert
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.
mauriciolauffer
Product and Topic Expert
Product and Topic Expert
I'd like to hear more on why "SAP UI5 is awful". Would you mind sharing?
oblomov
Active Participant
Yes, something similar to the classic ALV Fullscreen output with a rudimentary fcat should be possible. I will take a look on it.
gabor_farkas96
Explorer
0 Kudos
Yeah that's a fair point, Fiori Elements is kind of a similar concept and it's indeed very powerful.
bruno_santana
Discoverer
0 Kudos
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
oblomov
Active Participant
0 Kudos
Are you using an on-premise system or cloud? which version is your system?
bruno_santana
Discoverer
0 Kudos
on-premise

S4 2020
oblomov
Active Participant
0 Kudos
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.
jasper_nan
Explorer
0 Kudos
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?

 

 
oblomov
Active Participant
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.
Sadullah
Participant
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.
0 Kudos
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.
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.
rasconbeatrice
Explorer
0 Kudos

I'm thrilled to see your post on "abap2UI5 - Development of UI5 Selection Screens in Pure ABAP." It's an intriguing topic, and your expertise in blending ABAP with UI5 is evident. Developing selection screens in pure ABAP is a game-changer, and your insights into this process are invaluable.

I'm particularly interested in exploring more about the advantages and challenges you've encountered during the development. How do you see the future of UI5 selection screens evolving within the ABAP landscape?

Looking forward to your continued posts and insights!

Maxx2
Explorer
0 Kudos

Remember, there is no such thing as "on premise" or "any premise" in real English if you are trying to describe a location.

"Premise" is a concept.
"Premises" is a location.

"https://collectivecontent.agency/2018/04/19/should-i-say-on-premise-or-on-premises-it/"

Labels in this area