abap2ui5/abap2ui5-samples

Explore Code Samples of abap2UI5

🚀abap2UI5 is now on linkedIn, give it a follow and stay updated!🚀

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

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

Know-How

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

I. Introduction, 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 - 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)
    

II. SAP Fiori Launchpad Integration

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

III. SAP BTP Integration

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

IV. More

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

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 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 Developer Edition 7.52 (hosted by Nuve Platform)
• Checks for compatibility with "ABAP for Cloud" are performed on BTP 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! 👷‍♂️

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

ABAP for Cloud ☁️

show code...

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

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 { quantity }.| ).
    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'.
        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.

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