Repository files navigation

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

• 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 thedownport repository

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 – Jan. 2024(SCN - 08.01.2024)
    

• 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)
• Featured on SAP Developer News(youtube - 15.12.2023)
• Highlighted in the Boring Enterprise Nerdcast(youtube - 29.01.2024)

• Integrate your apps to SAP Fiori On-Premise Launchpad(ext-fiori_launchpad)
• Connect with SAP BTP & SAP Mobile Start(ext-btp)
• Pimp up your apps with custom controls and external libraries(ext-cc)
• Discover other projects using abap2UI5(abap2UI5/links)
• And don't forget to explore theSamples Repository 🧭

• Experiment with abap2UI5 compiled to JS on open-abap under Node.js(abap2UI5-web)
• Import & Export Excel files in pure ABAP with abap2xslt(twitter/xslt)
• Join the Advent of Code 2023 with abap2UI5(SCN - 27.11.2023)
• Running abap2UI5 backend in browser(LinkedIn - 02.04.2024)

• Thesecontributors continuously drive the evolution of this project forward
• Code versioning & distribution are managed viaabapGit(authors)
• Static code analysis and quality assurance are performed viaabaplint andopen-abap(larshp)
• JSON parsing for frontend-backend communication is implemented withajson(sbcgua)
• Serialization of variables created at runtime is implemented withS-RTTI(sandrarossi)
• Compatibility with lower releases is ensured through automatic syntax downport withabaplint(larshp)
• ABAP for Cloud & Standard ABAP compatibility in a single codeline is achieved withSteampuncification
• Live demos running in the browser are based onabap2UI5-web andweb-abap2ui5-samples(larshp)
• Included Frontend Frameworks:Animate.cssbwip-jsChart.jsDriver.jsFont AwesomeImageMapster
• The code is primarily developed on anABAP Developer Edition 7.52(hosted by Nuve Platform)
• Checks for compatibility with "ABAP for Cloud" are performed onBTP ABAP Trial(SAP)

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! 👷‍♂️

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

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

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

Implement the abap2UI5 interface as shown in the following example:

CLASSz2ui5_cl_app_hello_world DEFINITION PUBLIC.  PUBLIC SECTION.INTERFACES z2ui5_if_app.DATA quantity TYPE string.ENDCLASS.CLASSz2ui5_cl_app_hello_world IMPLEMENTATION.METHODz2ui5_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:

CLASSz2ui5_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 WITHEMPTY KEY.DATA check_initialized TYPE abap_bool.ENDCLASS.CLASSz2ui5_cl_demo_app IMPLEMENTATION.METHODZ2UI5_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_selWHERE 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 thedocumentation or find an answer in theFAQ
• Want to help out? Check out the contributionguidelines
• As always - your comments, questions, wishes and bug reports are welcome, please create anissue