Sap Fiori Tools Agent Skill

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
• Sample Projects
• Quick Start Commands
• Application Generation
• Page Editor Configuration
• Annotations Development
• MCP Tools (AI-Assisted Development)
• 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

| 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

• SAP System - Connect to ABAP on-premise or BTP systems
• CAP Project - Use local Node.js or Java CAP project
• EDMX File - Upload metadata for mock-only development
• 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

• Create adaptation project via Template Wizard
• Make UI adaptations in Adaptation Editor
• Preview adaptation
• 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

• Project - Verify package.json, manifest.json, ui5.yaml
• Annotation - Validate annotation files
• Specification - Check manifest and changes folder
• 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/[email protected]; 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

• Use search_docs to find annotation patterns or Fiori Elements configuration options
• Use list_fiori_apps to discover apps in the current workspace
• Use list_functionalities to see what modifications are supported
• Use get_functionality_details to understand required parameters
• 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:

• Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/
• SAP Help Portal: https://help.sap.com/docs/SAP_FIORI_tools