abap2UI5
Version 1.144.0

Tooling

Everything on this page is optional — abap2UI5 is one ABAP class and needs no tools at all. What these three add is the loop that ABAP does not give you by itself: catching a broken view before it reaches a system, and seeing the app without leaving the editor.

They are independent of each other. Take the first one and stop, or take all three. Building with an AI assistant? That whole side of the tooling — the indexes, the agent conventions, the MCP server — is collected on Building with AI.

Start a project from the template

abap2UI5/app-template — press Use this template on GitHub and you have an app repository that is already set up: one working app class, both gates configured, and a CI workflow that runs them on every push.

The alternative is creating a class by hand, which works fine — the template only saves you from assembling the checks below yourself, and from finding out half a year later that they were never running.

Use this template → clone → npm ci → npm run check

Working Off-Stack walks through it — what is in the repository, the rename that makes it yours, and the way into your system.

Check the view without a system

abap2UI5/linter — the view your app builds only exists at runtime, so no UI5 tooling can see it and the ABAP compiler has no opinion about it. This one reconstructs the view from your builder chain and judges the two together:

  • controls, properties, aggregations and enum values that UI5 does not have, or does not have yet on the release you target (the @since floor — 1.71 by default, which is what most systems serve),
  • bindings that point at nothing, events nothing handles, deprecated controls,
  • and then it loads every view in a headless browser, which is the only way to find a view that does not merely render wrongly but fails to load at all.
sh
npx @abap2ui5/linter src

No SAP system, no install beyond npm. It also ships as a GitHub Action, and the app-template has it wired into CI already. The linter page has the rest: the two gates, --fix, and the baseline for switching it on over a codebase that already exists.

Run the app from the editor

abap2UI5/vscode-extension — press F9 on an app class and it starts in a preview beside your code, against your real system. Plus completion and hover for the whole UI5 API inside the builder chain, the linter running as you type, a click-a-control → jump-to-the-line inspector, and a traffic log of every roundtrip.

Install it from the VS Code Marketplace or Open VSX; it needs the ABAP remote filesystem extension for the system connection.

Where the samples live

Three repositories, one catalog: every sample from all of them is at abap2ui5.github.io/playground/samples, searchable in one box by what an app does, by the control it builds and by the release your system runs. Each is a page of its own, with the ABAP printed in full and — where it needs no system — a button that runs it in the browser.

The three are the catalog's three sources, and each is one click: Learn for “Where do I start?”, Controls for “Which control does what?”, and Stack for “Will my system run it?”. All three also install with abapGit and carry an overview app that lists everything they contain.

Edit this page on GitHub ↗ Last updated:
On this page