OrganisationSAP
SAP Samples
Capabilities
Demonstrates
AccessibilityUI5AccessibilityMaking a UI usable with a screen reader, with a keyboard alone and without seeing the layout: accessible names on controls, a heading order, landmarks, focus handling and announcements. Target size for a finger is [touch operation](capability:ui5-touch-uis).Agent access to your codeUI5CAPABAPBTPAgent access to your codeLetting a coding agent read the project or the system you actually have, reach its model, its objects and its checks, and act on it. In file-based environments that works out of the box; complex systems need dedicated access capabilities. Whatever the environment, the agent also needs project- and framework-specific context, so it understands the thing in front of it rather than guessing from what it remembers of its training data. The transport is incidental: an MCP server, a language server or a CLI answer the same question, and what differs between them is how much of the real thing the agent can see. Distinct from [MCP servers](capability:mcp-servers), which is a protocol adapter on your own running service, and from [agent guidance](capability:agent-guidance), which is knowledge handed over as files rather than read from the thing itself.App hostingUI5BTPCAPApp hostingWhere a built frontend lives and what serves it — the static files of a frontend application after the build, reachable behind a login and beside the API it talks to, without a web server of your own.Data bindingUI5Data bindingKeeping a control and a model in step in both directions, including the formatting, type conversion and validation that sit between the two.Fiori annotationsUI5CAPABAPFiori annotationsDescribing a service so a Fiori client can render it without hand-written UI code — titles, value helps, hierarchies and visibility expressed as model annotations rather than screen logic.Frontend performanceUI5Frontend performanceFinding why a browser UI is slow to start or to respond, and what to change: how many requests it sends and whether they block each other, how large its bundles are, and which OData round trips it waits on. Distinct from [query profiling](capability:query-profiling), which starts at the service and the database rather than at the browser's network log.Key-user adaptationUI5ABAPBTPKey-user adaptationChanging a delivered app without modifying it — moving, hiding and adding elements as a layered set of changes that survive an upgrade.Launchpad and site contentUI5BTPLaunchpad and site contentGetting apps, cards, pages and workspaces in front of users in an application launchpad or portal, including content providers, content packages and access roles. Serving the application’s files is [app hosting](capability:app-hosting); extending the surrounding shell is [launchpad plugins](capability:launchpad-plugins).LintingUI5CAPLintingCatching in the editor what would otherwise be caught at deploy time, or not at all — problems in source code and models and in the project's configuration, found by rules rather than by review.LLM integrationUI5CAPBTPABAPLLM integrationCalling a language model from application code with the tenant, destination and credential handling already solved instead using an SDK call with a hand-rolled key.ThemingUI5ThemingApplying a consistent visual identity across every control, including the parameters an app may read and the custom themes an organisation may build.TypeScript supportUI5TypeScript supportWriting apps and libraries in TypeScript — the type definitions, the module syntax the loader expects, and the build step that gets from one to the other.Web Components interopUI5Web Components interopUsing standards-based custom elements inside an app, and the question of which control set an app should be built from at all, two concerns that are often answered as one.
Entries
Group by28 of 28 entries
EntrySignals
Maintains: samples, sketches and references
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
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
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/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/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/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
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.
Samples for the six extension types of SAP Digital Manufacturing
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/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/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
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/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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Details
History
- First entry seenDiscovered via GitHub organisations and accounts, Added by hand, GitHub API.
Profile
For your agent
- Ref
actor:sap-samples- JSON
- /actors/sap-samples.json
- MCP
- Connecting an agent