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

• Quick Start
• Core Concepts
• SAP Fiori Elements
• Metadata-Driven Controls (MDC)
• Testing
• Best Practices
• Common Patterns
• Troubleshooting
• 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

• List Report: Searchable, filterable tables/charts
• Object Page: Detailed view with sections and facets
• Analytical List Page: Visual filters and analytics
• Overview Page: Card-based dashboards
• 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;
    var sResult = formatter.formatPrice(fPrice);
    assert.strictEqual(sResult, "123.46 EUR", "Price formatted");
});

Integration Tests (OPA5)

Test user interactions and flows:

opaTest("Should navigate to detail page", function(Given, When, Then) {
    Given.iStartMyApp();
    When.onTheWorklistPage.iPressOnTheFirstListItem();
    Then.onTheObjectPage.iShouldSeeTheObjectPage();
    Then.iTeardownMyApp();
});

Mock Server

Simulate OData backend:

var oMockServer = new MockServer({
    rootUri: "/sap/opu/odata/sap/SERVICE_SRV/"
});
oMockServer.simulate("localService/metadata.xml", {
    sMockdataBaseUrl: "localService/mockdata"
});
oMockServer.start();

Reference: references/testing.md for comprehensive testing guide.

Best Practices

• Always Use Async - sap.ui.define, async:true in manifests
• Use XML Views - declarative and tooling-friendly
• Proper Namespacing - com.mycompany.myapp.controller.Main
• Internationalization - always use i18n for texts
• Data Binding Over Manual Updates - automatic XSS protection
• Security - enable CSP, validate input, use HTTPS
• Performance - component preload, lazy loading, batch requests
• Accessibility - semantic controls, labels, keyboard navigation

Common Patterns

CRUD Operations

// Create
oModel.create("/Products", oData, {success: function() {MessageToast.show("Created");}});

// Read
oModel.read("/Products", {filters: [new Filter("Price", FilterOperator.GT, 100)]});

// Update
oModel.update("/Products(1)", {Price: 200}, {success: function() {MessageToast.show("Updated");}});

// Delete
oModel.remove("/Products(1)", {success: function() {MessageToast.show("Deleted");}});

Filtering & Sorting

var oBinding = this.byId("table").getBinding("items");
oBinding.filter([new Filter("price", FilterOperator.GT, 100)]);
oBinding.sort([new Sorter("name", false)]);

Dialog Handling

if (!this.pDialog) {
    this.pDialog = this.loadFragment({
        name: "my.app.view.fragments.MyDialog"
    });
}
this.pDialog.then(function(oDialog) {oDialog.open();});

Troubleshooting Common Issues

Binding not working

• Check model set on view/component
• Verify correct binding path
• Confirm data loaded
• Debug: console.log(this.getView().getModel().getData())

OData call failing

• Verify service URL in manifest.json
• Check CORS configuration
• Test authentication
• Use browser Network tab

View not displaying

• Check view registration in manifest.json
• Verify routing configuration
• Match controller name
• Check browser console for errors

Performance problems

• Enable component preload
• Use growing lists for large datasets
• Implement OData paging
• Use one-way binding when possible

Development Tools

UI5 Tooling

ui5 serve    # Development server
ui5 build    # Build for production
npm test     # Run tests

UI5 Inspector

• Browser extension for debugging
• View control tree and bindings
• Performance analysis

Support Assistant

• Press Ctrl+Alt+Shift+S
• Built-in quality checker

Bundled Reference Files

This skill includes comprehensive reference documentation (15 files):

• references/glossary.md: Complete SAPUI5 terminology and concepts (100+ terms)
• references/core-architecture.md: Framework architecture, components, MVC, bootstrapping
• references/data-binding-models.md: Data binding, models, filters, sorters
• references/testing.md: QUnit, OPA5, mock server, test automation
• references/fiori-elements.md: Fiori Elements templates, annotations, configuration
• references/typescript-support.md: TypeScript setup, configuration, migration
• references/routing-navigation.md: Routing, navigation, Flexible Column Layout
• references/performance-optimization.md: Performance best practices, optimization
• references/accessibility.md: WCAG 2.1 compliance, screen readers, ARIA

10. references/security.md: XSS prevention, CSP, authentication, CSRF

11. references/mdc-typescript-advanced.md: MDC controls, TypeScript control libraries

12. references/mcp-integration.md: MCP setup, troubleshooting, and fallback behavior

13. references/code-quality-checklist.md: Review checklist for UI5 projects

14. references/migration-patterns.md: Upgrade and modernization patterns

15. references/scaffolding-templates.md: Project scaffolding guidance

Access these files for detailed information on specific topics while keeping the main skill concise.

Templates Included

Ready-to-use templates in templates/ directory:

• basic-component.js: Component.js template with best practices
• manifest.json: Complete application descriptor template
• xml-view.xml: XML view with common patterns
• controller.js: Controller template with lifecycle hooks
• formatter.js: Common formatter functions

Instructions for Claude

When using this skill:

• Always use async patterns - sap.ui.define, async:true
• Prefer XML views - more declarative and tooling-friendly
• Use data binding - automatic XSS protection
• Refer to reference files - for detailed information
• Use templates - copy from templates/ and replace placeholders
• Follow best practices - security, performance, accessibility
• Provide working examples - test code patterns before suggesting

Bundled Resources

Reference Documentation

• references/accessibility.md - Accessibility best practices
• references/core-architecture.md - Framework architecture and component patterns
• references/data-binding-models.md - Data binding and model usage
• references/fiori-elements.md - Fiori Elements templates and annotations
• references/mdc-typescript-advanced.md - MDC and TypeScript guidance
• references/mcp-integration.md - MCP setup and troubleshooting
• references/migration-patterns.md - Migration from older versions
• references/performance-optimization.md - Performance optimization techniques
• references/testing.md - Testing strategies and frameworks
• references/security.md - XSS, CSP, authentication, and CSRF guidance

Templates

• templates/basic-component.js - Component development template
• templates/controller.js - Controller template
• templates/xml-view.xml - XML view template
• templates/formatter.js - Formatter helper template
• templates/manifest.json - Application manifest template

License: GPL-3.0

Next Review: 2026-02-27 (Quarterly)