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 four demos – MIME Editor, Table Maintenance, File Upload/Download, Charts – to see different 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

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

Demo 1 – MIME Editor

The MIME 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 – 116 lines pure ABAP

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 – 369 lines pure ABAP

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 – 171 lines pure ABAP

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

The last 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 – 392 lines pure ABAP

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

Summary

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

In the final blog post, we will focus on the technical background of this framework by covering topics such as compatibility, downporting and its code line.

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.