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

Happy New Year, everyone! 🎆🎇

As we enter 2024, let’s take a moment to check out the new features added to abap2UI5 towards the end of last year and then delve into the ongoing changes currently underway. Some updates were in response to user issues, while others were inspired by community pull requests.

Blog Series & More

You can find all the information about this project on GitHub and stay up-to-date by following on Twitter. Also, make sure to explore the other articles in this blog series.

Content

This post covers the following areas:

1. New Controls
   1. Splitting Container
   2. Timeline
   3. Feed Input
   4. Side Panel
2. New Custom Controls
   1. cl_demo_output
   2. Multi Input Ext.
   3. Table Filtering Ext.
3. New Functions
   1. Nested Views with 3 Levels
   2. Data Binding on Cell Level
   3. Debugging Tools
4. Community Feedback
   1. TechEd
   2. Advent of Code
   3. Developer News
5. Actual Changes & Outlook
   1. Integration with Launchpad & BTP
   2. UI5 Version 2.x
   3. SAP UI5 Roadmap 2024

Let’s begin with the first topic.

1. New Controls

An increasing number of controls from the UI5 API are being integrated into abap2UI5 and can be utilized through the class z2ui5_cl_xml_view. A special thanks to choper725 and all others who have contributed PRs in this direction over the last few months.

1.1. Splitting Container

Organize your view using a Splitting Container; this control allows you to divide the view as needed and makes the sizes dynamically adjustable. Check out this demo:

Splitting Container in abap2UI5

You can find the full source code here.

1.2. Timeline

Visualize your time-dependent data with the Timeline Control. Check out the following example:

Timeline in abap2UI5

Filtering and sorting on the frontend work out-of-the-box. You can find the full source code here.

1.3. Feed Input

Display chat and message texts using the Feed Input. Check out this demo:

Feed Input in abap2UI5

You can find the full source code here.

1.4. Side Panel

Try out the Side Panel to display a menu alongside your main page:

Side Panel in abap2UI5

You can find the source code here.

2. New Custom Controls

Custom controls are an effective way to incorporate additional JavaScript logic into abap2UI5 and access it from the backend. You can find more information about this concept in the previous blog post here. The following new custom controls are now part of abap2UI5.

2.1 CL_DEMO_OUTPUT / IF_OO_ADT_CLASSRUN

Building on these two classes, numerous test programs have been created. If you also want to send their output to a browser, you can now do so with abap2UI5. A Demo Output Custom Control has been developed that sends the HTML output of cl_demo_output to the frontend. Check out this demo:

cl_demo_output Displayed in abap2UI5

Check out the full source code here. The same functionality works for the interface that creates output in ADT; check it out here.

2.2 Multi Input Extension

Sometimes, UI5 controls require additional JavaScript logic, because their current state cannot be easily transmitted to the backend through an event. This is particularly true for the Multi Input control, which involves additional token handling that is not automatically sent to the backend with the Multi Input Control’s events. To address this, an additional Multi Input Custom Control has been created to ensure that all tokens are sent to the backend, and vice versa. Check out this demo:

Multi Input & Token Handling in abap2UI5

You can find the source code here.

2.3 Table Filtering Extension

One advantage of the ui.table control is that many functionalities work at the frontend without the need for additional logic. For example, you can use filtering. Unfortunately, when making a backend request and performing a model update, these filters are deleted. To address this, a small Table Custom Control has been added which enhances the filter functionality. It saves the current filter values and reapplies them after a model update. Check out this demo:

Table with Filtered Values After Model Updates in abap2UI5

You can find the source code here.

3. New Functions

From time to time, the abap2UI5 framework itself requires extensions. The following new features have made their way into abap2UI5 over the last few months:

3.1 Nested Views with 3 Levels

Nested views offer a way to partially rerender specific parts of the view. It is now possible to use up to two nested views and for example combine them for displaying positions and item details. Check out this demo:

Nested Views with 3 Levels in abap2UI5

You can find the source code here.

3.2 Binding on Cell Level

Previously, it was only possible to bind the value of variables, components of structures, and tables to attributes of the view. Now, you can also bind values to specific cells of internal tables. This is especially helpful, for example, in generating multiple input fields based on table entries. To achieve this, simply extend the _bind method with the table and the index of your row:

LOOP AT t_tab REFERENCE INTO DATA(lr_row).
   DATA(lv_tabix) = sy-tabix.
   page->input( value = client->_bind_edit( val = lr_row->title tab = t_tab tab_index = lv_tabix ) ).
   page->input( value = client->_bind_edit( val = lr_row->value tab = t_tab tab_index = lv_tabix ) ).
ENDLOOP.

This code snippet generates an input control for each cell within the internal table. Here’s the code in action:

Data Binding on Cell Level in abap2UI5

You can find the full example here.

3.3 Debugger Tools

The only way to validate the XML View, Models, and Responses was by using the console. Now, by pressing CTRL+F12, a new popup opens, providing all information on Views, Models, and backend communication.

Debugging Tools of abap2UI5

This simplifies issue identification, and further functionalities can be integrated into this popup in the future.

4. Community Feedback

It’s always gratifying to see the project gaining attention from other developers, being utilized in various projects, or featured in presentations. From this perspective, abap2UI5 enjoyed a very successful conclusion to last year. 🎉

4.1 SAP TechEd

The SAP Developer Advocates highlighted ABAP Open Source projects and showcased a small abap2UI5 demo with a Feed Control during last year’s SAP TechEd Developer Keynote.

This achievement wouldn’t have been possible without the great abapGit project, which is essential for open source development in ABAP. I hope I’ve emphasized enough in this blog series how much abap2UI5 benefits from the contributions of other developers & open source projects. Much of this groundwork was done even before abap2UI5 existed. A big thank you for the showcase and to all developers who are actively engaged in the ABAP Open Source Community! 🙏

4.2 Advent of Code

This year, in the Advent of Code, Jörgen Lindqvist gave abap2UI5 a try. He created an excellent template for solving the daily puzzles, which you can view in his blog post. The template is available on GitHub here, and his solution can be seen here.

Actually this inspired me to join the Advent of Code as well, but instead of solving puzzles, I ended up adding a new feature – cell binding – to abap2UI5, filling a missing aspect of the framework, as I found in his repository here. But perhaps I’ll return to it one day or use this template to join again next year. 🧑‍🎄

Advent of Code with abap2UI5

4.3. SAP Developer News

This blog series concluded last year with a final post on extending abap2UI5 with new features using custom controls. A big thank you for featuring this article in the Developer News! Let’s see which additional custom controls will find their way into abap2UI5 in 2024!

5. Actual Changes & 2024

Currently, most changes are being made with a focus on ensuring compatibility with upcoming updates of the UI5 library and enabling the integration of abap2UI5 with launchpads and BTP Cloud Services.

5.1. Launchpad & BTP Integration

abap2UI5 is designed for simplicity, operating on a single HTTP handler. This design allows easy installation on both ‘ABAP Cloud’ and ‘Standard ABAP’. However, sometimes it’s useful to have an independent UI5 app that isn’t tied to the ABAP artifacts, making it deployable to BTP or other services. To address this, you have now also the option to use a standalone UI5 app which interacts with the backend via the HTTP handler, displaying abap2UI5 apps:

abap2UI5 Extension – BTP Proxy App

There is still some work to do, but if you’re interested in beta testing, please explore this project and report any issues encountered. Upon completion of testing, I might take this opportunity to explore the new SCN blog platform and write a detailed article on this topic.

This integration approach is also applicable for the integration with on-premise launchpads. The following repository offers an UI5 app as a BSP, ensuring a straightforward installation with abapGit:

abap2UI5 Extension – On-Premise Launchpad

Feel free to explore this repository as well and report any encountered issues.

5.2 UI5 Version 2.x

Another current focus is ensuring compatibility with future improvements of the UI5 Library. Towards the end of last year, the initial version of UI5 2.x was released. For more information, refer to this blog post:

https://blogs.sap.com/2023/12/21/introducing-openui5-2.x/

This new version removes certain dependencies, resulting in limitations on using specific UI5 features. For example, module loading is now constrained, and the use of UI5’s jQuery is no longer supported. You can conduct tests by bootstrapping from the following source:

https://sdk.openui5.org/nightly/2/index.html

Changes have already been implemented in recent weeks, allowing abap2UI5 to operate with the new UI5 version:

abap2UI5 Bootstrapped with UI5 Version 2.x

In some custom controls and demos, there are still some changes to be made, but these will be addressed in the future. I also suggest periodically bootstrapping with UI5 2.x to ensure proper functionality of your apps. Should you encounter any problems, please create an issue for assistance.

5.3 UI5 Roadmap 2024

Moreover, several new functionalities for the UI5 Library are currently under development. You can find more details about them in the UI5 roadmap available here:

https://roadmaps.sap.com/board?PRODUCT=73554900100800001361

It will be exciting to see how many of these changes can also be integrated into abap2UI5.

6. Conclusion

This concludes the update on abap2UI5 functionalities. Feel free to experiment with the new features in your own abap2UI5 apps. This project is continuously evolving without a fixed roadmap or specific goal. Every pull request is appreciated, and now I’m eagerly looking forward to what 2024 will bring to the project. 🙂

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