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
- **dependency-upgrade**: Use for secure dependency upgrades, lockfile policies, and supply-chain controls in SAPUI5 frontend toolchains

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).

**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:

```bash
# 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):
```javascript
var oModel = new JSONModel({
    products: [...]
});
this.getView().setModel(oModel);
```

**OData V2 Model** (server-side):
```javascript
"": {
    "dataSource": "mainService",
    "settings": {
        "defaultBindingMode": "TwoWay",
        "useBatch": true
    }
}
```

**Resource Model** (i18n):
```javascript
"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):
```xml
<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**:
```javascript
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**:
```json
{
    "sap.ui5": {
        "dependencies": {
            "libs": {
                "sap.fe.templates": {}
            }
        },
        "routing": {
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "name": "sap.fe.templates.ListReport",
                    "options":