---
name: secondsky/sap-fiori-tools
source: https://app.decimal.ai/s/secondsky-sap-fiori-tools@2/SKILL.md
source_sha256: b6e7df40097f
---

# SAP Fiori Tools Development Skill

## Related Skills

- **sapui5**: Use for underlying UI5 framework details, custom control development, and advanced UI patterns
- **sap-cap-capire**: Use for CAP service integration, OData consumption, and backend service configuration
- **sap-abap-cds**: Use when consuming ABAP CDS views as OData services or working with ABAP backends
- **sap-btp-cloud-platform**: Use for deployment targets, BTP destination configuration, and Cloud Foundry deployment
- **sap-api-style**: Use when documenting OData APIs or following API documentation standards for Fiori apps
- **sap-dependency-security**: Use when tightening npm/JavaScript supply-chain controls, exact MCP server pins, and dependency updates

## When to Use This Skill

Use this skill when generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor/List Report/Object Page behavior, editing annotations, previewing with mock or live data, deploying to ABAP or Cloud Foundry, building adaptation projects, or using Fiori MCP/generation tooling.

Comprehensive guidance for developing SAP Fiori applications using SAP Fiori tools extensions.

## Table of Contents
- [Overview](#overview)
- [Sample Projects](#sample-projects)
- [Quick Start Commands](#quick-start-commands)
- [Application Generation](#application-generation)
- [Page Editor Configuration](#page-editor-configuration)
- [Annotations Development](#annotations-development)
- [MCP Tools (AI-Assisted Development)](#mcp-tools-ai-assisted-development)
- [Bundled Resources](#bundled-resources)

## Overview

SAP Fiori tools is a collection of extensions that simplifies SAP Fiori elements and SAPUI5 application development. It includes six main components:

| Component | Purpose |
|-----------|---------|
| **Application Wizard** | Generate Fiori Elements and Freestyle SAPUI5 templates |
| **Application Modeler** | Visual Page Map and Page Editor for configuration |
| **Guided Development** | Step-by-step feature implementation guides |
| **Service Modeler** | Visualize OData service metadata and annotations |
| **Annotations Language Server** | Code completion, diagnostics, i18n for annotations |
| **Environment Check** | Validate setup and destination configurations |

**Minimum SAPUI5 Version**: 1.65+
**Support Component**: CA-UX-IDE

## Sample Projects

Official SAP sample repository with Fiori Elements applications built using SAP Fiori tools:

**Repository**: [SAP-samples/fiori-tools-samples](https://github.com/SAP-samples/fiori-tools-samples)

| Folder | Content |
|--------|---------|
| `V2/` | OData V2 Fiori Elements samples |
| `V4/` | OData V4 Fiori Elements samples |
| `cap/` | CAP project integration samples |
| `app-with-tutorials/` | Tutorial companion projects |

**Quick Start**:
```bash
git clone https://github.com/SAP-samples/fiori-tools-samples
cd fiori-tools-samples/V4/apps/salesorder
npm install
npm start
```

---

## Quick Start Commands

Access features via Command Palette (`Cmd/Ctrl + Shift + P`):

```
Fiori: Open Application Generator       # Create new application
Fiori: Open Application Info            # View project commands
Fiori: Open Page Map                    # Visual navigation editor
Fiori: Open Guided Development          # Feature implementation guides
Fiori: Open Service Modeler             # Explore OData service
Fiori: Add Deployment Configuration     # Setup ABAP or CF deployment
Fiori: Add Fiori Launchpad Configuration # Configure FLP tile
Fiori: Validate Project                 # Run project validation
Fiori: Open Environment Check           # Troubleshoot destinations
```

## Application Generation

### Fiori Elements Floorplans

| Floorplan | OData V2 | OData V4 | Use Case |
|-----------|----------|----------|----------|
| List Report Page | Yes | Yes | Browse large datasets, navigate to details |
| Worklist Page | Yes | 1.99+ | Process work items, task completion |
| Analytical List Page | Yes | 1.90+ | Data analysis, KPI visualization |
| Overview Page | Yes | Yes | Role-based dashboards, multi-card views |
| Form Entry Object Page | Yes | Yes | Structured data entry |
| Custom Page | No | Yes | Extensible custom UI with building blocks |

### Data Source Options

1. **SAP System** - Connect to ABAP on-premise or BTP systems
2. **CAP Project** - Use local Node.js or Java CAP project
3. **EDMX File** - Upload metadata for mock-only development
4. **SAP Business Accelerator Hub** - Development/testing only (deprecated)

### Generated Project Structure

```
webapp/
  ├── manifest.json          # App descriptor
  ├── Component.js           # UI5 component
  ├── localService/          # Mock data and metadata
  │   ├── metadata.xml
  │   └── mockdata/
  └── annotations/           # Local annotation files
package.json
ui5.yaml                     # UI5 tooling config
ui5-local.yaml               # Local development config
```

## Page Editor Configuration

The Page Editor provides visual configuration for Fiori Elements pages.

### List Report Page Elements

- **Filter Fields** - Configure filter bar with value helps
- **Table** - Configure columns, actions, row selection
- **Multiple Views** - Create tabbed table views
- **Analytical Chart** - Add data visualizations

### Object Page Elements

- **Header** - Configure header facets and actions
- **Sections** - Form, Table, Identification, Chart, Group sections
- **Footer** - Configure footer actions

### Extension-Based Elements (OData V4)

| Element | Location | Description |
|---------|----------|-------------|
| Custom Column | Table | Add custom columns with fragments |
| Custom Section | Object Page | Add custom sections with views |
| Custom Action | Header/Table | Add action buttons with handlers |
| Custom View | List Report | Add custom tab views |
| Controller Extension | Page | Override lifecycle methods |

For detailed configuration, see `references/page-editor.md`.

## Annotations Development

### Language Server Features

- **Code Completion** (`Ctrl/Cmd + Space`) - Context-aware suggestions
- **Micro-Snippets** - Insert complete annotation blocks
- **Diagnostics** - Validation against vocabularies
- **i18n Support** - Externalize translatable strings
- **Peek/Go to Definition** - Navigate to annotation sources

### Supported Vocabularies

OASIS OData v4: Core, Capabilities, Aggregation, Authorization, JSON, Measures, Repeatability, Temporal, Validation

SAP Vocabularies: Analytics, CodeList, Common, Communication, DataIntegration, DirectEdit, Graph, Hierarchy, HTML5, ODM, PDF, PersonalData, Preview, Session, UI

### Annotation Files Location

- **CDS files**: CAP project `.cds` files
- **XML files**: `webapp/annotations/*.xml`

For annotation patterns, see `references/annotations.md`.

## Preview Options

### NPM Scripts

```bash
npm start           # Live data from backend
npm run start-mock  # Mock data via MockServer
npm run start-local # Mock data + local SAPUI5 resources
npm run start-noflp # Without Fiori launchpad sandbox
```

### Run Control

Configure via `launch.json` in `.vscode/` folder. Supports:
- Multiple run configurations per workspace
- VS Code and BAS integration
- App-to-app navigation preview

### Mock Data

- **Data Editor** - Visual mock data management
- **AI Generation** - Generate contextual mock data (requires SAP Build Code)
- **MockServer** - Automatic mock server setup

For preview details, see `references/preview.md`.

## Deployment

### ABAP Deployment

**Prerequisites**:
- SAP_UI 7.53+
- SAPUI5 ABAP Repository service enabled
- S_DEVELOP authorization

**Configuration**:
```bash
npx fiori add deploy-config    # Generate ui5-deploy.yaml
npm run deploy                  # Execute deployment
```

**Generated Files**: `ui5-deploy.yaml`, updated `package.json`

### Cloud Foundry Deployment

**Prerequisites**:
- MTA tool: `npm i -g mta`
- CF CLI with multiapps plugin
- HTML5 Repository service instance

**Configuration**:
```bash
npx fiori add deploy-config    # Select Cloud Foundry
npm run build                   # Generate mta.yaml
npm run deploy                  # Deploy to CF
```

**Generated Files**: `mta.yaml`, `xs-app.json`, `xs-security.json`

For deployment details, see `references/deployment.md`.

## Fiori Launchpad Configuration

Add FLP tile configuration via:
```
Fiori: Add Fiori Launchpad Configuration
```

**Required Parameters**:
- Semantic Object (unique identifier)
- Action (e.g., "display")
- Title
- Subtitle (optional)

Configuration updates `manifest.json` with inbound navigation.

## Adaptation Projects

Extend existing Fiori applications without modifying source code.

### Prerequisites

**On-Premise (VS Code)**:
- SAP_UI 7.54+, SAPUI5 1.72+
- Base app must have manifest.json
- Cannot use ABAP Cloud packages

**S/4HANA Cloud & BTP ABAP**:
- Application must be "released for extensibility"
- 3-system landscape with developer tenant
- Required business catalogs assigned

### Adaptation Workflow

1. Create adaptation project via Template Wizard
2. Make UI adaptations in Adaptation Editor
3. Preview adaptation
4. Deploy to ABAP repository

### Adaptation Capabilities

| Adaptation | Description |
|------------|-------------|
| Control Variants | Create page variants/views |
| Fragments | Add UI fragments to extension points |
| Controller Extensions | Override/extend controller methods |
| App Descriptor Changes | Modify manifest.json settings |
| OData Service | Add/replace OData services |
| Component Usages | Add SAPUI5 component references |

For adaptation details, see `references/adaptation-projects.md`.

## AI-Powered Generation

### Project Accelerator / Joule

Generate complete CAP projects with Fiori UI from business requirements.

**Input Formats**: Text, Images, or Combined

**Generated Output**:
- Entity definitions and associations
- Code lists and value helps
- List Report applications
- Object Page configurations
- Sample data

**Limitations**:
- No charts or specialized headers
- Do not include personal/sensitive data in requirements

### AI Mock Data Generation

Generate contextual mock data using entity property names (requires SAP Build Code subscription).

## Project Functions

| Function | Command |
|----------|---------|
| Application Info | `Fiori: Open Application Info` |
| Project Validation | `Fiori: Validate Project` |
| Environment Check | `Fiori: Open Environment Check` |
| Data Editor | Via Application Info page |
| Service Metadata | `Fiori: Open Service Modeler` |
| System Connections | Manage SAP Systems in VS Code |

### Project Validation Checks

1. **Project** - Verify package.json, manifest.json, ui5.yaml
2. **Annotation** - Validate annotation files
3. **Specification** - Check manifest and changes folder
4. **ESLint** - Run ESLint if configured

## Building Blocks (OData V4)

Reusable UI components for custom pages and sections:

| Block | Use Case |
|-------|----------|
| Chart | Data visualization |
| Filter Bar | Query filtering |
| Table | Tabular data display |
| Page | Custom page container |
| Rich Text Editor | Content editing in custom sections |

## Troubleshooting

### Common Issues

**Port 8080 in use**: System auto-selects next available port

**HTTPS/SSL errors**: Configure browser to trust localhost certificates

**Deployment 400 errors**: Check `/IWFND/ERROR_LOG`, configure virus scan in `/IWFND/VIRUS_SCAN`

**Debug deployment**:
```bash
# macOS/Linux
DEBUG=ux-odata-client npm run deploy

# Windows
set DEBUG=ux-odata-client & npm run deploy
```

### CLI Help

```bash
npx fiori help              # List available commands
npx fiori deploy help       # Deployment command help
```

## Migration from SAP Web IDE

Migrate existing projects using:
```
Fiori: Migrate Project for use in Fiori tools
```

**Supported Types**: Fiori Elements (V2/V4), Freestyle SAPUI5, Adaptation Projects, Extensibility Projects

**Post-Migration**: Run `npm run deploy-config` to update deployment configuration.

For migration details, see `references/getting-started.md`.

## Guided Development (76+ Guides)

Access step-by-step implementation guides:
```
Fiori: Open Guided Development
```

**Guide Categories**:
- Building Blocks (Chart, Filter Bar, Table)
- Page Elements (Cards, Header Facets, Sections)
- Table Enhancements (Column types, Actions)
- Filtering & Navigation
- Configuration (Variant management, Side effects)
- Extensions (Custom actions, sections, columns)

## Reference Documentation

For detailed information on specific topics:

---

## MCP Tools (AI-Assisted Development)

The `fiori-tools` MCP server (`@sap-ux/fiori-mcp-server`) integrates AI coding assistants
directly with Fiori development, providing semantic documentation search and programmatic
app generation.

**Prerequisite**: Node.js 20+. No authentication required. The bundled MCP config pins `@sap-ux/fiori-mcp-server@1.11.7`; MCP package pins are governed by **sap-dependency-security** and validated by `npm run validate:mcp-security`.

### Available Tools

| Tool | Description |
|------|-------------|
| `search_docs` | Semantic search across Fiori Elements, Annotations, UI5, and Fiori tools docs |
| `list_fiori_apps` | Scan a directory to identify existing Fiori apps available for modification |
| `list_functionalities` | Return supported operations for creating or modifying applications |
| `get_functionality_details` | Retrieve required parameters for a specific operation |
| `execute_functionality` | Execute the creation or modification with provided parameters |

### Typical Workflow

1. Use `search_docs` to find annotation patterns or Fiori Elements configuration options
2. Use `list_fiori_apps` to discover apps in the current workspace
3. Use `list_functionalities` to see what modifications are supported
4. Use `get_functionality_details` to understand required parameters
5. Use `execute_functionality` to apply the change

### Complementary MCP Servers

SAP recommends using alongside:
- **sapui5** skill: includes `@ui5/mcp-server` for UI5 framework tooling
- **sap-cap-capire** skill: includes `@cap-js/mcp-server` for CAP backend

---

## Bundled Resources

### Reference Documentation
- `references/getting-started.md` - Installation, migration, ADT integration, commands
- `references/configuration.md` - MTA, middlewares, SAPUI5 versions, project functions
- `references/page-editor.md` - Page Editor configuration details
- `references/annotations.md` - Annotation patterns and examples
- `references/deployment.md` - Deployment configuration details
- `references/adaptation-projects.md` - Adaptation project workflows
- `references/preview.md` - Preview and testing options

## Documentation Sources

**Primary Source**: [https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs](https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs)

**Last Updated**: 2025-11-22

| Section | Documentation Link |
|---------|-------------------|
| Getting Started | `Getting-Started-with-SAP-Fiori-Tools/` |
| Generating Apps | `Generating-an-Application/` |
| Developing | `Developing-an-Application/` |
| Previewing | `Previewing-an-Application/` |
| Deploying | `Deploying-an-Application/` |
| Project Functions | `Project-Functions/` |
| Adaptation Projects | Root docs folder |

**SAP Resources**:
- Fiori Design Guidelines: [https://experience.sap.com/fiori-design-web/](https://experience.sap.com/fiori-design-web/)
- SAP Help Portal: [https://help.sap.com/docs/SAP_FIORI_tools](https://help.sap.com/docs/SAP_FIORI_tools)