mirror of
https://github.com/abap2UI5/abap2UI5.git
synced 2025-04-30 05:26:11 +08:00
230 lines
12 KiB
Markdown
230 lines
12 KiB
Markdown
<p align="center"><a href="http://www.abap2ui5.org" target="_blank"><img src="https://github.com/abap2UI5/abap2UI5/assets/102328295/52ac0bb6-a219-4e9d-9e4f-62698dab3063" width="200"></a></p>
|
||
|
||
<p align="center">
|
||
<a href="https://github.com/abap2ui5/abap2ui5/releases/"><img src="https://img.shields.io/github/v/release/abap2ui5/abap2ui5"></a>
|
||
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg"></a>
|
||
<a href="https://abaplint.app/stats/abap2UI5/abap2UI5"><img src="https://img.shields.io/badge/tested_with-abaplint-green"></a>
|
||
<br>
|
||
<a href="https://github.com/abap2UI5/abap2UI5/issues/306"><img src="https://img.shields.io/badge/PRs-welcome-green"></a>
|
||
<a href="https://github.com/abap2UI5/abap2UI5/graphs/contributors"><img src="https://img.shields.io/github/contributors/abap2ui5/abap2ui5"></a>
|
||
<a href="https://twitter.com/abap2UI5"><img src="https://img.shields.io/twitter/follow/abap2UI5"></a>
|
||
</p>
|
||
|
||
*...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 2311)
|
||
* **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](https://github.com/abap2UI5/abap2UI5-downport)
|
||
|
||
#### Information (Blog Series)
|
||
1. Introduction: Developing UI5 Apps Purely in ABAP [(SCN - 22.02.2023)](https://blogs.sap.com/2023/02/22/abap2ui5-development-of-ui5-apps-in-pure-abap-1-3/)<br>
|
||
2. Displaying Selection Screens & Tables [(SCN - 23.02.2023)](https://blogs.sap.com/2023/02/22/abap2ui5-output-of-lists-and-tables-toolbar-and-editable-2-3/)<br>
|
||
3. Popups, F4-Help, Messages & Controller Logic [(SCN - 30.03.2023)](https://blogs.sap.com/2023/03/30/abap2ui5-3-4-flow-logic-pop-ups-f4-help/)<br>
|
||
4. Advanced Functionality & Demonstrations [(SCN - 02.04.2023)](https://blogs.sap.com/2023/04/02/abap2ui5-4-5-additional-features-demos/)<br>
|
||
5. Creating UIs with XML Views, HTML, CSS & JavaScript [(SCN - 12.04.2023)](https://blogs.sap.com/2023/04/12/abap2ui5-5-6-extensions-with-xml-views-html-js-custom-controls/)<br>
|
||
6. Installation, Configuration & Troubleshooting [(SCN - 14.04.2023)](https://blogs.sap.com/2023/04/14/abap2ui5-6-7-installation-configuration-debugging/)<br>
|
||
7. Technical Background: Under the Hood of abap2UI5 [(SCN - 26.04.2023)](https://blogs.sap.com/2023/04/26/abap2ui5-7-7-technical-background-under-the-hood-of-abap2ui5/)<br>
|
||
8. Repository Organization: Working with abapGit, abaplint & open-abap [(SCN - 21.08.2023)](https://blogs.sap.com/2023/08/21/abap2ui5-a1-repository-setup-with-abapgit-abaplint-open-abap/)<br>
|
||
9. Update I: Community Feedback & New Features - Sep. 2023 [(SCN - 11.09.2023)](https://blogs.sap.com/2023/09/11/abap2ui5-a2-community-feedback-new-features/)<br>
|
||
10. Extensions I: Exploring External Libraries & Native Device Capabilities [(SCN - 04.12.2023)](https://blogs.sap.com/2023/12/04/abap2ui5-a3-extensions-i-exploring-external-libraries-native-device-capabilities/)<br>
|
||
11. Extensions II: Guideline for Developing New Features in JavaScript [(SCN - 11.12.2023)](https://blogs.sap.com/2023/12/11/abap2ui5-a4-extensions-ii-guideline-for-developing-new-features-in-javascript/)<br>
|
||
12. Update II: Community Feedback, New Features & Outlook – Jan. 2024 [(SCN - 08.01.2024)](https://blogs.sap.com/2024/01/08/abap2ui5-12-update-ii-community-feedback-new-features-outlook-january-2024/)<br>
|
||
|
||
#### References
|
||
* Find abap2UI5 on ABAP Open Source Projects [(dotabap.org)](https://dotabap.org/)
|
||
* Featured on SAP Developer News [(youtube - 26.01.2023)](https://www.youtube.com/watch?v=6BDK55xYttM)
|
||
* Highlighted in the Boring Enterprise Nerdletter [(newsletter - 08.03.2023)](https://boringenterprisenerds.substack.com/p/34-abap2ui5-sap-cva-burnout-c2c-shortwave)
|
||
* Part of the SAP Developer Code Challenge [(SCN - 17.05.2023)](https://groups.community.sap.com/t5/application-development/sap-developer-code-challenge-open-source-abap-week-2/m-p/260727#M1372)
|
||
* Showcased at SAP TechEd 2023 [(youtube - 02.11.2023)](https://www.youtube.com/watch?v=kLbF0ooStZs&t=3052s)
|
||
* Featured on SAP Developer News [(youtube - 15.12.2023)](https://www.youtube.com/watch?v=CfH9L03WUCg&t=350s)
|
||
|
||
#### Apps & Extensions
|
||
* Integrate your apps to SAP Fiori On-Premise Launchpad [(ext-fiori_launchpad)](https://github.com/abap2UI5/ext-service_integration)
|
||
* Connect with the SAP Business Technology Platform [(ext-btp)](https://github.com/abap2UI5/ext-business_technology_platform)
|
||
* Explore abap2UI5-tools, a collection of tools & utility functions [(abap2UI5-tools)](https://github.com/abap2UI5/abap2ui5-tools)
|
||
* Enhance functionality with Custom Controls & External Libraries [(custom controls)](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/docs/custom_controls.md)
|
||
* Discover other projects using abap2UI5 [(abap2UI5/links)](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/docs/links.md)
|
||
|
||
#### More
|
||
* Experiment with abap2UI5 compiled to JS on open-abap under Node.js [(abap2UI5-web)](https://twitter.com/LarsHvam/status/1648575595897405446)
|
||
* Install S-RTTI to create apps with dynamically typed tables [(github/s-rtti)](https://github.com/sandraros/S-RTTI)
|
||
* Import & Export Excel files in pure ABAP with abap2xslt [(twitter/xslt)](https://twitter.com/abap2UI5/status/1703787345588162907)
|
||
* Analyse your Views & Models with this Codesandbox [(abap2UI5-debug-tools)](https://codesandbox.io/p/sandbox/abap2ui5-debug-tool-ppyfcs)
|
||
* Join the Advent of Code 2023 with abap2UI5 [(SCN - 27.11.2023)](https://blogs.sap.com/2023/11/27/preparing-for-advent-of-code-2023/)
|
||
* And finally, don't forget to explore the [Samples Repository](https://github.com/abap2UI5/abap2UI5-samples) 🧭
|
||
|
||
#### Installation
|
||
Install with [abapGit](https://abapgit.org)  and set up a new HTTP service with the following handler:
|
||
##### Standard ABAP 🏠
|
||
```abap
|
||
METHOD if_http_extension~handle_request.
|
||
|
||
DATA(lv_resp) = SWITCH #( server->request->get_method( )
|
||
WHEN 'GET' THEN z2ui5_cl_fw_http_handler=>http_get( )
|
||
WHEN 'POST' THEN z2ui5_cl_fw_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 :cloud:
|
||
<details>
|
||
<summary>show code...</summary>
|
||
|
||
```abap
|
||
METHOD if_http_service_extension~handle_request.
|
||
|
||
DATA(lv_resp) = SWITCH #( request->get_method( )
|
||
WHEN 'GET' THEN z2ui5_cl_fw_http_handler=>http_get( )
|
||
WHEN 'POST' THEN z2ui5_cl_fw_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.
|
||
```
|
||
|
||
</details>
|
||
|
||
#### Usage
|
||
Implement the abap2UI5 interface as shown in the following example:
|
||
```abap
|
||
CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.
|
||
|
||
PUBLIC SECTION.
|
||
INTERFACES z2ui5_if_app.
|
||
DATA quantity TYPE string.
|
||
|
||
ENDCLASS.
|
||
|
||
CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
|
||
|
||
METHOD z2ui5_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:
|
||
<details>
|
||
<summary>show code...</summary>
|
||
|
||
```abap
|
||
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.
|
||
```
|
||
|
||
</details>
|
||
|
||
#### FAQ
|
||
* Check out the [documentation](https://github.com/abap2UI5/abap2UI5-documentation/) for more installation & configuration guidelines
|
||
* Still have open questions? Find an answer in the [FAQ](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/docs/faq.md)
|
||
* Want to help out? Check out the contribution [guidelines](https://github.com/abap2UI5/abap2UI5-documentation/blob/main/CONTRIBUTING.md)
|
||
* As always - your comments, questions, wishes and bug reports are welcome, please create an [issue](https://github.com/abap2UI5/abap2UI5/issues)
|