...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 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 Cloud)
• Easy Installation: abapGit project, no additional app deployment required

Compatibility

• BTP ABAP Environment (ABAP for Cloud)
• S/4 Public Cloud (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 downported repositories

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)
• Join the Advent of Code 2023 with abap2UI5 (SCN - 27.11.2023)
• Featured on SAP Developer News (youtube - 15.12.2023)
• Highlighted in the Boring Enterprise Nerdcast (youtube - 29.01.2024)
• Running abap2UI5 Backend in Browser (LinkedIn - 02.04.2024)
• Check out Cust&Code Videos with abap2UI5 (youtube - 20.05.2024)
• Featured on SAP Developer News (youtube - 14.06.2024)

Credits

• 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 handling for frontend-backend communication is implemented with ajson (sbcgua)
• Serialization of values 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 Cloud Developer Trial 2022 (hosted by Nuve Platform)

A big thank you to everyone who submits PRs, shares knowledge in issues, comments, via Slack, or through other channels. This project thrives on your support!

What's next?

Check out...
🎓 Sample Repository - Learn how to code with abap2UI5
💅 Addons - Extend abap2UI5’s functionality
🪐 Connectors - Access your apps from anywhere
🚜 Apps - Discover & try out abap2UI5 apps
📺 More - Explore other projects using abap2UI5

Blogs & Articles

I. Development & Technical Background

1. Introduction: Developing UI5 Apps Purely in 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. Creating UIs with XML Views, HTML, CSS & JavaScript (SCN - 12.04.2023)
   
6. Installation, Configuration & Troubleshooting (SCN - 14.04.2023)
   
7. Technical Background: Under the Hood of abap2UI5 (SCN - 26.04.2023)
   
8. Repository Organization: Working with abapGit, abaplint & open-abap (SCN - 21.08.2023)
   
9. Update I: Community Feedback & New Features (SCN - 11.09.2023)
   
10. Extensions I: Exploring External Libraries & Native Device Capabilities (SCN - 04.12.2023)
    
11. Extensions II: Guideline for Developing New Features in JavaScript (SCN - 11.12.2023)
    
12. Update II: Community Feedback, New Features & Outlook (SCN - 08.01.2024)
    

II. On-Stack & Side-By-Side Extensibility

1. Overview & Use Cases (LinkedIn - 04.08.2024)
2. Running abap2UI5 on older R/3 Releases (LinkedIn - 14.07.2024)
3. Calling Apps Remotely via RFC (LinkedIn - 25.06.2024)

III. SAP Fiori Launchpad Integration

1. Installation & Configration (LinkedIn - 03.06.2024)
   
2. Setup Title, Parameters & Navigation (LinkedIn - 06.06.2024)
   
3. Integration of KPIs (LinkedIn - 07.06.2024)
   

IV. SAP BTP Integration

1. Installation & Configuration (LinkedIn - 09.06.2024)
   
2. Setup SAP Build Workzone Websites (LinkedIn - 16.06.2024)
3. Setup SAP Mobile Start (LinkedIn - 17.06.2024)

Installation

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

Standard ABAP 🏠

METHOD if_http_extension~handle_request.

   server->response->set_cdata( z2ui5_cl_http_handler=>main( server->request->get_cdata( ) ) ).
   server->response->set_header_field( name = `cache-control` value = `no-cache` ).
   server->response->set_status( code = 200 reason = `success` ).

ENDMETHOD.

ABAP for Cloud ☁️

show code...

METHOD if_http_service_extension~handle_request.

   response->set_text( z2ui5_cl_http_handler=>main( request->get_text( ) ) ).
   response->set_header_field( i_name = `cache-control` i_value = `no-cache` ).
   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 name TYPE string.

ENDCLASS.

CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    CASE client->get( )-event.
      WHEN 'POST'.
        client->message_toast_display( |Your name is { name }.| ).
    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( 'What is your name?'
            )->input( client->_bind_edit( name )
            )->button( text = 'post' press = client->_event( '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'.
        client->message_box_display( `item pressed with title ` && t_tab[ selected = abap_true ]-title ).

      WHEN 'BACK'.
        client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ).
    ENDCASE.

  ENDMETHOD.
ENDCLASS.

FAQ

• 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