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

abap2UI5 – (1/7) Introduction: Developing UI5 Apps in pure ABAP

Welcome to the first part of a blog series introducing abap2UI5.

abap2UI5 is an open-source project providing a pure ABAP approach for developing UI5 apps without JavaScript, OData and RAP — similar to the past, when only a few lines of ABAP were needed to display inputs and tables using Selection Screens and ALVs. The project is designed with a minimal system footprint and runs in both on-premise and cloud environments.

This first post provides an overview of the project’s functionality and a step-by-step guide to its development process.

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 (this blog post)
(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
(7/7) Technical Background: Under the Hood of abap2UI5
(A1) Repository Setup with abapGit, abaplint & open-abap
(A2) Community Feedback & New Features

Features

  • easy to use – implement just one interface for a standalone UI5 application
  • pure ABAP – development using 100% ABAP (no JavaScript, EML, DDL or Customizing)
  • small system footprint – based on a plain http handler (no BSP, OData, CDS, BOPF or RAP)
  • cloud and on-premise ready – works with both language versions (ABAP for Cloud, Standard ABAP)
  • high system compatibility – runs on all ABAP releases (from NW 7.02 to ABAP 2305)
  • easy installation – abapGit project, no additional app deployment needed

To install the project use abapGit. Clone the repository, create a new HTTP service and call abap2UI5. Detailed information can be found in part 6 of this series. Abap2UI5 is compatible with all ABAP releases and language versions:

  • BTP ABAP Environment (ABAP for Cloud)
  • S/4 Public Cloud ABAP Environment (ABAP for Cloud)
  • S/4 Private Cloud or On-Premise (ABAP for Cloud, Standard ABAP)
  • R/3 NetWeaver AS ABAP 7.50 or higher (Standard ABAP)
  • R/3 NetWeaver AS ABAP 7.02 to 7.42 (Standard ABAP) – use the downport repository

Demos

For an impression of the possibilities of abap2UI5, take a look at the demos presented in this blog series — everything is created in pure ABAP:

Selection Screens (Blog 2/7) Tables, Lists, Table Maintenance (Blog 2/7)
Popups, F4-Helps (Blog 3/7) MIME Editor, File Upload, Visualization (Blog 4/7)

But first let’s start with a basic example.

Basic Example

A simple abap2UI5 app with an input and a message output looks like this:

CLASS z2ui5_cl_app_demo_01 DEFINITION PUBLIC.

  PUBLIC SECTION.

    INTERFACES z2ui5_if_app.

    DATA product  TYPE string.
    DATA quantity TYPE string.

ENDCLASS.

CLASS z2ui5_cl_app_demo_01 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    "event handling
    CASE client->get( )-event.
      WHEN 'BUTTON_POST'.
        client->message_toast_display( |{ product } { quantity } - sent to the server| ).
    ENDCASE.

    "view rendering
    client->view_display( z2ui5_cl_xml_view=>factory( client
        )->page( title = 'abap2UI5 - First Example'
            )->simple_form( title = 'Form Title' editable = abap_true
                )->content( 'form'
                    )->title( 'Input'
                    )->label( 'quantity'
                    )->input( client->_bind_edit( quantity )
                    )->label( 'product'
                    )->input( client->_bind_edit( product )
                    )->button( text = 'post' press = client->_event( 'BUTTON_POST' )
         )->stringify( ) ).

  ENDMETHOD.
ENDCLASS.

As you can see, to develop an UI5 app with abap2UI5, simply create a new class and implement the method main of the following interface:

INTERFACE z2ui5_if_app PUBLIC.

  METHODS main
    IMPORTING
      client TYPE REF TO z2ui5_if_client.

ENDINTERFACE.

The output of this app looks like this:

Example%20View

abap2UI5 – First Example

Everything works out of the box – you get bidirectional data transfer, event handling and an output.

Development Process

Let’s go through the development process step-by-step starting with the view, then move on to the controller, and finally, we’ll take a look at the model.

View

Abap2UI5 provides the possibility to develop UI5 Views similar to an UI5 freestyle application. You have complete freedom in structuring the view and the flexibility to use a wide range of UI5 controls. You can define it directly as a string or create it with the class z2ui5_cl_xml_view. Let’s take a look at the above app and compare its UI5-View with its definition in abap2UI5:

UI5-View vs. abap2UI5-View
<Page title="Page title" >
	<f:SimpleForm title="Form Title">
		<f:content>
			<Title text="Input" />
			<Label text="quantity"/>
			<Input value="{/oUpdate/QUANTITY}"/>
			<Label text="product" />
			<Input value="tomato" />
			<Button press="onEvent" text="post"/>
		</f:content>
	</f:SimpleForm>
</Page>
view->page( title = 'Page title' )
        )->simple_form( 'Form Title'
          )->content( 'f'
             )->title( 'Input'
             )->label( 'quantity'
             )->input( client->_bind_edit( quantity )
             )->label( 'product'
             )->input( value = product editable = abap_false
             )->button( text = 'post'  press    = client->_event( 'BUTTON_POST' ) ).

This is just a simple example and in the following blog posts, we will expand its functionality to include tables, lists, selection screens, charts and more.

abap2UI5 Control Library

Here are all available UI5 controls you can use with the class z2ui5_cl_xml_view:

z2ui5_cl_xml_view

More controls will be added in the future – check out the source code. Additionally in part five of this series, other view creation approaches with increased flexibility will be explained.

Most UI5 controls are compatible with abap2UI5 without requiring any additional adjustments. For example, Inputs can be used since it only consists of attributes that can be directly sent back to the server. Controls that rely on additional JavaScript logic need to be modified to work with abap2UI5. They have to be encapsulated in a custom control first. We will see an example for this in part four of this blog series, where we will use a custom control for uploading and downloading files.

Controller

The interface z2ui5_if_app has the method ‘main’, which gives you control over the frontend UI5 app, similar to the JavaScript controller of a UI5 freestyle application. Therefore, they look very similar:

UI5-Controller vs. abap2UI5-Controller
sap.ui.controller("sap.ui.myApp.controller.one", {

	onInit: function() {
	},

	onBeforeRendering: function() {	 
	},

	onEvent: function() {
	},

	onAfterRendering: function() {	
	},

	onExit: function() {
	}	
});
  METHOD z2ui5_if_app~main.

    IF check_initialized = abap_false.
      check_initialized = abap_true.
      "set init values here...
    ENDIF.

    CASE client->get( )-event.
      WHEN 'POST'.
        "event handling here...
    ENDCASE.

    "view rendering here...
    client->view_display( z2ui5_cl_xml_view=>factory( cient
        )->shell( )->page(  )->simple_form( 'Title'

  ENDMETHOD.

Handling everything in a single method, without splitting the view and controller at this level, creates flexibility which enables each user to structure their apps in their preferred way. So, the method only serves as a foundational layer upon which users can encapsulate their logic in their own methods. For instance, one method for initialization, another for user commands, and so forth. Now, let’s take a look at how we can raise events at the frontend.

Events

The following events are available:

Event (User-Command)

view->( )->button( 
     text  = 'post' 
     press = client->_event( 'BUTTON_POST' ) ).
Usually it’s enough to just send a simple user-command back to the server — use the method _event

Event (Popup Close)

view->button(
     text  = 'close'
     press = client->_event_client( client->cs_event-popup_close ) ).
You can close a popup at the frontend with this event — we will take a more detailed look at popups in the third blog post of this series

If more event functions are necessary, the framework can be extended in the future.

Model (Data Binding)

When values need to be displayed in the frontend, define them as public attributes in your abap2UI5 app. These attributes will be bound by the framework, so it needs to have a chance to assign them from the outside. Additionally, if your values will also be updated in the frontend, make sure that they are not defined as read-only, otherwise, abap2UI5 will throw an error when attempting to modify them. There are three ways to bind data and sent it to the frontend:

Direct XML

view( )->label( 'product'
      )->input( value = product editable = abap_false ).
You can write the value into the attribute, abap2UI5 will then write it directly into the UI5-XML-View and sent it to the frontend.

One-Way-Binding

view->( )->label( 'product'
        )->input( value = _bind( product ) editable = abap_false ).
You can use one-way-binding, the values are then written into the view model and bound to the UI5-XML-View. This is useful for complex data models such as tables. We will see this in more detail in the next blog post.

Two-Way-Binding

view( )->label( 'quantity'
      )->input( value = view->_bind_edit( quantity ) editable = abap_true ).​
You can use two-way-binding, it is similar to one-way binding, but it also sends values from the frontend to the server. This binding mode is useful for inputs and editable tables.

When defining the view, consider the data transfer to the frontend. To keep the request payload small use one-way-binding by default and two-way-binding only when necessary, such as when values need to be updated from the frontend. Besides that, abap2UI5 takes care of the rest by transforming the data into JSON, sending it to the frontend, and bringing back the updated values, as we’ll see in the final blog post.

What’s next?

Now that you have a basic understanding of abap2UI5, take a look at the samples repository to see the possibilities of abap2UI5:

Samples%20of%20abap2UI5

Samples of abap2UI5

Summary

This was the first part of the introduction to abap2UI5. You now have an understanding of how to develop apps and its general functionality. While this post was quite technical, the upcoming parts of this blog series will showcase more demos & use cases and we will continuously add more features.

In the next blog post, we will develop abap2UI5 apps displaying tables and selection screens.

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

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

      Amazing!

      Author's profile photo Luis Frey
      Luis Frey

      Hi All.. nice Discussion?

      Why do they do that? Isnt it more easy to get JavaScript/TypeScript 😉 Developer, than SE80-ABAPers..

      Ore takes Chat GPT from here?

      Author's profile photo Shai Sinai
      Shai Sinai

      Well, to begin with, I don't see any Javascript developer writes logic in the ABAP backend.

      Author's profile photo Gabor Toldi
      Gabor Toldi

      There are several reasons  : One developer does all in a small application. Software creators can better use there ressources, there are better concepts than pure MVC, which is anyway broken with UI5. To support several UI Types, view shouldn't have to much logic..

      Author's profile photo Octav Onu
      Octav Onu

      Gabor Toldi Hi, would you like to explain this statement :"...MVC, which is anyway broken with UI5."

      Thanks

      Author's profile photo Paul Hardy
      Paul Hardy

      I am also interested into how UI5 breaks the MVC model. WDA did clearly,you could put business logic into the view if you wanted, the exact thing it was designed to get away from,  but with most UI5 applications the model is in ABAP< the controller is in JavaScript and the view is in XML. I cannot think of a better way of enforcing the separation of concerns than having each element in a different language,

      Presumably you think one of the MVC layers is doing more than one thing. Can you please elaborate?

      Author's profile photo Prasenjit Bist
      Prasenjit Bist

      Really metadata projections, cds views they enforce MVC. That was the last thing to hear may be it's time to run away from the insanity of SAP

      Author's profile photo Axel Mohnen
      Axel Mohnen

      Hi oblomov,

      Thanks a lot for that interesting blog series.

      One question: Is it possible to create a value help based on the binded field DDIC type?

      In you example I only see fixed value list.

      Thanks a lot.

      Kind regards

      Axel

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

      Hi Axel,

      thanks for reading this blog post!

      The fixed value list is only an example. You can also call a function module or read database tables to get the allowed input values. When you want to use the values of an DDIC value help, you have to read this manually with abap and then send it instead of the fixed values to the frontend (there is no build in function for this like dynpros or seelction-screens have).

      Regards

       

       

       

      Author's profile photo Axel Mohnen
      Axel Mohnen

      Hi Oblomov,

      thanks for the reply. I saw you new demo class "Z2UI5_CL_APP_DEMO_09" for the F4 custom popup. This was exactly what I was looking for!

      Another question:

      Are you able to run the ABAP2UI5 service embedded in the SAP Fiori Launchpad? I created a target mapping in the FLP customizing for external URL, but this runs the app in a separated window.

      Is there a way to run the app embedded in the FLP? Maybe having a generic SAPUI5 component with the ABAP2UI5 app ID.

      Thanks a lot.

      Kind regards

      Axel

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

      Hi Axel,

      I never really tried to embed abap2UI5 in the FLP, but so far i know you can only embed UI5 applications which base on a component container, because the FLP replaces the index.html.

      Due to the fact that abap2UI5 is based on a single onepage index.html file it should not be possible to embed it in FLP. You can only use it with a separated window. But if you find out something else, let me know! Till now I did not do a lot of research in this direction.

      Kind regards!

      Author's profile photo Axel Mohnen
      Axel Mohnen

      Hi Oblomov,

      I found a way to embedded the ABAP2UI5 into UI5 app.

      I created a simple SAPUI5 freestyle application based on the Fiori tools template.

      Just added the following pieces in the controller and view.

      Finally, I'm adding an "iFrame" on the fly to the XML View.

      We could build the wrapper even more generic by passing the ABAP2UI5 app id via FLP target mapping parameter.

      controller.js

      sap.ui.define([
      	"sap/ui/core/mvc/Controller",
      	"sap/ui/core/HTML"
      ], function (Controller, HTML) {
      	"use strict";
      
      	return Controller.extend("ZAMOH_ABAP2UI5_TEST.ZAMOH_ABAP2UI5_TEST.controller.View1", {
      		onInit: function () {
      		},
      
      		onAfterRendering: function () {
      			//Get apphandler
      			var oPage = this.getView().byId("page");
      			var sIFrameId = "iFrameId1";
      
      			var sUrl;
      			sUrl =
      			"/sap/bc/http/sap/zabap2ui5srv?sap-client=040&amp;app=ZCL_AMOH_ABAP2UI5_TEST_01";
      
      			//Set HTML "iFrame" content
      			var sContent =
      				'<iframe id="' + sIFrameId + '" height="98%" width="100%" frameborder="0" src="' + sUrl + '" ></iframe>';
      
      			//Create new HTML page
      			var oPageHtmliFrame = new HTML({
      				preferDOM: true,
      				content: sContent
      			});
      
      			//Add new iFrame to page
      			oPage.addContent(oPageHtmliFrame);
      		}
      	});
      });

       

      view.xml

      <mvc:View controllerName="ZAMOH_ABAP2UI5_TEST.ZAMOH_ABAP2UI5_TEST.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true"
      	xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml">
      	<Shell id="shell">
      		<App id="app">
      			<pages>
      				<Page id="page" showHeader="false">
      					<content>
      					</content>
      				</Page>
      			</pages>
      		</App>
      	</Shell>
      </mvc:View>
      Author's profile photo Oblomov Dev
      Oblomov Dev
      Blog Post Author

      Great work!

      I tried it and it works 🥳

      Launchpad%20Integration

      abap2UI5 Launchpad Integration

      Yes configuring the app via FLP target mapping and make it usable for different apps would be great extension. I am also not sure if the theme from the launchpad is used when you call it via iframe (have no on-premise system and can not test it at the moment).

      Thank you for your work!

      P.S.: This is a relevant topic for a lot of users so I created an issue, feel free to join if you are also on Github.

      Author's profile photo Aocheng Yang
      Aocheng Yang

      Having able to create visual charts really raised the value of this ABAP2UI5 project(blog part4). It's great alternative if you only have ABAP resource and required UI5 applications.

      Although there are more JavaScript developers out there, they can only create front-end and limited backend(with CAP model, but restricted to side-by-side extension) . The beauty of this ABAP2UI5 framework we cannot take for granted is that it works in all ABAP environment(on-prem, SteamPunk, Embedded SteamPunk), therefore suitable for both side-by-side in BTP and developer extensibility in S4 core.  So today, knowing ABAP alone will let you create full-stack UI5 applications, in all available ABAP stacks.

      Really admire your work and looking forward to more feature upgrades!

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

      Hello Aocheng Yang,

      Thank you for your comment! It's fun working with a plain HTTP handler and exploring what's possible with HTML, UI5 or htmx. I also discovered your blog post about this topic:

      https://blogs.sap.com/2022/04/08/exploring-web-app-development-with-abap-htmx-in-comparison-with-abap-rap/

      Great work!

      Best regards!

      Author's profile photo Kanumuri Jathin Varma
      Kanumuri Jathin Varma

      Hi,

      If we are using On premise SAP 750 system, how can we call the app through SICF? Do we need to add Handler class to /sap/bc node?

      Can anyone please explain. Basically I have installed Abap2ui5 but yet to figure out how to test the demos provided.. 

       

      Thanks

      Jathin

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

      Hi Jathin,

      yes after creating a new ICF node, you have to create a new http handler class. In the method if_http_extension~handle_request you can call abap2UI5. Check the installation guidelines in this blog post. You can also create an issue if you run into further problems.

      Best Regards.

      Author's profile photo feng yaowu
      feng yaowu

      Oblomov Dev

      Is it possible for SAP to install your Open Source as a default feature on SAP system? (on-premise  and Cloud).

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

      everyone is allowed to deliver open-source, so you have to talk with sap about this 😉

      Author's profile photo Prasenjit Bist
      Prasenjit Bist

      SAP fire your RAP team you know the team that allows low code cloud and mobile Fiori apps hire them.