Welcome to the first part of this blog series introducing abap2UI5 — an open-source project for developing UI5 apps purely in ABAP.
This first post offers an overview of the project. It highlights its features, presents demonstrations, and provides a step-by-step guide to the development process.
Blog Series & More
You can find all the information about this project on GitHub, stay up-to-date by following on Twitter and explore the other articles in this blog series:
- Introduction: Developing UI5 Apps Purely in ABAP (this blog post)
- Displaying Selection Screens & Tables
- Popups, F4-Help, Messages & Controller Logic
- Advanced Functionality & Demonstrations
- Creating UIs with XML Views, HTML, CSS & JavaScript
- Installation, Configuration & Troubleshooting
- Technical Background: Under the Hood of abap2UI5
- Repository Organization: Working with abapGit, abaplint & open-abap
- Update I: Community Feedback & New Features - Sep. 2023
- Extensions I: Exploring External Libraries & Native Device Capabilities
- Extensions II: Guideline for Developing New Features in JavaScript
- Update II: Community Feedback, New Features & Outlook - Jan. 2024
Content
This post covers the following areas:
- Project Information
- Features
- Demos
- Basic Example
- Development Process
- View
- Controller
- Event
- Model & Data Binding
- What's next?
- Conclusion
Let’s begin with the first topic.
1. Project Information
This project offers a pure ABAP approach for developing UI5 apps, entirely without JavaScript, OData and RAP — similar to the past, when only a few lines of ABAP sufficed to display input forms and tables using Selection Screens & ALVs. Designed with a minimal system footprint, it works in both on-premise and cloud environments.
1.1 Features, Compatibility & Installation
- 100% ABAP: Developing purely in ABAP (no JavaScript, DDL, EML or Customizing)
- User-Friendly: Implement just a single interface for a standalone UI5 application
- Minimal 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)
- Broad System Compatibility: Runs on all ABAP releases (from NW 7.02 to ABAP Cloud Stacks)
- Easy Installation: abapGit project, no additional app deployment required
Use abapGit for installation, pull the repository, create a new HTTP service and call abap2UI5. Detailed information can be found in part 6 of this series. This project 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 this downport repository
1.2 Demos
For an impression of the possibilities of abap2UI5, take a look at the demos presented in this blog series — everything is developed in pure ABAP:
 |  |
| Selection Screens (Blog 2) | Tables, Lists & Maintenance (Blog 2) |
 |  |
| Popups & F4-Helps (Blog 3) | File Editor, File Upload & Visualization (Blog 4) |
But first let's start with a basic example.
1.3 Basic Example
A simple abap2UI5 app with an input and a message output looks like this:
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA quantity TYPE string.
ENDCLASS.
CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
METHOD z2ui5_if_app~main.
CASE client->get( )-event.
WHEN 'BUTTON_POST'.
client->message_toast_display( |{ quantity } Product ABC - send to the server| ).
ENDCASE.
client->view_display( z2ui5_cl_xml_view=>factory(
)->page( 'abap2UI5 - Hello World App'
)->simple_form( )->content( ns = `form`
)->title( 'Input here and send it to the server...'
)->label( 'Product-ABC'
)->input( client->_bind_edit( quantity )
)->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:
abap2UI5 - Basic Example
Everything functions seamlessly out-of-the-box, offering bidirectional data transfer, event handling, and a user interface
2. Development Process
Let's walk through the development process step-by-step, beginning with the view, then progressing to the controller, and finally, we'll examine the model.
2.1 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. The view can be defined either directly as a string or crafted using the class z2ui5_cl_xml_view. Let's examine the app mentioned earlier and compare its UI5-View with its abap2UI5 counterpart:
| 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' ) ).
|
In abap2UI5, the XML-View is generated in ABAP and the class serves as a helper to simplify the creation of XML. However, ultimately, both approaches yield the same result, with the key difference being that in abap2UI5, the view is transmitted from the backend.
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 is a selection of available UI5 controls that you can utilize 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 and check also out part 11 to learn how to implement your own custom control in abap2UI5.
2.2 Controller
The interface z2ui5_if_app consists of the method 'main', which gives you control over the frontend UI5 app, similar to the JavaScript controller of a UI5 freestyle application. Consequently, they look 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(
)->shell( )->page( )->simple_form( 'Title'
"....
ENDMETHOD. |
The abap2UI5 framework redirects event handling from the frontend controller to the backend implementation of your class, granting you complete freedom in the backend to determine how to respond to specific frontend events.
A single 'main' method is used for this purpose (similar to what if_oo_adt_classrun does), without segregating the view and controller. This approach creates flexibility and enable the user to structure their apps according to their preferences. Therefore, this method acts merely as a foundational layer, on top of which users can build their own logic through distinct methods. For example, one might have a method for initialization, another for handling user commands, and so on.
Next, let's examine how events can be triggered on the frontend.
2.3 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.
2.4 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. |
Bind Local
view( )->label( 'product'
)->input( value = view->_bind_local( product ) ). |
| You can bind the values locally, which your can use for local variables which are not public attributes of your class. Their value is saved right at the moment. Use cases for example are tables with contents for value helps. |
One-Way-Binding
view->( )->label( 'product'
)->input( value = view->_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 part 7 of this series.
3. What's next?
Now you got a basic understanding of the functionality of this project. However, this was merely an overview. abap2UI5 is continuously evolving, and more blog posts are being written. If you wish to delve deeper into specific topics, explore the other blog posts next. Additionally, take a look to all the features of abap2UI5 by visiting the samples repository, which is also regularly updated with new features:
Samples of abap2UI5 (As of August 2023)
4. Conclusion
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 part, we will develop abap2UI5 apps displaying tables and selection screens.
Thank you for reading! Your questions, comments and wishes for this project are always welcome, leave a comment or create an issue.
- SAP Managed Tags:
26 Comments
