/sapui5

name: sapui5
description: "This skill should be used when developing SAP UI5 applications, including creating freestyle apps, Fiori Elements apps, custom controls, testing, data binding, OData integration, routing, and troubleshooting. Use when building enterprise web applications with SAP UI5 framework, implementing MVC patterns, configuring manifest.json, creating XML views, writing controllers, setting up data models (JSON, OData v2/v4), implementing responsive UI with sap.m controls, building Fiori Elements apps, writing unit tests with QUnit, integration tests with OPA5, setting up mock servers, handling security (XSS, CSP), optimizing performance, implementing accessibility features, or debugging UI5 applications. Also covers sap.ui.mdc controls and TypeScript control libraries."
license: GPL-3.0
metadata:
  maintainer: "Eduard Jiglau"
  maintainer_email: "hello@sap-ai-skills.com"
  website: "https://sap-ai-skills.com"
  version: "2.4.1"
  last_verified: 2026-05-31
  framework_version: "1.148.1 latest verified, 1.120.0+ baseline"
  documentation_source: "https://github.com/SAP-docs/sapui5"
  documentation_files_analyzed: 1416
  reference_files: 15
  mcp_integration: true
  mcp_tools: 9
  specialized_agents: 4
  slash_commands: 5
  status: production
  keywords: [sapui5, ui5, openui5, sap ui5, ui5 framework, ui5 application, ui5 development, ui5 tooling, ui5 cli, Component.js, manifest.json, xml view, data binding, odata v2, odata v4, fiori elements, sap.m controls, mvc pattern, routing, navigation, qunit, opa5, testing, mock server, sap.ui.mdc, mdc table, typescript, accessibility, security, performance, ui5 inspector]

SAPUI5 Development Skill

Related Skills

• **sap-fiori-tools**: Use for rapid Fiori application development, Page Editor configuration, and deployment automation
• **sap-cap-capire**: Use for backend service integration, OData model binding, and CAP service consumption
• **sap-btp-cloud-platform**: Use for deployment options, HTML5 Application Repository service, and BTP integration
• **sap-abap**: Use when connecting to ABAP backends or consuming OData services from SAP systems
• **sap-api-style**: Use when documenting UI5 application APIs or following REST/OData standards
• **sap-dependency-security**: Use for secure dependency upgrades, lockfile policies, supply-chain controls, and exact MCP server pins in SAPUI5 frontend toolchains

When to Use This Skill

Use this skill when building SAPUI5/OpenUI5 applications, XML views, controllers, custom controls, routing, OData v2/v4 model binding, Fiori Elements integrations, QUnit/OPA5 tests, accessibility/security/performance improvements, or UI5 MCP-assisted scaffolding and API lookup.

Comprehensive skill for building enterprise applications with SAP UI5 framework.

Using MCP Tools (New in v2.0.0)

This skill integrates with the official **@ui5/mcp-server** for live development tools:

• **Scaffolding**: Create projects with `ui5-app-scaffolder` agent or `/ui5-scaffold` command
• **API Reference**: Lookup controls with `ui5-api-explorer` agent or `/ui5-api` command
• **Code Quality**: Run linter with `ui5-code-quality-advisor` agent or `/ui5-lint` command
• **Migration**: Upgrade versions with `ui5-migration-specialist` agent
• **Version Info**: Check releases with `/ui5-version` command
• **Tool Catalog**: List all MCP tools with `/ui5-mcp-tools` command

For setup and troubleshooting, see [references/mcp-integration.md](references/mcp-integration.md). MCP package pins are governed by **sap-dependency-security** and validated by `npm run validate:mcp-security`.

**Graceful Fallback**: All features work without MCP by using reference files and built-in templates.

Table of Contents

1. [Quick Start](#quick-start) 2. [Core Concepts](#core-concepts) 3. [SAP Fiori Elements](#sap-fiori-elements) 4. [Metadata-Driven Controls (MDC)](#metadata-driven-controls-mdc) 5. [Testing](#testing) 6. [Best Practices](#best-practices) 7. [Common Patterns](#common-patterns) 8. [Troubleshooting](#troubleshooting-common-issues) 9. [Development Tools](#development-tools) 10. [Bundled Resources](#bundled-reference-files)

---

Quick Start

Creating a Basic SAPUI5 App

Use UI5 Tooling (recommended) or SAP Business Application Studio:

# Install UI5 CLI
npm install -g @ui5/cli

# Create new project
mkdir my-sapui5-app && cd my-sapui5-app
npm init -y

# Initialize UI5 project
ui5 init

# Add UI5 dependencies
npm install --save-dev @ui5/cli

# Start development server
ui5 serve

**Project Structure**:

my-sapui5-app/
├── webapp/
│   ├── Component.js
│   ├── manifest.json
│   ├── index.html
│   ├── controller/
│   │   └── Main.controller.js
│   ├── view/
│   │   └── Main.view.xml
│   ├── model/
│   │   └── formatter.js
│   ├── i18n/
│   │   └── i18n.properties
│   ├── css/
│   │   └── style.css
│   └── test/
│       ├── unit/
│       └── integration/
├── ui5.yaml
└── package.json

**Templates Available**:

• `templates/basic-component.js`: Component template
• `templates/manifest.json`: Application descriptor template
• `templates/xml-view.xml`: XML view with common patterns
• `templates/controller.js`: Controller with best practices
• `templates/formatter.js`: Common formatter functions

**Use templates** by copying to your project and replacing placeholders (`{{namespace}}`, `{{ControllerName}}`, etc.).

---

Core Concepts

1. MVC Architecture

• **Model**: Data layer (JSON, OData, XML, Resource models)
• **View**: Presentation layer (XML, JavaScript, JSON, HTML)
• **Controller**: Business logic layer
• **Binding**: Synchronizes model and view (One-way, Two-way, One-time)

**Reference**: `references/core-architecture.md` for detailed architecture concepts.

2. Component & Manifest

• **Component.js**: Entry point, initializes router and models
• **manifest.json**: Central configuration (models, routing, dependencies, data sources)

**Key manifest sections**:

• `sap.app`: Application me