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 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 Table Maintenance

Check out the source code here. A cl_salv_table flavored ABAP snippet:

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 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 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 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 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 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 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 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 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 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.