Sapui5

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. 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
2. Core Concepts
3. SAP Fiori Elements
4. Metadata-Driven Controls (MDC)
5. Testing
6. Best Practices
7. Common Patterns
8. Troubleshooting
9. Development Tools
10. Bundled Resources

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 metadata and data sources
• sap.ui: UI technology and device types
• sap.ui5: UI5-specific configuration (models, routing, dependencies)

3. Data Models

JSON Model (client-side):

var oModel = new JSONModel({
    products: [...]
});
this.getView().setModel(oModel);

OData V2 Model (server-side):

"": {
    "dataSource": "mainService",
    "settings": {
        "defaultBindingMode": "TwoWay",
        "useBatch": true
    }
}

Resource Model (i18n):

"i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "settings": {
        "bundleName": "my.app.i18n.i18n"
    }
}

Reference: references/data-binding-models.md for comprehensive guide.

4. Views & Controllers

XML View (recommended):

<mvc:View
    controllerName="my.app.controller.Main"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc">
    <Page title="{i18n>title}">
        <List items="{/products}">
            <StandardListItem title="{name}" description="{price}"/>
        </List>
    </Page>
</mvc:View>

5. Routing & Navigation

Navigate programmatically:

this.getOwnerComponent().getRouter().navTo("detail", {
    objectId: sId
});

Reference: references/routing-navigation.md for routing patterns.

SAP Fiori Elements

Build applications without JavaScript UI code using OData annotations.

Application Types

1. List Report: Searchable, filterable tables/charts
2. Object Page: Detailed view with sections and facets
3. Analytical List Page: Visual filters and analytics
4. Overview Page: Card-based dashboards
5. Worklist: Simplified list for tasks

Quick Setup

manifest.json for List Report + Object Page:

{
    "sap.ui5": {
        "dependencies": {
            "libs": {
                "sap.fe.templates": {}
            }
        },
        "routing": {
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "variantManagement": "Page"
                        }
                    }
                }
            }
        }
    }
}

Key Annotations:

• @UI.LineItem: Table columns
• @UI.SelectionFields: Filter bar fields
• @UI.HeaderInfo: Object page header
• @UI.Facets: Object page sections

Reference: references/fiori-elements.md for comprehensive guide.

Metadata-Driven Controls (MDC)

The sap.ui.mdc library provides metadata-driven controls for building dynamic UIs at runtime.

Key Controls

• MDC Table: Data display with dynamic columns based on metadata
• MDC FilterBar: Complex filter conditions with PropertyInfo
• MDC Value Help: Assisted data input with suggestions

Quick Example

<mdc:Table
    id="mdcTable"
    delegate='{name: "my/app/delegate/TableDelegate", payload: {}}'
    p13nMode="Sort,Filter,Column"
    type="ResponsiveTable">
    <mdc:columns>
        <mdcTable:Column propertyKey="name" header="Name">
            <Text text="{name}"/>
        </mdcTable:Column>
    </mdc:columns>
</mdc:Table>

Reference: references/mdc-typescript-advanced.md for comprehensive MDC guide with TypeScript.

Testing

Unit Tests (QUnit)

Test individual functions and modules:

QUnit.module("Formatter Tests");
QUnit.test("Should format price correctly", function(assert) {
    var fPrice = 123.456;