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

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.

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