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

abap2UI5 – (4/7) Advanced Functionality & Demonstrations

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

This post explains the functionality of different demos – File Editor, Table Maintenance, File Upload/Download, Charts, Timer, Layouts, Side Effects, List Report – to see various use cases and features of 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 (this blog post)
(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

While we have to this point explored classic scenarios like selection screens and table outputs, the UI5 Control Library also enables us to develop abap2UI5 applications for a wide range of other use cases. Let’s start with a file editor.

Demo 1 – File Editor

The File Editor uses the Code Editor Control. It displays text files and highlights the syntax for a lot of different code types (xml, json, js, abap, yaml…). This functionality is a part of UI5 and works seamlessly, requiring no extra effort. We simply need to fill in the attributes of the editor control in the rendering method. For the editor content, we use two-way binding to retrieve the updated frontend values and we call function modules to read and update the MIME repository. Here’s a preview of the demo app in action:

Demo%20MIME%20Editor

Demo MIME Editor

Check out the source code here.

The SAP UI5 Library provides information about all controls, including their attributes and possible values:

Available Code Types for Syntax Highlighting of the Editor Control

Demo 2 – Table Maintenance

Combining the Editor Control with an editable Table Control, as explained in the second blog post, enables us to create an abap2UI5 table maintenance app. This app provides three input formats (XML, JSON, CSV) and converts the data into an internal table to edit it with the Table Control. Once the data is modified, it exports it again with the Editor Control. This example is easily adaptable to other tables by simply changing the table type in ABAP. The transfer of data between the server and client is generic and independent of DDIC artifacts or HTTP interfaces, making it applicable for a lot of different use cases:

Demo%20Table%20Maintenance

Demo Table Maintenance

Check out the source code here. A cl_salv_table flavored ABAP snippet:Generic%20Table%20Output%20with%20RTTS

Dynamic Column Definition with RTTS

Demo 3 – File Upload & Download

Selecting files from the frontend via the browser and uploading & downloading PDFs, images, ZIPs, or other files is a common requirement. The JavaScript ‘FileReader’ provides this functionality, but there is no UI5 control for that. Therefore, abap2UI5 has a little custom control ‘zz_file_uploader’ which encapsulates this functionality. This control allows us to use the ‘FileReader’ like any other abap2UI5 control via its attributes in the renderer method. This approach also offers the possibility to include further JavaScript functions in abap2UI5 in the future. Here’s what the demo app looks like:

Demo%20File%20Upload/Download

Demo File Upload/Download

Check out the source code here.

Some snippets of how you can wrap JavaScript functions for the use in abap2UI5:

Custom Control Interface Custom Control Implementation
ABAP Interface ABAP Implementation

Demo 4 – Visualization with Charts

This demo tries to be a bit more beautiful. Tables aren’t always the best way to visualize data, so with abap2UI5 we can also use the Donut Chart, Bar Chart, Line Chart or Radial Micro Chart. By implementing event handlers, we can enhance interactivity and respond to clicks on specific chart points:

Demo%20Visualization

Demo Visualization

Check out the source code here.

This ABAP snippet may seem more complex, but achieving the same result using an UI5-XML-View would require equivalent effort:

Rendering%20Donut%20Chart%20in%20ABAP

Rendering Donut Charts in ABAP

Demo 5 – Monitoring and Timer

Next, we will combine the visualization functionality with a timer. The abap2UI5 timer has the similar functionality to the former cl_gui_timer. You can set an interval and an event that is called after the timer finishes. This allows us to create apps that visualize certain data and refresh themselves every few seconds:

Self-Refreshing Monitor

Check out the source code here.

Change the following two values to activate the timer:

Activation of the Timer

Demo 6 – Layouts

The object page is a useful way to display information for business objects. It is composed of a header and content, which are divided into sections and subsections. Navigation is a built-in functionality of the UI5 control, so it works out of the box:

Object%20Page%20Layout%20with%20abap2UI5

Object Page Layout with abap2UI5

Check out the source code here and here.

A lot of different Layouts are available in UI5, check out the Fiori UX Guidelines to know when to use which:

Fiori%20Design%20Guidelines

Fiori Design Guidelines

Demo 7 – Side Effects (Expression Binding)

This demo demonstrates side effects. You can use the _bind function with JavaScript functions to create an expression binding. This enables attributes of different controls to affect each other. For example, you can activate a button only when an input is made. This allows for small checks to be done directly at the frontend without needing a server roundtrip or a rerendering of the entire view. The demo looks like this:

Expression%20Binding%20in%20abap2UI5

Expression Binding in abap2UI5

Check out the source code here.

There are many different expressions available, check out the documentation. When ABAP is combined with JavaScript in an expression, it looks like this:

ABAP%20and%20JavaScript%20defining%20an%20UI5%20Expression%20Binding

ABAP and JavaScript in an Expression Binding

But watch out not to send too many calculations to the frontend, you might make HANA jealous 😉

Demo 8 – List Report

This final example demonstrates the use case of a list report. The first view displays a table, and you can navigate to the detail page by clicking on an entry. All basic functionalities, such as filtering, sorting, searching, and layout handling, have been implemented. You can also modify table settings, such as visible columns, titles, or selection mode:

List%20Report%20in%20abap2UI5

List Report in abap2UI5

Check out the source code here.

This example demonstrates that you can create apps with abap2UI5, which are similar to Fiori Elements floorplans. However, in this situation, you should consider whether it might be better to use RAP directly instead of developing everything manually in abap2UI5. You can check out the floorplans here:

Fiori%20Elements%20Floorplans

Fiori Elements Floorplans

Summary

This marks the end of part four of this introduction to abap2UI5. We explored several demos to gain a better understanding of the various use cases and features of abap2UI5.

In the next blog post, we see different ways of creating views and enhancing them with Custom Controls, HTML, CSS, JavaScript and third-party libraries.

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

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Marc Bernard
      Marc Bernard

      The speed of your development is blowing my mind. Code editor, file uploads, charts? And all of it with minimal amount of ABAP code. #Magic