...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 in pure 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 2311)
• 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

Information (Blog Series)

1. Introduction: Developing UI5 Apps in Pure ABAP (SCN - 22.02.2023)
   
2. Displaying Selection Screens & Tables (SCN - 23.02.2023)
   
3. Popups, F4-Help, Messages & Controller Logic (SCN - 30.03.2023)
   
4. Advanced Functionality & Demonstrations (SCN - 02.04.2023)
   
5. Extensions with XML Views, HTML, JS & CC (SCN - 12.04.2023)
   
6. Installation, Configuration & Debugging (SCN - 14.04.2023)
   
7. Technical Background: Under the Hood of abap2UI5 (SCN - 26.04.2023)
   
8. Repository Setup with abapGit, abaplint & open-abap (SCN - 21.08.2023)
   
9. Community Feedback & New Features I (SCN - 11.09.2023)
   

References

• 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)

Apps & Extensions

• Integrate your apps to SAP Fiori On-Premise Launchpad (ext-fiori_launchpad)
• Connect with the SAP Business Technology Platform (ext-btp)
• Explore abap2UI5-tools, a collection of tools & utility functions (abap2UI5-tools)
• Enhance functionality with Custom Controls & External Libraries (custom controls)
• Discover other projects using abap2UI5 (abap2UI5/links)

More

• Experiment with abap2UI5 compiled to JS on open-abap under Node.js (abap2UI5-web)
• Install S-RTTI to create apps with dynamically typed tables (github/s-rtti)
• Import & Export Excel files in pure ABAP with abap2xslt (twitter/xslt)
• Analyse your Views & Models with this Codesandbox (abap2UI5-debug-tools)
• And finally, don't forget to explore the Samples Repository 🧭

Installation

Install with abapGit and set up a new HTTP service with the following handler:

Standard ABAP 🏠

METHOD if_http_extension~handle_request.

   DATA(lv_resp) = SWITCH #( server->request->get_method( )
      WHEN 'GET'  THEN z2ui5_cl_fw_http_handler=>http_get( )
      WHEN 'POST' THEN z2ui5_cl_fw_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 ☁️

METHOD if_http_service_extension~handle_request.

   DATA(lv_resp) = SWITCH #( request->get_method( )
      WHEN 'GET'  THEN z2ui5_cl_fw_http_handler=>http_get( )
      WHEN 'POST' THEN z2ui5_cl_fw_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:

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( client
      )->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.

FAQ

• Check out the documentation for more installation & configuration guidelines
• Still have open questions? 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