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

abap2UI5 – (6/7) Installation, Configuration & Debugging

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

This post explains how to install, configure and debug abap2UI5.

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

Blog Series

(1/7) Introduction: Developing UI5 Apps in Pure ABAP
(2/7) Displaying Selection Screens & Tables
(3/7) Popups, F4-Help, Messages & Controller Logic
(4/7) Advanced Functionality & Demonstrations
(5/7) Extensions with XML Views, HTML, JS & Custom Controls 
(6/7) Installation, Configuration & Debugging (this blog post)
(7/7) Technical Background: Under the Hood of abap2UI5
(A1) Repository Setup with abapGit, abaplint & open-abap
(A2) Community Feedback & New Features


1. Install the project with abapGit

For an on-premise system, you can use this Guideline. In a cloud environment, you can follow this Tutorial. The project is based on a single code line for both language versions (ABAP Cloud, Standard ABAP), so you can clone this repository in both cases. For lower releases (NW 7.03 to 7.40) use this downport repository.

2. Create a new HTTP Service

Next, create a new HTTP service in your system. In an on-premise environment, you need to create and configure a new ICF service. Follow this guideline for that and see how to develop a new HTTP request handler here. In a cloud scenario, follow this tutorial.

3. Implement the Handler Method

Now copy the following implementation into your new handle_request method.

ABAP Standard:

METHOD if_http_extension~handle_request.

   DATA(lv_resp) = SWITCH #( server->request->get_method( )
      WHEN 'GET'  THEN z2ui5_cl_http_handler=>http_get( )
      WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( server->request->get_cdata( ) ) ).

   server->response->set_header_field( name = `cache-control` value = `no-cache` ).
   server->response->set_cdata( lv_resp ).
   server->response->set_status( code = 200 reason = `success` ).


ABAP Cloud:

METHOD if_http_service_extension~handle_request.

   DATA(lv_resp) = SWITCH #( request->get_method( )
      WHEN 'GET'  THEN z2ui5_cl_http_handler=>http_get( )
      WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( request->get_text( ) ) ).

   response->set_status( 200 )->set_text( lv_resp
      )->set_header_field( i_name = `cache-control` i_value = `no-cache` ).


By calling your new HTTP handler via browser, you can start abap2UI5 and see the landing page:

abap2UI5 Landing Page

Optionally you can install the abap2UI5 samples repository next and check out all the examples:

abap2UI5 Samples Repository

Now you are ready to develop your first own app. See the first blog post to find more information about the development process.


Options and URL Parameters

There are two ways to set the configuration: one is by setting it via URL parameter, and the other option is by importing it as a configuration by calling the index HTML.

By default, the following parameters are set:

lt_config = VALUE #(
        (  n = `data-sap-ui-theme`         v = `sap_horizon` )
        (  n = `src`                       v = `` )
        (  n = `data-sap-ui-libs`          v = `sap.m` )
        (  n = `data-sap-ui-bindingSyntax` v = `complex` )
        (  n = `data-sap-ui-frameOptions`  v = `trusted` )
        (  n = `data-sap-ui-compatVersion` v = `edge` ) ).

If you want to make changes, simply copy the table, adjust the necessary parameters and then import the table again when calling the method:

DATA(lt_config) = VALUE z2ui5_if_client=>ty_t_name_value( 
      (  n = `data-sap-ui-theme`         v = `sap_belize` ) "<- adjusted
      (  n = `src`                       v = `` )
      (  n = `data-sap-ui-libs`          v = `sap.m` )
      (  n = `data-sap-ui-bindingSyntax` v = `complex` )
      (  n = `data-sap-ui-frameOptions`  v = `trusted` )
      (  n = `data-sap-ui-compatVersion` v = `edge` ) ).

DATA(lv_resp) = SWITCH #( request->get_method( )
   WHEN 'GET'  THEN z2ui5_cl_http_handler=>http_get( lt_config )
   WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( request->get_text( ) ) ).


You can the title in the app implementation:

client->title_set( 'My Title' ).


abap2UI5 with changed title

You can find a list of all configuration parameters here. Additionally, you can modify these parameters with the sap-ui- prefix to use them as URL parameters.


To synchronize the configuration with all other UI5 apps in your system, you can use the following customizing and read this table before the method call (enjoy the view, this is the only SAP GUI screenshot included in this blog series 😉):


Configuration SAP UI5 Bootstrapping


The most common change is to the theme. You can find all available themes here. The newest theme is Horizon (sap_horizon) and it is used in all the demos of this blog series. Other popular themes are:

Belize (sap_belize) Quartz Light (sap_fiori_3)
Evening Horizon (sap_horizon_dark) High Contrast Black (sap_horizon_hcb)


In an on-premise landscape, you can bootstrap the UI5 library from your local system. Typically, the path is “/sap/public/bc/ui5_ui5/resources/sap-ui-core.js” or “resources/sap-ui-core.js”. In a cloud scenario, you can refer to SAP guidelines available here.


Abap2UI5 is based on a single-page index.html, which makes it not compatible with FLP out-of-the-box (since FLP replaces the index.html). However, it is possible to encapsulate abap2UI5 in a UI5 standard app. Note that there is still some work to do but if you want to try out this approach or contribute to the project, check out this project.


You can change the CSS by sending HTML with you View in your app. An example can be found here:


abap2UI5 app with changed CSS


At the backend, abap2UI5 is a plain HTTP handler that every user creates and configures by themselves (visibility, authentication & other security parameters). In the implementation of your apps you have to take care of a secure programming style like always when developing HTTP-Handlers (call authorization checks, avoid dynamic SQL etc.). Check this for more information.

At the frontend, abap2UI5 is a normal one page UI5 application. It loads the external library UI5 from a CDN or your own customized directory. The UI5 framework is used to render the HTML and only methods of the UI5 framework are called to handle the all events.

Additionally to prevent cross-site-scripting the following parameter are set in the index.html:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' * * *"/>

It only allows libraries from the same server,, or, which we needed to use for some external libraries. Adjust the importing parameter ‘content-security-policy’ when you want to include more external URLs:

DATA(lv_resp) = SWITCH #( request->get_method( )
           WHEN 'GET'  THEN z2ui5_cl_http_handler=>http_get(
                          content_security_policy = `<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' * * *"/>` ) 
           WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( request->get_text( ) ) ).

You can find more information about CSP here.


When your app is in the development process, you can activate logging by changing the following parameter:

DATA(lv_resp) = SWITCH #( request->get_method( )
       WHEN 'GET'  THEN z2ui5_cl_http_handler=>http_get(
                           check_logging = abap_true )
       WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( request->get_text( ) ) ).


After that, the XML View is written into the console after every server response:


Most of the issues arise because the XML is not valid. You can check it there or copy & paste it to an XML validator. Another good way to test the XML are UI5 sandboxes, such as the OpenUI5 Sandbox.

Next, you can scroll up a little bit to check the remainder of the previous response.


Response Object

If a parameter is bound with _bind_one, it should be written in the oViewModel. If a parameter is bound with _bind, it should be written in oUpdate. You can also check the last request to ensure that all updated values have been sent to the server.


Request Object

To take a more detailed look at the UI, use the UI5 Inspector. This tool is helpful for analyzing and checking certain controls:


UI5 Inspector with an abap2UI5 app

You can find more guidelines here.

Also, keep in mind that abap2UI5 is based on REST, so you don’t need to restart the app all the time after a change, like in the former screen logic where changes were only visible after restarting. Just triggering a server roundtrip is enough to see the changes:


View Development in abap2UI5


Set a breakpoint in your app and check the values that abap2UI5 provides you, as well as the values you give back to abap2UI5. Check if the view XML is filled and if it is valid. Normally, abap2UI5 throws an exception if something unexpected happens, which can help you to identify the problem. If you want to gain a deeper understanding, you can also debug the framework itself.

The framework is based on a single http handler. Set a breakpoint here and check incoming requests and outgoing responses:

abap2UI5 HTTP Handler

The initial request loads the UI5 index.html, which is independent of your application and should normally not cause any problems:

abap2UI5 Get Handler (index.html)

After this, the AJAX roundtrip logic begins. Every event and interaction creates a new HTTP Post request, which triggers the following method:

abap2UI5 Post Handler

As you can see, we call the user’s app on line 44. You can also check if your app has been successfully updated after the frontend on line 39 and check the following method:


Update app after frontend (PAI)

And the reverse direction, setting the response with the values of your app in this method:

Create frontend model before output (PBO)

If you find a bug in the framework or running into problems with your app, feel free to open an issue.


This was part six of this introduction to abap2UI5. You now have an understanding how to install & configure it and got insights into troubleshooting & debugging.

In the final blog post, we will focus on the technical background of this framework and summarize all the project’s key ideas by covering topics such as its architecture, codebase and compatibility.

Thank you for reading this blog post!

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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Iskandar Тyukmaev
      Iskandar Тyukmaev

      Hi all!

      When I select “Pull” to copy all objects from the Git repository into the SAP system.
      I get message "Error from DDIF_TABL_PUT", has anyone ever received such an error?

      Author's profile photo Christian Guenter
      Christian Guenter

      I'd suggest to raise an issue in the git repo.


      BR Christian

      Author's profile photo Barış Güler
      Barış Güler

      I'm having trouble with creating services and running demos with SICF. I created the service using the given method, but when I test it, I get Internal service 500 error. Do you have any ideas?

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

      Hi Baris, thank you for trying this out, I had to make some changes in the startup process, can you pull the actual version one more time and try again? Best Regards.

      Author's profile photo Barış Güler
      Barış Güler

      Thanks for quick reply. It's working now. Regards

      Author's profile photo Jerôme MOUTREUX
      Jerôme MOUTREUX

      Hello error in class Z2UI5_CL_XML_VIEW method XML_GET


      No type can be derived from the context for the operator "REDUCE". I'm on 740 system but i don't find this class in 702 repository.


      could you please help.?


      I don't know the new syntax (i work on add-on partner and we must be compatible 702 system).



          DATA(lv_tmp3REDUCE #INIT val `` FOR row IN mt_prop WHERE v <> `` )
      NEXT val |{ val } { row-n }="{ escape( val = COND string( WHEN row-v = abap_true THEN `true` ELSE row-v ) format = cl_abap_format=>e_xml_attr ) }" \n | ).

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

      Oh yes, the downported v702 branch is not up to date anymore. I will fix this in the next days and let you know again.

      Author's profile photo Jerôme MOUTREUX
      Jerôme MOUTREUX

      Hello thanks.


      temporary I declare lv_tmp3 with type string and it's work.

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

      The downport repository is updated now:

      Author's profile photo Mayur Satardekar
      Mayur Satardekar

      Can't access the tutorial page

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

      The blog is updated, this is the new link:

      Author's profile photo Wenjing Liu
      Wenjing Liu

      Hi Oblomov Dev,

      Thanks for the project. I am on BTP Trial, and I have created my own application successfully. However I don't know how to change the theme.

      DATA(lv_resp) = SWITCH #( request->get_method( )
          WHEN 'GET'  THEN z2ui5_cl_http_handler=>http_get( t_config = lt_config )
          WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( ) ).

      This line of code would throw an error, "Field "REQUEST" is unknown".

      Can you help? Thanks!


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

      Hi Wenjing,

      Thank you for trying out abap2UI5. Have you created a new HTTP Service first? You can follow this guideline. After finishing the tutorial you get a new HTTP Handler class, and there you can copy the code snippet you marked into the method if_http_service_extension~handle_request.

      Best regards.

      Author's profile photo Wenjing Liu
      Wenjing Liu

      Yes, you are right. Thanks for the help!

      In the BTP Trial system, somebody has pulled the repo and created a package ZABAP2UI5. I was using the HTTP service ZABAP2UI5 in that package rather than my own ZNOV05_TEST_HTTP, and I didn’t place the configuration code in either HTTP service handler class. Instead, I tried to include the code in my application class, and that is why "request" caused an error. Now I have changed the theme in my own HTTP service handler class, and it works well.

      Author's profile photo Ali Kaplan
      Ali Kaplan

      Hi Oblomov Dev

      awesome framework! While trying to install it on your on-premises NW system I realized that the following line of code in Handler Method for Abap Standard seems to be outdated in this blog post:

      path_info = lt_header[ name = `~path_info` ]-value

      Other than that, everything went flawlessly!

      Thank you so much for providing a framework that helps us ABAP developers provide slick modern UIs in no time.



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

      Hi Ali, nice to hear that you like abap2UI5 and thank you for your feedback. The blog post is updated now. Best regards.

      Author's profile photo Kenneth Moore
      Kenneth Moore

      I've downloaded the samples, but I'm not understanding how to run them.  I guess I'm not understanding the SICF settings and how to connect to the samples classes.

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

      Hi Kenneth Moore,

      Install the abap2UI5 repository first and then create a new icf service to call the samples. You can find more detailed installation guidelines here and feel free to create an issue here if you have further questions.

      Best regards.

      Author's profile photo Kenneth Moore
      Kenneth Moore

      Hello Oblomov,

      I did already install the abap2UI5 repository, yes.  When I test the service zabap2UI5 in SICF, I get the error, "File not found!".

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

      Hi Kenneth,

      it seems that you installed the launchpad extension, this is not necessary. Just install the main repository:

      You can find installation guidelines here:

      After that, create a new ICF Service manually, as described here:

      Thats all you have to do.

      Best regards.

      Author's profile photo Kenneth Moore
      Kenneth Moore

      Hello Oblomov,

      I did not install the extension, but I went ahead and deleted and reinstalled the main repository.  I get the same result.  I did notice that the instructions for the http service class, ZCL_MY_ABAP2UI5_HTTP_HANDLER , that it shows class z2ui5_cl_http_handler, but that class is not available.  z2ui5_cl_fw_http_handler is only available.  Does it have something to do with that?



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

      yes this could be the reason, use the class z2ui5_cl_fw_http_handler or just copy & paste the snippet, you can find here: