abap2UI5 samples

abap2UI5 — samples

Learn the abap2UI5 basics — 130 ready-to-run samples, from a one-class Hello World to complete applications.

Install them, click through, read the source: every sample adds one idea — a binding, an event, a table, a popup — so the collection reads like a course. It is the fastest way to learn abap2UI5 development.

Your first app

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 is a complete UI5 app — one interface, one method, and abap2UI5 renders the rest. Everything in this repository grows from this pattern.

Try it in 60 seconds

1. Install abap2UI5 — this repository ships apps, not the framework.

2. Pull this repository with abapGit, using the branch that matches your system:

   Branch	System	Content
   main	on-premise NW 7.50+ and ABAP Cloud, BTP, S/4HANA Cloud	everything
   702	NW 7.02 – 7.4x	portable set, downported

3. Run Z2UI5_CL_SMP_APP_000 — the overview app linking every sample of the portable set.

Every sample is Z2UI5_CL_SMP_APP_<no>, and you start it with ?app_start=z2ui5_cl_smp_app_<no>. The number alone does not name a sample: each of the three repositories numbers from its own sequence, and the class prefix is what says which one you mean — Z2UI5_CL_SMP_APP_493 is the Hello World here, while Z2UI5_CL_SMPS_APP_493 in samples-stack is a FilterBar with variant management. So the catalogue always gives you the class, not a number.

No system at hand? The sample catalogue is this catalogue as a page — the samples in the order they are meant to be read in, six stages from the smallest app that runs to files, devices and custom CSS. Every card opens the source, or starts the class in the playground with nothing installed at all. SAMPLES.md is the same catalogue to scroll and Ctrl+F. Both are generated from the tree, so both are what is actually here.

Building with an AI coding agent? The AI page of the documentation sets up the skills and the MCP server — whose sample search covers every sample here: claude mcp add abap2ui5 -- npx --yes -p @abap2ui5/mcp-server abap2ui5-mcp. The Claude Code plugin is two commands: /plugin marketplace add abap2UI5/abap2UI5, then /plugin install abap2ui5@abap2ui5.

The learning path

This repository is step 1 of 3. When the basics feel familiar, the other two sample repositories take you further:

What's inside

• src/ — one flat package, one class per sample: cloud-ready, downportable and plain OpenUI5 1.71. The sample catalog (bindings, events, popups, framework actions, custom controls and use cases) plus a small curated set of control demos — the complete control reference lives in samples-controls.
• Everything here is on both branches: nothing is stripped from 702, and there are no shared helper classes — every sample is self-contained.

Every sample runs on ABAP Cloud — that is why main needs no cloud-specific branch. main is the default branch and is checked against both ABAP Standard and ABAP Cloud on every pull request; 702 is generated from main on every push — never commit to it directly.

Layout, naming and code conventions are documented in AGENTS.md — read it before contributing.

Every pull request is linted against ABAP Standard (v750), ABAP Cloud and 7.02 (after the downport), checked with the abap2UI5-linter, and the overview catalog, SAMPLES.md and the docs are verified against the folder tree.

Contributing & Issues

Pull requests are welcome, see CONTRIBUTING.md. For bug reports or feature requests, please open an issue in the abap2UI5 repository.