*...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.* #### Key Features * **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 #### Compatibility * 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](https://github.com/abap2UI5/abap2UI5-downport) #### Information (Blog Series) 1. Introduction: Developing UI5 Apps Purely in ABAP [(SCN - 22.02.2023)](https://blogs.sap.com/2023/02/22/abap2ui5-development-of-ui5-apps-in-pure-abap-1-3/)
2. Displaying Selection Screens & Tables [(SCN - 23.02.2023)](https://blogs.sap.com/2023/02/22/abap2ui5-output-of-lists-and-tables-toolbar-and-editable-2-3/)
3. Popups, F4-Help, Messages & Controller Logic [(SCN - 30.03.2023)](https://blogs.sap.com/2023/03/30/abap2ui5-3-4-flow-logic-pop-ups-f4-help/)
4. Advanced Functionality & Demonstrations [(SCN - 02.04.2023)](https://blogs.sap.com/2023/04/02/abap2ui5-4-5-additional-features-demos/)
5. Creating UIs with XML Views, HTML, CSS & JavaScript [(SCN - 12.04.2023)](https://blogs.sap.com/2023/04/12/abap2ui5-5-6-extensions-with-xml-views-html-js-custom-controls/)
6. Installation, Configuration & Troubleshooting [(SCN - 14.04.2023)](https://blogs.sap.com/2023/04/14/abap2ui5-6-7-installation-configuration-debugging/)
7. Technical Background: Under the Hood of abap2UI5 [(SCN - 26.04.2023)](https://blogs.sap.com/2023/04/26/abap2ui5-7-7-technical-background-under-the-hood-of-abap2ui5/)
8. Repository Organization: Working with abapGit, abaplint & open-abap [(SCN - 21.08.2023)](https://blogs.sap.com/2023/08/21/abap2ui5-a1-repository-setup-with-abapgit-abaplint-open-abap/)
9. Update I: Community Feedback & New Features - Sep. 2023 [(SCN - 11.09.2023)](https://blogs.sap.com/2023/09/11/abap2ui5-a2-community-feedback-new-features/)
10. Extensions I: Exploring External Libraries & Native Device Capabilities [(SCN - 04.12.2023)](https://blogs.sap.com/2023/12/04/abap2ui5-a3-extensions-i-exploring-external-libraries-native-device-capabilities/)
11. Extensions II: Guideline for Developing New Features in JavaScript [(SCN - 11.12.2023)](https://blogs.sap.com/2023/12/11/abap2ui5-a4-extensions-ii-guideline-for-developing-new-features-in-javascript/)
12. Update II: Community Feedback, New Features & Outlook – Jan. 2024 [(SCN - 08.01.2024)](https://blogs.sap.com/2024/01/08/abap2ui5-12-update-ii-community-feedback-new-features-outlook-january-2024/)
#### References * Find abap2UI5 on ABAP Open Source Projects [(dotabap.org)](https://dotabap.org/) * Featured on SAP Developer News [(youtube - 26.01.2023)](https://www.youtube.com/watch?v=6BDK55xYttM) * Highlighted in the Boring Enterprise Nerdletter [(newsletter - 08.03.2023)](https://boringenterprisenerds.substack.com/p/34-abap2ui5-sap-cva-burnout-c2c-shortwave) * Part of the SAP Developer Code Challenge [(SCN - 17.05.2023)](https://groups.community.sap.com/t5/application-development/sap-developer-code-challenge-open-source-abap-week-2/m-p/260727#M1372) * Showcased at SAP TechEd 2023 [(youtube - 02.11.2023)](https://www.youtube.com/watch?v=kLbF0ooStZs&t=3052s) * Featured on SAP Developer News [(youtube - 15.12.2023)](https://www.youtube.com/watch?v=CfH9L03WUCg&t=350s) #### Extensions & Apps * Integrate your apps to SAP Fiori On-Premise Launchpad [(ext-fiori_launchpad)](https://github.com/abap2UI5/ext-service_integration) * Connect with SAP BTP & SAP Mobile Start [(ext-btp)](https://github.com/abap2UI5/ext-business_technology_platform) * Pimp up your apps with custom controls and external libraries [(ext-cc)](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/docs/custom_controls.md) * Discover other projects using abap2UI5 [(abap2UI5/links)](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/links.md) #### More * Experiment with abap2UI5 compiled to JS on open-abap under Node.js [(abap2UI5-web)](https://twitter.com/LarsHvam/status/1648575595897405446) * Import & Export Excel files in pure ABAP with abap2xslt [(twitter/xslt)](https://twitter.com/abap2UI5/status/1703787345588162907) * Join the Advent of Code 2023 with abap2UI5 [(SCN - 27.11.2023)](https://blogs.sap.com/2023/11/27/preparing-for-advent-of-code-2023/) * And finally, don't forget to explore the [Samples Repository](https://github.com/abap2UI5/abap2UI5-samples) 🧭 #### Installation Install with [abapGit](https://abapgit.org) ![abapGit](https://docs.abapgit.org/img/favicon.png) and set up a new HTTP service with the following handler: ##### Standard ABAP 🏠 ```abap 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. ``` ##### ABAP for Cloud :cloud:
show code... ```abap 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. ```
#### Usage Implement the abap2UI5 interface as shown in the following example: ```abap 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... ```abap 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. ```
#### Credits * These [**Contributors**](https://github.com/abap2UI5/abap2UI5/graphs/contributors) continuously drive the evolution of this project forward * Code versioning & distribution are managed via [**abapGit**](https://abapgit.org/) [(authors)](https://abapgit.org/sponsor.html) * Static code analysis and quality assurance are performed via [**abaplint**](https://abaplint.org/) and [**open-abap**](https://github.com/open-abap) [(larshp)](https://github.com/larshp) * JSON parsing for frontend-backend communication is implemented with [**ajson**](https://github.com/sbcgua/ajson) [(sbcgua)](https://github.com/sbcgua) * Serialization of variables created at runtime is implemented with [**S-RTTI**](https://github.com/sandraros/S-RTTI) [(sandrarossi)](https://github.com/sandraros) * Compatibility with lower releases is ensured through automatic syntax downport with [**abaplint**](https://abaplint.org/) [(larshp)](https://github.com/larshp) * ABAP for Cloud & Standard ABAP compatibility in a single codeline is achieved with [**Steampuncification**](https://github.com/heliconialabs/steampunkification) * The code is primarily developed on an [**ABAP Developer Edition 7.52**](https://hub.docker.com/r/sapse/abap-platform-trial) [(hosted by Nuve Platform)](https://www.nuveplatform.com/) * Checks for compatibility with "ABAP for Cloud" are performed on [**BTP ABAP Trial**](https://discovery-center.cloud.sap/serviceCatalog/abap-environment?region=all) [(SAP)](https://www.sap.com/germany/index.html) _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!_ 👷‍♂️ #### FAQ * Still have open questions? Check out the [documentation](https://github.com/abap2UI5/abap2UI5-documentation/) or find an answer in the [FAQ](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/docs/faq.md) * Want to help out? Check out the contribution [guidelines](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/CONTRIBUTING.md) * As always - your comments, questions, wishes and bug reports are welcome, please create an [issue](https://github.com/abap2UI5/abap2UI5/issues)