...offers a pure ABAP approach for developing UI5 apps, entirely without JavaScript, OData and RAP — similar to the past, when only a few lines of ABAP sufficed to display input forms and tables using Selection Screens & ALVs. Designed with a minimal system footprint, it works in both on-premise and cloud environments.
- 100% ABAP: Developing purely in ABAP (no JavaScript, DDL, EML or Customizing)
- User-Friendly: Implement just a single interface for a standalone UI5 application
- Minimal System Footprint: Based on a plain HTTP handler (no BSP, OData, CDS, BOPF or RAP)
- Cloud and On-Premise Ready: Works with both language versions (ABAP for Cloud, Standard ABAP)
- Broad System Compatibility: Runs on all ABAP releases (from NW 7.02 to ABAP 2402)
- Easy Installation: abapGit project, no additional app deployment required
- BTP ABAP Environment (ABAP for Cloud)
- S/4 Public Cloud ABAP Environment (ABAP for Cloud)
- S/4 Private Cloud or On-Premise (ABAP for Cloud, Standard ABAP)
- R/3 NetWeaver AS ABAP 7.50 or higher (Standard ABAP)
- R/3 NetWeaver AS ABAP 7.02 to 7.42 - use the downport repository
- Introduction: Developing UI5 Apps Purely in ABAP (SCN - 22.02.2023)
- Displaying Selection Screens & Tables (SCN - 23.02.2023)
- Popups, F4-Help, Messages & Controller Logic (SCN - 30.03.2023)
- Advanced Functionality & Demonstrations (SCN - 02.04.2023)
- Creating UIs with XML Views, HTML, CSS & JavaScript (SCN - 12.04.2023)
- Installation, Configuration & Troubleshooting (SCN - 14.04.2023)
- Technical Background: Under the Hood of abap2UI5 (SCN - 26.04.2023)
- Repository Organization: Working with abapGit, abaplint & open-abap (SCN - 21.08.2023)
- Update I: Community Feedback & New Features - Sep. 2023 (SCN - 11.09.2023)
- Extensions I: Exploring External Libraries & Native Device Capabilities (SCN - 04.12.2023)
- Extensions II: Guideline for Developing New Features in JavaScript (SCN - 11.12.2023)
- Update II: Community Feedback, New Features & Outlook – Jan. 2024 (SCN - 08.01.2024)
- Find abap2UI5 on ABAP Open Source Projects (dotabap.org)
- Featured on SAP Developer News (youtube - 26.01.2023)
- Highlighted in the Boring Enterprise Nerdletter (newsletter - 08.03.2023)
- Part of the SAP Developer Code Challenge (SCN - 17.05.2023)
- Showcased at SAP TechEd 2023 (youtube - 02.11.2023)
- Featured on SAP Developer News (youtube - 15.12.2023)
- Highlighted in the Boring Enterprise Nerdcast (youtube - 29.01.2024)
- Integrate your apps to SAP Fiori On-Premise Launchpad (ext-fiori_launchpad)
- Connect with SAP BTP & SAP Mobile Start (ext-btp)
- Pimp up your apps with custom controls and external libraries (ext-cc)
- Discover other projects using abap2UI5 (abap2UI5/links)
- And don't forget to explore the Samples Repository 🧭
- Experiment with abap2UI5 compiled to JS on open-abap under Node.js (abap2UI5-web)
- Import & Export Excel files in pure ABAP with abap2xslt (twitter/xslt)
- Join the Advent of Code 2023 with abap2UI5 (SCN - 27.11.2023)
- Running abap2UI5 backend in browser (LinkedIn - 02.04.2024)
- Rename the Namespace of abap2UI5 (abap2UI5-mirror)
- These contributors continuously drive the evolution of this project forward
- Code versioning & distribution are managed via abapGit (authors)
- Static code analysis and quality assurance are performed via abaplint and open-abap (larshp)
- JSON parsing for frontend-backend communication is implemented with ajson (sbcgua)
- Serialization of variables created at runtime is implemented with S-RTTI (sandrarossi)
- Compatibility with lower releases is ensured through automatic syntax downport with abaplint (larshp)
- ABAP for Cloud & Standard ABAP compatibility in a single codeline is achieved with Steampuncification
- Live demos running in the browser are based on abap2UI5-web and web-abap2ui5-samples (larshp)
- Included Frontend Frameworks: Animate.css bwip-js Chart.js Driver.js Font Awesome ImageMapster
- The code is primarily developed on an ABAP Developer Edition 7.52 (hosted by Nuve Platform)
- Checks for compatibility with "ABAP for Cloud" are performed on BTP ABAP Trial (SAP)
Thanks to everyone who submits PRs or enriches my knowledge in issues, via Slack, or through other channels. This project greatly benefits from your support, making it a joy to work on! 👷♂️
Install with abapGit 
METHOD if_http_extension~handle_request.
DATA(lv_resp) = SWITCH #( server->request->get_method( )
WHEN 'GET' THEN z2ui5_cl_http_handler=>http_get( )
WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( server->request->get_cdata( ) ) ).
server->response->set_header_field( name = `cache-control` value = `no-cache` ).
server->response->set_cdata( lv_resp ).
server->response->set_status( code = 200 reason = `success` ).
ENDMETHOD.show code...
METHOD if_http_service_extension~handle_request.
DATA(lv_resp) = SWITCH #( request->get_method( )
WHEN 'GET' THEN z2ui5_cl_http_handler=>http_get( )
WHEN 'POST' THEN z2ui5_cl_http_handler=>http_post( request->get_text( ) ) ).
response->set_header_field( i_name = `cache-control` i_value = `no-cache` ).
response->set_text( lv_resp ).
response->set_status( 200 ).
ENDMETHOD.Implement the abap2UI5 interface as shown in the following example:
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA quantity TYPE string.
ENDCLASS.
CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
METHOD z2ui5_if_app~main.
CASE client->get( )-event.
WHEN 'BUTTON_POST'.
client->message_toast_display( |{ quantity } Product ABC - send to the server| ).
ENDCASE.
client->view_display( z2ui5_cl_xml_view=>factory(
)->page( 'abap2UI5 - Hello World App'
)->simple_form( )->content( ns = `form`
)->title( 'Input here and send it to the server...'
)->label( 'Product-ABC'
)->input( client->_bind_edit( quantity )
)->button( text = 'post' press = client->_event( 'BUTTON_POST' )
)->stringify( ) ).
ENDMETHOD.
ENDCLASS.Or check out this bigger example with tables and events:
show code...
CLASS z2ui5_cl_demo_app DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES Z2UI5_if_app.
TYPES:
BEGIN OF ty_row,
title TYPE string,
value TYPE string,
descr TYPE string,
icon TYPE string,
info TYPE string,
selected TYPE abap_bool,
checkbox TYPE abap_bool,
END OF ty_row.
DATA t_tab TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY.
DATA check_initialized TYPE abap_bool.
ENDCLASS.
CLASS z2ui5_cl_demo_app IMPLEMENTATION.
METHOD Z2UI5_if_app~main.
IF check_initialized = abap_false.
check_initialized = abap_true.
t_tab = VALUE #(
( title = 'row_01' info = 'completed' descr = 'this is a description' icon = 'sap-icon://account' )
( title = 'row_02' info = 'incompleted' descr = 'this is a description' icon = 'sap-icon://account' )
( title = 'row_03' info = 'working' descr = 'this is a description' icon = 'sap-icon://account' )
( title = 'row_04' info = 'working' descr = 'this is a description' icon = 'sap-icon://account' )
( title = 'row_05' info = 'completed' descr = 'this is a description' icon = 'sap-icon://account' )
( title = 'row_06' info = 'completed' descr = 'this is a description' icon = 'sap-icon://account' )
).
DATA(view) = z2ui5_cl_xml_view=>factory( ).
DATA(page) = view->shell(
)->page(
title = 'abap2UI5 - List'
navbuttonpress = client->_event( 'BACK' )
shownavbutton = abap_true
)->header_content(
)->link(
text = 'Source_Code' target = '_blank'
href = z2ui5_cl_demo_utility=>factory( client )->app_get_url_source_code( )
)->get_parent( ).
page->list(
headertext = 'List Ouput'
items = client->_bind_edit( t_tab )
mode = `SingleSelectMaster`
selectionchange = client->_event( 'SELCHANGE' )
)->standard_list_item(
title = '{TITLE}'
description = '{DESCR}'
icon = '{ICON}'
info = '{INFO}'
press = client->_event( 'TEST' )
selected = `{SELECTED}`
).
client->view_display( view->stringify( ) ).
ENDIF.
CASE client->get( )-event.
WHEN 'SELCHANGE'.
DATA(lt_sel) = t_tab.
DELETE lt_sel WHERE selected = abap_false.
client->message_box_display( `go to details for item ` && lt_sel[ 1 ]-title ).
WHEN 'BACK'.
client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ).
ENDCASE.
ENDMETHOD.
ENDCLASS.- Still have open questions? Check out the documentation or find an answer in the FAQ
- Want to help out? Check out the contribution guidelines
- As always - your comments, questions, wishes and bug reports are welcome, please create an issue
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent