...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 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

• 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

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

• 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 Cloud Developer Trial 2022 (hosted by Nuve Platform)

Thanks to everyone who submits PRs or enriches my knowledge in issues, comments, via Slack, or through other channels. This project greatly benefits from your support!

Take some time to explore the samples repository. This is the quickest way to become an abap2UI5 expert. 🤓

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 - Sep. 2023 (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 2024 (SCN - 08.01.2024)
    

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

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

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)

• Import & Export Excel files in pure ABAP with abap2xslt (twitter/xslt)
• Pimp up your apps with custom controls and external libraries (ext-cc)
• Rename the Namespace of abap2UI5 (abap2UI5-mirror)
• Discover other projects using abap2UI5 (abap2UI5/links)

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

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.

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.

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:

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:https://account' )
        ( title = 'row_02'  info = 'incompleted' descr = 'this is a description' icon = 'sap-icon:https://account' )
        ( title = 'row_03'  info = 'working'     descr = 'this is a description' icon = 'sap-icon:https://account' )
        ( title = 'row_04'  info = 'working'     descr = 'this is a description' icon = 'sap-icon:https://account' )
        ( title = 'row_05'  info = 'completed'   descr = 'this is a description' icon = 'sap-icon:https://account' )
        ( title = 'row_06'  info = 'completed'   descr = 'this is a description' icon = 'sap-icon:https://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