abap2UI5

Developing UI5 Apps in pure ABAP - follow this project on twitter to keep up to date and don't forget to explore the demo repository.

Features

easy to use – implement just one interface for a standalone UI5 application
pure ABAP – development using 100% ABAP (no JavaScript, DDL, EML or Customizing)
low 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)
high system compatibility – runs on all ABAP releases (from NW 7.02 to ABAP 2305)
easy installation – abapGit project, no additional app deployment needed

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)

Introduction: Developing UI5 Apps in pure ABAP (Blog SCN - 22.02.2023)
Displaying Selection Screens & Tables (Blog SCN - 23.02.2023)
Popups, F4-Help, Messages & Controller Logic (Blog SCN - 30.03.2023)
Advanced Functionality & Demonstrations (Blog SCN - 02.04.2023)
Extensions with XML Views, HTML, JS & CC (Blog SCN - 12.04.2023)
Installation, Configuration & Debugging (Blog SCN - 14.04.2023)
Technical Background: Under the Hood of abap2UI5 (Blog SCN - 26.04.2023)

Find abap2UI5 in the ABAP Open Source Projects (dotabap.org)
Static Analysis & Continuous Integration with abaplint (abaplint.app/abap2UI5)
Part of the SAP Developer Code Challenge (scn - 17.05.2023)
Try abap2UI5 transpiled to JS running on open-abap under nodejs (twitter - 19.04.2023)
Featured in the Boring Enterprise Nerdletter (newsletter - 08.03.2023)
Featured in the SAP Developer News (youtube - 26.01.2023)
Development of UI5 Selection Screens in pure ABAP (former version) (scn - 22.01.2023)

Demo

Installation

Install with abapGit, create a new HTTP service and call abap2UI5. For more information, check out this documentation.

ABAP for Cloud:

METHOD if_http_service_extension~handle_request.

   z2ui5_cl_http_handler=>client = VALUE #(
      t_header = request->get_header_fields( )
      t_param  = request->get_form_fields( )
      body     = request->get_text( ) ).

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

   response->set_status( 200 )->set_text( lv_resp ).

ENDMETHOD.

Standard ABAP:

METHOD if_http_extension~handle_request.

   DATA lt_header TYPE tihttpnvp.
   server->request->get_header_fields( CHANGING fields = lt_header ).

   DATA lt_param TYPE tihttpnvp.
   server->request->get_form_fields( CHANGING fields = lt_param ).

   z2ui5_cl_http_handler=>client = VALUE #(
      t_header = lt_header
      t_param  = lt_param
      body     = server->request->get_cdata( ) ).

   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->response->set_cdata( lv_resp ).
   server->response->set_status( code = 200 reason = 'success' ).

ENDMETHOD.

FAQ

read these instructions when you develop your first app
want to configure the theme, bootstrapping, language and title? see configuration & debugging
as always - your comments, questions, wishes and bugs are welcome, please create an issue

oblomov-dev/abap2UI5