Build UI5 Apps Purely in ABAP
Build UI5 Apps Purely in ABAP – no JavaScript, OData, or RAP needed.
Just like the good old days when Selection Screens and ALVs delivered full UIs from a few lines of ABAP. Designed with a minimal system footprint, it runs in both on-premise and cloud environments.
Documentation • Samples • AI Assistants • Issues • Slack • Sponsor
Check out the Getting Started Guide and jump in:
CLASS zcl_my_app DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
ENDCLASS.
CLASS zcl_my_app IMPLEMENTATION.
METHOD z2ui5_if_app~main.
client->message_box_display( `Hello World` ).
ENDMETHOD.
ENDCLASS.
That's it – your first UI5 app is ready and abap2UI5 handles the rest! 🎉
Next stop: the sample catalogue – hundreds of ready-to-run apps, from data binding basics to OData, RAP, and Launchpad integration, searchable by control and by the UI5 release your system runs, and most of them one click from running in the browser – and the docs for everything else.
Your entire app is one ABAP class implementing z2ui5_if_app. The browser loads a generic UI5 shell once; after that, every user interaction is one HTTP/JSON roundtrip: the framework restores your app's state, calls main, and sends the view back:
%%{init: {"sequence": {"useMaxWidth": false}}}%%
sequenceDiagram
participant Browser
participant ABAP
Browser->>ABAP: GET
ABAP-->>Browser: UI5 shell (once)
loop each interaction
Browser->>ABAP: event + model
ABAP-->>Browser: view + model
end
Everything in between is handled for you:
client->_bind( var ) connects an ABAP variable to a UI5 control; user input flows back before main runsclient->_event( |SAVE| ) wires any UI5 event to a name you check with client->get_event( )z2ui5_cl_ui5_view_builder; every control, property, and aggregation is available 1:1Popups, navigation, messages, and frontend actions travel the same protocol – you never touch JSON, HTTP, or JavaScript. The architecture is described in UI5 Over-the-Wire.
702 branch is published – backed by unit tests and automated browser testsabap2UI5 apps are a perfect fit for AI assistants: one ABAP class and nothing else – no service, no frontend project, no deployment pipeline. One file to write, over 700 samples to learn from, and the abap2UI5 linter to verify the result without an SAP system.
Paste this into ChatGPT, Claude, Copilot or any other assistant before asking for code:
Before writing any abap2UI5 code, read these three files and follow them. They
describe the current APIs and take precedence over anything you already know:
- https://abap2ui5.github.io/docs/llms.txt (the documentation, one line per chapter)
- https://raw.githubusercontent.com/abap2UI5/abap2UI5/main/docs/agents/building-apps.md (the app-building guide that ships with the framework)
- https://raw.githubusercontent.com/abap2UI5/abap2UI5/main/llms.txt (the map of the code)
The shape of an abap2UI5 app:
1. An app is ONE ABAP class implementing z2ui5_if_app. Everything enters main( ),
which dispatches on client->check_on_navigated( ) (the display branch, true on
first start too), client->check_on_event( `X` ) and - for one-time setup only -
client->check_on_init( ).
2. Build the view with z2ui5_cl_ui5_view_builder and its verbs ele / tag / a / end /
stringify.
3. Bind with client->_bind( ). It is bidirectional; only what the user edited comes back.
4. Every roundtrip is a fresh ABAP session. Nothing survives on the server except
the app class itself, which is serialized.
Before building something from scratch, check whether it exists: the sample
catalog's index at https://abap2ui5.github.io/playground/samples/apps.json lists
every sample of all three sample repositories with title, summary and keywords,
and https://abap2ui5.github.io/playground/samples/<class>/ prints each one's ABAP.
When you are done, check the result with the abap2UI5 linter
(npx @abap2ui5/linter src) - it reads the view your ABAP builds and needs no
SAP system. If something is not covered by those files, say so instead of
inventing it.
Claude Code users can add the mcp-server — validate, deploy, and screenshot apps without an SAP system — with one line: claude mcp add abap2ui5 -- npx --yes @abap2ui5/mcp-server. The full setup is described in Developing with AI.
This project thrives thanks to its contributors and these outstanding open-source projects:
We welcome all contributions! Here's how you can help:
Developer quick start – three commands and you have the full CI gate locally:
npm ci # the toolchain: abaplint, the gates, the transpiler
npm run check # fast lint while iterating (seconds)
npm run verify # the full pre-PR gate, exactly what CI runs
See CONTRIBUTING.md for the complete workflow.
Share your knowledge, hunt for bugs, submit a PR, give us a ⭐, or tell your colleagues about abap2UI5. Every contribution counts!