abap2UI5 - (4) Advanced Functionality & Demonstrations

[oblomov]

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

In this post, we will explore various demos, including File Editor, Table Maintenance, and Charts, among others. These demos aim to showcase the diverse use cases and features of abap2UI5.

Blog Series & More

You can find all the information about this project on GitHub, stay up-to-date by following on Twitter and be sure to explore the other articles of this blog series:

(1) Introduction: Developing UI5 Apps Purely in ABAP

(2) Displaying Selection Screens & Tables

(3) Popups, F4-Help, Messages & Controller Logic

(4) Advanced Functionality & Demonstrations (this blog post)

(5) Creating UIs with XML Views, HTML, CSS & JavaScript

(6) Installation, Configuration & Troubleshooting

(7) Technical Background: Under the Hood of abap2UI5

(8) Repository Organization: Working with abapGit, abaplint & open-abap

(9) Update I: Community Feedback & New Features - Sep. 2023

(10) Extensions I: Exploring External Libraries & Native Device Capabilities

(11) Extensions II: Guideline for Developing New Features in JavaScript

(12) Update II: Community Feedback, New Features & Outlook - Jan. 2024

Content

While we've already explored classic scenarios like selection screens and table outputs, the UI5 Library also enables the development of abap2UI5 applications for a broad range of additional use cases. This post covers the following areas:

1. File Editor


2. Table Maintenance


3. File Upload & Download


4. Visualization with Charts


5. Monitoring & Timer


6. Layouts


7. Side Effects


8. List Report


9. Conclusion

Let's begin with the file editor.

1. Demo - 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 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 File Editor

Check out the source code here.

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

Available Code Types for Syntax Highlighting of the Editor Control

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

Access the source code here. A cl_salv_table flavored ABAP snippet:

Dynamic Column Definition with RTTS

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

Learn more about how to develop custom control in part 11 here.

4. Demo - 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 abap2UI5

5. Demo - Monitoring & 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.

Set the following control in the view definition to active the timer:

DATA(lo_view) = z2ui5_cl_xml_view=>factory( ).

lo_view->_z2ui5( )->timer( 

      finished = client->_event( `TIMER_FINISHED` ) 

      delayms = `2000` 

      checkrepeat = abap_true ).

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

7. Demo - 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 render again 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 😅

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

9. Conclusion

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 part, we will explore different ways of creating UIs and enhancing them with HTML, CSS, JavaScript and third-party libraries.

Thank you for reading! Your questions, comments and wishes for this project are always welcome, create an issue or leave a comment.