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 – MIME 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.
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 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:
Check out the source code – 116 lines pure ABAP
The SAP UI5 Library provides information about all controls, including their attributes and possible values:
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:
Check out the source code – 369 lines pure ABAP
A cl_salv_table flavored ABAP snippet:
Demo 3 – File Upload & Download
Check out the source code – 283 lines pure ABAP
|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:
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:
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:
Check out the source code – 140 lines pure ABAP
Change the following two values to activate 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:
Check out the source code – 191 lines pure ABAP
A lot of different Layouts are available in UI5, check out the Fiori UX Guidelines to know when to use which:
Demo 7 – Side Effects (Expression Binding)
Check out the source code – 151 lines pure ABAP
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:
Check out the source code – 900 lines pure ABAP
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:
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.
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.
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