Sample Catalogue
The framework ships 105 sample apps in core/srv/app/samples/ — the abap2UI5 demo collection, transpiled to JavaScript. 98 of them are listed in the built-in gallery, and this page is that gallery's own table: it is generated from z2ui5_cl_smp_app_000, the sample browser the framework itself renders, so it cannot drift from what the playground offers.
Every title links into the browser playground — no install, no server. The same apps run on your own CAP server under the same names: ?app_start=<class>, or client.nav_app_call() from an app of your own.
→ Prefer to browse in the app itself? Open z2ui5_cl_smp_app_000 — the same catalogue with a search field.
Two markers are carried over from the upstream gallery: (A) marks a sample that drives the frontend through a client action, (C) one that uses a custom control from the z2ui5.cc namespace.
Categories
Basics · Binding · Browser · Control Behaviour · CSS · Device · Event · File · Focus · Formatter · Grid Table · List · Menu · Message · Navigation · Nested View · Popover · Popup · Scroll · Table · Templating · Timer · Tree
Basics
| Sample | Class | Topics |
|---|---|---|
| Hello World, the Smallest App | z2ui5_cl_smp_app_493 | hello world smallest first app minimal start here template |
| Data Binding: Input and Button | z2ui5_cl_smp_app_494 | binding _bind model attribute value input button serialize |
| Lifecycle: Init, Event, Navigated | z2ui5_cl_smp_app_495 | lifecycle roundtrip main dispatcher state serialize check_on_init check_on_event check_on_navigated |
| Events, Views and Roundtrips | z2ui5_cl_smp_app_004 | roundtrip restart second view uncaught error controller basics |
| The Developer Tools (Ctrl+F12) | z2ui5_cl_smp_app_496 | developer tools devtools ctrl f12 debug inspect payload previous request response view xml view model source code log error adt export |
Binding
| Sample | Class | Topics |
|---|---|---|
| A View Built From RTTI, No Field Named | z2ui5_cl_smp_app_497 | rtti generic view runtime columns get_components describe_by_data no field name itab structure column cell binding |
| Currency Amounts (sap.ui.model.type.Currency) | z2ui5_cl_smp_app_067 | amount decimals leading zeros number format |
| Dynamic Table Typed at Runtime (RTTI) | z2ui5_cl_smp_app_061 | generic data reference create data ddic dynamic itab |
| Expression Binding, Types and Composite Parts | z2ui5_cl_smp_app_027 | formatter parts conditional regexp visible enabled syntax |
| Model setSizeLimit for Large Tables (A) | z2ui5_cl_smp_app_071 | combobox jsonmodel size limit large itab 100 entries |
| Single Table Cell (tab_index) | z2ui5_cl_smp_app_144 | cell input internal table row field level |
| Structure Fields and INCLUDEs | z2ui5_cl_smp_app_166 | structure component include flat form level |
| Types for Integer, Decimal, Date and Time | z2ui5_cl_smp_app_047 | type conversion sum amount number field |
Browser
| Sample | Class | Topics |
|---|---|---|
| Copy to Clipboard (A) | z2ui5_cl_smp_app_325 | clipboard paste copy text area |
| Local and Session Storage (A,C) | z2ui5_cl_smp_app_327 | localstorage sessionstorage persist store_data offline |
| Logout from the Client (A) | z2ui5_cl_smp_app_361 | logoff signout icf session end fiori launchpad |
| Open a URL in a New Tab (A) | z2ui5_cl_smp_app_073 | url window open_new_tab link target |
| Open Mail, Phone and SMS Links (A) | z2ui5_cl_smp_app_316 | mailto tel sms urlhelper redirect native link |
| Reload the Page (A) | z2ui5_cl_smp_app_492 | reload refresh restart location_reload url |
| Set the Tab Favicon (A) | z2ui5_cl_smp_app_491 | favicon icon tab image data uri |
| Set the Tab Title (A) | z2ui5_cl_smp_app_125 | document.title tab caption headline set_title |
| Soft Keyboard Mode on Mobile (A) | z2ui5_cl_smp_app_352 | mobile numeric keypad keyboard_set_mode phone input |
Control Behaviour
| Sample | Class | Topics |
|---|---|---|
| Expand a Panel by ID (setExpanded) (A) | z2ui5_cl_smp_app_448 | panel collapse expand setexpanded control_by_id whitelisted |
| MultiInput with Tokens (C) | z2ui5_cl_smp_app_078 | multiinput token tokens suggestion custom control |
| Open the PDF Viewer by ID (A) | z2ui5_cl_smp_app_449 | pdfviewer pdf document viewer popup control_by_id whitelisted |
| Switch NavContainer Page by ID (A) | z2ui5_cl_smp_app_088 | navcontainer icontabbar icontabheader page switch control_by_id whitelisted |
| Wizard with Steps (A) | z2ui5_cl_smp_app_202 | wizard step branching discardprogress setnextstep control_by_id |
CSS
| Sample | Class | Topics |
|---|---|---|
| Color Table Cells from the Backend | z2ui5_cl_smp_app_305 | color background conditional formatting style data attribute |
| FlexBox Layouts with Custom Classes | z2ui5_cl_smp_app_255 | flexbox layout responsive navigation tile panel |
| Ship Your Own CSS with the View | z2ui5_cl_smp_app_050 | style stylesheet inline html class own design |
Device
| Sample | Class | Topics |
|---|---|---|
| Camera, Take Photos (C) | z2ui5_cl_smp_app_306 | camera photo picture webcam capture facing mode |
| Device Model: Phone, Tablet, Desktop (A) | z2ui5_cl_smp_app_445 | sap.ui.device responsive orientation resize media model |
| Frontend Info: UI5 Version, Theme, OS, Browser | z2ui5_cl_smp_app_122 | client info ui5 version theme os user agent device |
| Geolocation from the Browser (C) | z2ui5_cl_smp_app_120 | gps position latitude longitude altitude location |
Event
| Sample | Class | Topics |
|---|---|---|
| Control Objects in t_arg (FacetFilter) | z2ui5_cl_smp_app_197 | facetfilter filter object marshalling selected items |
| Extra Arguments with t_arg | z2ui5_cl_smp_app_167 | argument parameter payload event data fixed value |
| Keyboard Shortcuts, Ctrl+S (A) | z2ui5_cl_smp_app_471 | shortcut hotkey ctrl key combination keyboard_shortcut |
| Link with preventDefault (A) | z2ui5_cl_smp_app_472 | link href default action check_prevent_default |
File
| Sample | Class | Topics |
|---|---|---|
| Download to the Browser (A) | z2ui5_cl_smp_app_186 | export save base64 attachment xstring document |
| Upload to the Backend (C) | z2ui5_cl_smp_app_074 | fileuploader base64 attachment import picture document |
Focus
| Sample | Class | Topics |
|---|---|---|
| Focus a Table Cell by Column and Row (A) | z2ui5_cl_smp_app_421 | table cell column row aggregation set_focus |
| Jump to the Next Input on Enter (A) | z2ui5_cl_smp_app_189 | cursor enter tab next field form set_focus |
| Set Focus and Select Text in an Input (A) | z2ui5_cl_smp_app_133 | cursor set_focus selection position textfield |
Formatter
| Sample | Class | Topics |
|---|---|---|
| ABAP Date and Time Strings (DATS/TIMS) | z2ui5_cl_smp_app_450 | dats tims conversion initial date 00000000 sy-datum |
| Date Object for the DatePicker | z2ui5_cl_smp_app_457 | datepicker datevalue javascript date object iso |
| Date Objects for the PlanningCalendar | z2ui5_cl_smp_app_456 | planningcalendar appointment javascript date object iso |
| Inline Icons in a Text | z2ui5_cl_smp_app_466 | icon glyph placeholder text status expandinlineicons |
| When Not to Use One: Compute in ABAP | z2ui5_cl_smp_app_453 | no formatter computed backend thin frontend prepare |
Grid Table
| Sample | Class | Topics |
|---|---|---|
| Events on Cell Level | z2ui5_cl_smp_app_160 | cell enter row index event grid alv |
| Full Example with sap.ui.table | z2ui5_cl_smp_app_070 | grid alv dynamicpage column row action currency search sort filter |
| Keep Column Filters on Refresh (C) | z2ui5_cl_smp_app_143 | column filter reset refresh uitableext grid alv |
List
| Sample | Class | Topics |
|---|---|---|
| Filter and Sort the Binding from ABAP (A) | z2ui5_cl_smp_app_454 | binding_call getbinding sorter filter follow_up_action |
| Live Filter on the Client, No Roundtrip (A) | z2ui5_cl_smp_app_455 | binding_call live search client side no roundtrip filter |
| StandardListItem, Highlight and Events | z2ui5_cl_smp_app_048 | sap.m.list standardlistitem highlight infostate press selection |
Menu
| Sample | Class | Topics |
|---|---|---|
| Full Path of the Selected Item (A) | z2ui5_cl_smp_app_473 | menuitem nested submenu textpath controller path |
| Menu Button with core:require | z2ui5_cl_smp_app_163 | menubutton menuitem popover messagetoast require module |
Message
| Sample | Class | Topics |
|---|---|---|
| Message Model and MessageManager (C) | z2ui5_cl_smp_app_467 | messagemanager validation target field state central model |
| MessageBox from SY, BAPIRET2 or Exception | z2ui5_cl_smp_app_008 | t100 message class number exception cx_root error abend |
| MessageBox, Types and Custom Actions | z2ui5_cl_smp_app_382 | confirm warning error success information dialog action |
| MessagePopover URL Policy (A) | z2ui5_cl_smp_app_474 | url policy link security validator relative allow deny |
| MessageToast, Text and Duration | z2ui5_cl_smp_app_381 | toast notification duration position animation |
| MessageView and MessagePopover (A) | z2ui5_cl_smp_app_452 | messagepopover messageitem dialog grouped message list |
Navigation
| Sample | Class | Topics |
|---|---|---|
| Call and Leave Apps (nav_app_call) | z2ui5_cl_smp_app_024 | nav_app_call nav_app_leave sub app stack call back |
| Data Loss Protection on Leaving (A,C) | z2ui5_cl_smp_app_279 | dirty unsaved changes leave confirmation warning |
| Return Data and Events to the Caller | z2ui5_cl_smp_app_488 | r_data result get_app_prev return event payload |
| Uncaught Error and Error Popup | z2ui5_cl_smp_app_464 | exception dump error handling debugtool restart retry |
Nested View
| Sample | Class | Topics |
|---|---|---|
| Basic Example (nest_view_display) | z2ui5_cl_smp_app_065 | nest_view_display rerender model refresh sub view |
| Embed Another App's View | z2ui5_cl_smp_app_104 | sub app class embed instantiate another app rtti |
| Master-Detail with FlexibleColumnLayout | z2ui5_cl_smp_app_097 | fcl master detail list report two column split |
| Three Columns with FlexibleColumnLayout | z2ui5_cl_smp_app_098 | fcl three column detail detail deep navigation |
Popover
| Sample | Class | Topics |
|---|---|---|
| Basic Example with Placement | z2ui5_cl_smp_app_026 | placement anchor button confirm cancel popover_display |
| Open from a Table Row | z2ui5_cl_smp_app_052 | list report dynamicpage row link details table |
| Open Together with the View Build | z2ui5_cl_smp_app_490 | initial render one roundtrip anchor button |
| QuickView Contact Card | z2ui5_cl_smp_app_109 | quickview contact card links grouped fields |
| Select from a List | z2ui5_cl_smp_app_081 | list selection placement anchor |
| Toggle by ID (toggleBy) (A) | z2ui5_cl_smp_app_465 | toggleby open close control_by_id whitelisted |
Popup
| Sample | Class | Topics |
|---|---|---|
| Dialog inside a Dialog | z2ui5_cl_smp_app_161 | nested stack popup in popup second dialog |
| Element Binding to the Selected Row (A) | z2ui5_cl_smp_app_470 | element binding relative path aggregation dialog row |
| Navigate between Dialogs (NavContainer) (A) | z2ui5_cl_smp_app_170 | navcontainer dialog pages back forward |
| Value Help: Suggestions and F4 Dialog | z2ui5_cl_smp_app_009 | f4 search help suggestion input dialog select |
| Ways to Open a Dialog (A) | z2ui5_cl_smp_app_012 | dialog sub app destroy rerender background view |
Scroll
| Sample | Class | Topics |
|---|---|---|
| Scroll a Control into View (A) | z2ui5_cl_smp_app_363 | scroll_into_view control id validation jump |
| Scroll to a Pixel Position (A) | z2ui5_cl_smp_app_362 | position pixel scroll_to restore refresh toolbar |
Table
| Sample | Class | Topics |
|---|---|---|
| Drag and Drop Rows (A) | z2ui5_cl_smp_app_459 | dnd dragdropinfo reorder rows move |
| Editable Cells, Add and Delete Rows | z2ui5_cl_smp_app_011 | edit input add row delete multiselect toolbar |
| Filter Rows in the Backend | z2ui5_cl_smp_app_045 | filter server side form growing where |
| Large Table with Growing and ScrollContainer | z2ui5_cl_smp_app_006 | growing 10000 rows sticky toolbar sort performance |
| Live Search with Parallel Requests | z2ui5_cl_smp_app_059 | live search parallel requests busy queue typing |
| Search in the Backend (SearchField) | z2ui5_cl_smp_app_053 | search go enter server side where |
| Selection Modes: Single and Multi Select | z2ui5_cl_smp_app_019 | selectionmode none single multi segmentedbutton checkbox |
Templating
| Sample | Class | Topics |
|---|---|---|
| Build Columns Dynamically (template:repeat) | z2ui5_cl_smp_app_173 | template repeat runtime generated columns if then else |
| Dynamic Content in a Nested View | z2ui5_cl_smp_app_176 | template repeat runtime generated nested nest_view_display |
Timer
| Sample | Class | Topics |
|---|---|---|
| Progress Indicator during a Backend Call (A) | z2ui5_cl_smp_app_064 | progressindicator busy wait long running backend |
| Refresh the View Every n Seconds (A) | z2ui5_cl_smp_app_028 | interval polling auto refresh follow_up_action seconds |
Tree
| Sample | Class | Topics |
|---|---|---|
| Drag and Drop Nodes (A,C) | z2ui5_cl_smp_app_461 | dnd move node hierarchy binding context |
| Editable Nodes with CustomTreeItem (C) | z2ui5_cl_smp_app_463 | customtreeitem rename input binding write back |
| Inside a Dialog (C) | z2ui5_cl_smp_app_462 | popup expand state hierarchy nodes |
| Nested ABAP Table in a sap.m.Tree | z2ui5_cl_smp_app_460 | hierarchy nodes nested json items |
Not in the gallery
6 further classes ship in the same folder without a catalogue entry — they are the sub-apps the listed samples call (dialogs, detail views, nested apps), not entries in their own right. They run the same way if you name one directly:
z2ui5_cl_smp_app_020, z2ui5_cl_smp_app_025, z2ui5_cl_smp_app_105, z2ui5_cl_smp_app_112, z2ui5_cl_smp_app_469, z2ui5_cl_smp_app_489
Where they come from
The samples are machine-transpiled from the ABAP originals in abap2UI5-samples by the builder-abap2UI5-js pipeline, and land in core/srv/app/samples/ on every sync. That folder is pipeline-owned: edits to it are overwritten on the next publish. Copy a sample into srv/app/ before you change it.
Some samples need a real server: those that call external OData services or CAP destinations will not work in the browser playground. See what the playground is not.
→ Ready to write your own? Start with Hello World, or read the App Lifecycle.