BrowseSAPUI5 and OpenUI5
Everything in UI5
29 of 323
Type: Sample
Domain
Origin: SAP official
Signals
More
Group by: Capability
As a Sample
Form
EntryBySignalsLast activity
Agent access to your Fiori appSAP only
SAP-samples/fiori-mcp-server-hands-onSAP-samples/fiori-mcp-server-hands-onA hands-on exercise set that builds and modifies an SAP Fiori elements app from a Figma design, using the MCP servers for SAP Fiori elements and for Figma with an AI coding assistant.sap official, ui5
Exercises building a Fiori elements app from Figma via MCP servers
SAP-samples/teched2025-CA261SAP-samples/teched2025-CA261A TechEd 2025 workshop that drives a Fiori elements app from a Figma design, through MCP servers from SAP and Figma read by an AI coding assistant, Cline in VS Code.sap official, ui5
TechEd 2025 workshop driving a Fiori elements app from Figma via MCP
SAP-samples/ui5con-2026-fiori-mcp-serverSAP-samples/ui5con-2026-fiori-mcp-serverA UI5con hands-on tutorial creating and modifying a Fiori elements application with AI coding assistants, using Cline and Anthropic's Claude 4.5 Sonnet against the MCP servers developed by SAP for Fiori.sap official, ui5
UI5con tutorial on Fiori elements apps with AI assistants and MCP
wdf2025-fiori-innov-day-mcp-serverwdf2025-fiori-innov-day-mcp-serverExercise material for an SAP Fiori Innovation Day hands-on session on building a Fiori elements app with an AI coding client wired to SAP's MCP servers.sap official, ui5
Fiori Innovation Day exercises on Fiori elements with MCP servers
LLM integrationSAP and community
ui5con-2026-chrome-built-in-aiui5con-2026-chrome-built-in-aiA hands-on UI5 workshop that adds Chrome's on-device AI APIs to a small TypeScript app for triaging multilingual support tickets: language detection, summaries, structured extraction, translation and replies.sap official, ui5
UI5 workshop adding Chrome's on-device AI APIs to a TypeScript app
Build and dev-server toolingSAP and community
@ui5/sample-app@ui5/sample-appAn OpenUI5 sample app set up with the UI5 CLI: ESLint, UI5 linter and UI5 Test Runner checks, a standard and a self-contained build, and a UI5 workspace for developing against local UI5 libraries.sap official, ui5
OpenUI5 sample app set up with the UI5 CLI
LintingSAP and community
@ui5/sample-app@ui5/sample-appAn OpenUI5 sample app set up with the UI5 CLI: ESLint, UI5 linter and UI5 Test Runner checks, a standard and a self-contained build, and a UI5 workspace for developing against local UI5 libraries.sap official, ui5
OpenUI5 sample app set up with the UI5 CLI
ui5con-2026-ui5-linter-workshopui5con-2026-ui5-linter-workshopSAP's UI5con hands-on workshop that takes a legacy UI5 app, seeded with deprecated APIs and inline scripts, from its first UI5 linter report to a clean, CSP-compliant one.sap official, ui5
UI5con workshop taking a legacy UI5 app to a clean UI5 linter report
TypeScript supportSAP and community
SAP-samples/ui5-typescript-control-librarySAP-samples/ui5-typescript-control-libraryAn example UI5 control library written in TypeScript, with its controls, themes, tests and the full tooling setup for TypeScript transpilation, build and linting.sap official, ui5
UI5 control library written in TypeScript with full tooling setup
SAP-samples/ui5-typescript-helloworldSAP-samples/ui5-typescript-helloworldA small UI5 application with a step-by-step guide to how its TypeScript setup is built from scratch, from the tsconfig and ui5-tooling-transpile wiring through to testing.sap official, ui5
Small UI5 app with a guide to its TypeScript setup from scratch
SAP-samples/ui5-typescript-tutorialSAP-samples/ui5-typescript-tutorialA roughly two-hour tutorial teaching TypeScript for UI5 application development by building a small weather-lookup app, from generator scaffolding through custom controls and testing.sap official, ui5
Tutorial on TypeScript for UI5 apps via a weather-lookup app
UI5 testingSAP and community
@ui5/sample-app@ui5/sample-appAn OpenUI5 sample app set up with the UI5 CLI: ESLint, UI5 linter and UI5 Test Runner checks, a standard and a self-contained build, and a UI5 workspace for developing against local UI5 libraries.sap official, ui5
OpenUI5 sample app set up with the UI5 CLI
AccessibilitySAP and community
ui5con-2026-a11y-hands-onui5con-2026-a11y-hands-onA UI5con 2026 hands-on workshop that fixes accessibility defects planted in a small UI5 TypeScript app, one exercise at a time, then sweeps the codebase with the ui5-accessibility Claude Code plugin.sap official, ui5
UI5con 2026 workshop fixing accessibility defects in a UI5 app
App hostingSAP only
SAP-samples/ui5-deploymentsSAP-samples/ui5-deploymentsA sample that deploys one UI5 freestyle application to SAP BTP, Cloud Foundry Environment through three approuter setups, standalone, managed and hybrid, each built into an MTA archive.sap official, ui5
UI5 app deployed to Cloud Foundry via three approuter setups
Data bindingSAP and community
openui5-fhir-sample-appopenui5-fhir-sample-appA sample app showing the use of the openui5-fhir project to build a SAP Fiori look-and-feel UI5 application against services using the FHIR protocol.sap official, ui5
UI5 app built with openui5-fhir against FHIR services
Fiori annotationsSAP and community
SAP-samples/teched2022-DT181SAP-samples/teched2022-DT181A TechEd 2022 workshop that blends a custom SAPUI5 app with SAP Fiori Elements building blocks and controller extensions on one object page, starting from a CAP service in SAP Business Application Studio.sap official, ui5
TechEd 2022 workshop mixing SAPUI5 with Fiori elements building blocks
ui5con-2026-fiori-building-blocksui5con-2026-fiori-building-blocksA hands-on session that builds a flexible travel dashboard by combining SAP Fiori elements templates, building blocks, extensions and freestyle SAPUI5 on a CAP back end.sap official, ui5
Session building a travel dashboard with Fiori elements and SAPUI5
wdf2025-fiori-innov-day-building-blockswdf2025-fiori-innov-day-building-blocksA SAP Fiori Innovation Day Walldorf hands-on session that builds a flexible travel dashboard from freestyle SAPUI5, SAP Fiori elements templates and building blocks.sap official, ui5
Fiori Innovation Day session building a travel dashboard
Frontend performanceSAP and community
teched2025-CA262teched2025-CA262An SAP TechEd 2025 hands-on that analyses and optimises front-end performance in a SAPUI5 application through its network traffic, the UI5 Builder and its OData requests.sap official, ui5
TechEd 2025 hands-on on SAPUI5 front-end performance
Key-user adaptationSAP only
SAP-samples/adaptation-project-exercisesSAP-samples/adaptation-project-exercisesA UI5Con workshop on building SAPUI5 Adaptation Projects, which customise a released application through controller and fragment extensions without changing its source, run in SAP Business Application Studio.sap official, ui5
UI5Con workshop on building SAPUI5 Adaptation Projects
SAP-samples/ui5-flexibility-easy-key-user-adaptationSAP-samples/ui5-flexibility-easy-key-user-adaptationA UI5con 2025 hands-on tutorial enabling a Fiori elements application for SAPUI5 flexibility and building custom key user adaptations, from BTP ABAP environment deployment through no-code changes to manifest properties and OData annotations.sap official, ui5
UI5con 2025 tutorial on SAPUI5 flexibility and key user adaptations
ui5-mdc-json-tutorialui5-mdc-json-tutorialA unit-by-unit UI5 tutorial that builds a JSON-model app through the sap.ui.mdc metadata-driven controls: Table, FilterBar, value help, custom types and VariantManagement, plus Geomap and Chart.sap official, ui5
UI5 tutorial on sap.ui.mdc controls with a JSON model
ui5-p13n-tutorialui5-p13n-tutorialA ten-exercise UI5 tutorial that adds sap.m.p13n.Engine personalisation and sap.ui.fl.variants.VariantManagement to a custom table control: column selection, sorting, grouping, filtering and saved variants.sap official, ui5
UI5 tutorial adding p13n Engine personalisation to a custom table
Launchpad and site contentSAP and community
btp-launchpad-ui-samplesbtp-launchpad-ui-samplesSample UI5 projects that accompany a blog post on designing apps for SAP Launchpad Service: a sample service deployed as a service broker and app samples deployed as multi-target applications.sap official, ui5
UI5 projects on designing apps for SAP Launchpad Service
ThemingSAP only
SAP-samples/ui5con-2025-theming-workshopSAP-samples/ui5con-2025-theming-workshopStarting points for a UI5con 2025 workshop that replace an app's theming logic with a parameterised skeleton CSS built on UI5's theming custom properties, CSS relative colours and container style queries.sap official, ui5
UI5con 2025 workshop on theming with UI5's CSS custom properties
Web Components interopSAP and community
SAP-samples/ai-seamless-integrationSAP-samples/ai-seamless-integrationA sample that embeds UI5 Web Components' AI patterns, the AI Button, AI Acknowledgment and AI Quick Prompt, inside an OpenUI5 application written in TypeScript.sap official, ui5
UI5 Web Components AI patterns embedded in an OpenUI5 app
SAP-samples/fundamental-ngx-sample-appsSAP-samples/fundamental-ngx-sample-appsAn Angular performance-review demo showcasing Fundamental NGX components, including its UI5 Web Components wrapper, with dashboard tiles, an employee table and forms on mock data.sap official, ui5
Angular performance-review demo of Fundamental NGX components
SAP-samples/uxc-integrationSAP-samples/uxc-integrationA sample that embeds UI5 Web Components such as the shell bar, side navigation and search inside an OpenUI5 application, built to SAP's UXC design standards, mixing both control sets in one app.sap official, ui5
UI5 Web Components shell bar and navigation inside an OpenUI5 app
ui5-webcomponents-ngx-sampleui5-webcomponents-ngx-sampleSAP's demo application for @ui5/webcomponents-ngx, the UI5 Web Components bindings for Angular, powered by Fundamental Library Styles.sap official, ui5
Demo app for @ui5/webcomponents-ngx, UI5 Web Components for Angular
Under no capability
s4hana-avc-ui-extension-templates4hana-avc-ui-extension-templateA template project of code samples and a local mock runtime for writing a Variant Configuration (VC) UI Extension for SAP S/4HANA.sap official, abap
Template and mock runtime for S/4HANA Variant Configuration UIs
SAP-samples/digital-manufacturing-extension-samplesSAP-samples/digital-manufacturing-extension-samplesWorked samples for the six ways SAP Digital Manufacturing can be extended, from POD plugins to XSLT inside an integration flow.sap official, digital-manufacturing
Samples for the six extension types of SAP Digital Manufacturing
Nothing here runs on its own: a plugin sample needs a Digital Manufacturing tenant to be uploaded into, and the integration samples need a Cloud Integration tenant plus an ERP system, or a mock server as the outbound example uses, before they do anything.