abap2UI5

Appearance

Quickstart ​

1. Install the Framework via abapGit ​

Pull abap2UI5 with abapGit. (New to abapGit? Install it first — see abapGit; it's the one-time tool used to pull abap2UI5 into your system.) For anything beyond a first look, pull a release rather than main — see Productive Usage for why.

abapGit repository installation screen for abap2UI5

ABAP Cloud

On BTP ABAP Environment and S/4 Public Cloud, use abapGit for Eclipse (ADT) and mass-activate the pulled objects afterwards — the S/4 Public Cloud page walks through it screenshot by screenshot, including the two link choices that cannot be changed later.

abapGit installation for ABAP Cloud environments

The framework is everything you need: the HTTP endpoint you create next serves the UI5 frontend itself, so there is no separate frontend to deploy. In some scenarios an additional frontend app is needed, check out more information here(link).

2. Set Up HTTP Handler and Service ​

Create a package and define an HTTP handler class. Use the ABAP tab for Standard ABAP systems (R/3 NetWeaver, S/4 On-Premise / Private Cloud); use the ABAP Cloud tab only on BTP ABAP Environment or S/4 Public Cloud:

abap
CLASS zcl_my_abap2UI5_http_handler DEFINITION PUBLIC.
  PUBLIC SECTION.
    INTERFACES if_http_extension.
ENDCLASS.

CLASS zcl_my_abap2UI5_http_handler IMPLEMENTATION.
  METHOD if_http_extension~handle_request.
    z2ui5_cl_ui5_http_handler=>run( server ).
  ENDMETHOD.
ENDCLASS.
abap
CLASS zcl_my_abap2UI5_http_handler DEFINITION PUBLIC.
  PUBLIC SECTION.
    INTERFACES if_http_service_extension.
ENDCLASS.

CLASS zcl_my_abap2UI5_http_handler IMPLEMENTATION.
  METHOD if_http_service_extension~handle_request.
    z2ui5_cl_ui5_http_handler=>run( req = request res = response ).
  ENDMETHOD.
ENDCLASS.

Next, use transaction SICF to create an HTTP service and enter your handler class in the service's Handler List tab, then activate the node:

SICF service creation dialog in transaction SICF
HTTP handler class assignment in SICF service configuration

ABAP Cloud

For ABAP Cloud environments, follow the SAP HTTP service tutorial.

Creating an HTTP service in the ABAP Cloud environment

Security

abap2UI5 talks only to the HTTP service you define, giving you full control over accessibility, authentication, and other security aspects.

ABAP Language Versions

The handler above is the one place the distinction matters. Your apps are independent of it — you are free to choose whether to build them with ABAP Cloud compatibility, whichever handler this system runs.

3. First Launch ​

Open the HTTP endpoint in your browser — in SICF, right-click your service node and choose Test Service (the URL looks like https://<host>:<port>/sap/bc/<your_service>). This startup page is also where you will launch your own apps later: abap2UI5 startup page with check button and test app launcher Press check to verify your installation, then launch the bundled test app to confirm everything works.

You should now see the page of the startup app. That is the whole install verified: abapGit pull, handler, service and app class. If you see something else instead:

  • The browser shows an ICF error page or a plain 404 — the request never reached the handler. In SICF, check that the service node is activated (right-click → Activate Service) and that the URL path matches the node.
  • A logon prompt you did not expect, or a 401/403 — authentication is the ICF node's job, exactly as for any other service. Check the node's Logon Data tab, and see Security for how access to the endpoint is controlled.
  • The startup page never appears, or stays white — open the browser console (F12); a bootstrap problem such as a blocked UI5 CDN logs there. Systems without internet access must serve UI5 themselves — see Bootstrapping.

Next Steps ​

The framework is installed and verified. Hello World is the next page: it is the smallest app that can exist, how to start it, and what each line of it does.