Agent-Skills.md

Agent Skills: SAP Fiori Tools Development Skill

|

UncategorizedID: secondsky/sap-skills/sap-fiori-tools

Repository

secondsky/sap-skills
secondskyLicense: GPL-3.0
18243

Install this agent skill to your local

pnpm dlx add-skill https://github.com/secondsky/sap-skills/tree/HEAD/plugins/sap-fiori-tools/skills/sap-fiori-tools

Skill Files

Browse the full folder contents for sap-fiori-tools.

Download Skill

Loading file tree…

plugins/sap-fiori-tools/skills/sap-fiori-tools/SKILL.md

Skill Metadata

Name
sap-fiori-tools
Description
|

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

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

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

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

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:

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:

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:

# macOS/Linux
DEBUG=ux-odata-client npm run deploy

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

CLI Help

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.4.0; 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

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: