name	sap-fiori-tools
description	Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and SAP Business Application Studio. Use when: generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor for List Report or Object Page, working with annotations and Service Modeler, setting up deployment to ABAP or Cloud Foundry, creating adaptation projects, using Guided Development, previewing with mock data or live data, configuring SAP Fiori launchpad, or using AI-powered generation with Project Accelerator/Joule. Technologies: SAP Fiori Elements, SAPUI5, OData V2/V4, CAP, SAP BTP, ABAP, Cloud Foundry.
license	GPL-3.0
metadata	{"version":"1.0.0","last_verified":"2025-11-25"}

SAP Fiori Tools Development Skill

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

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:

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

name	sap-fiori-tools
description	Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and SAP Business Application Studio. Use when: generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor for List Report or Object Page, working with annotations and Service Modeler, setting up deployment to ABAP or Cloud Foundry, creating adaptation projects, using Guided Development, previewing with mock data or live data, configuring SAP Fiori launchpad, or using AI-powered generation with Project Accelerator/Joule. Technologies: SAP Fiori Elements, SAPUI5, OData V2/V4, CAP, SAP BTP, ABAP, Cloud Foundry.
license	GPL-3.0
metadata	{"version":"1.0.0","last_verified":"2025-11-25"}

SAP Fiori Tools Development Skill

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

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:

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

sap-fiori-tools

SAP Fiori Tools Development Skill

Overview

Sample Projects

Quick Start Commands

Application Generation

Fiori Elements Floorplans

Data Source Options

Generated Project Structure

Page Editor Configuration

List Report Page Elements

Object Page Elements

Extension-Based Elements (OData V4)

Annotations Development

Language Server Features

Supported Vocabularies

Annotation Files Location

Preview Options

NPM Scripts

Run Control

Mock Data

Deployment

ABAP Deployment

Cloud Foundry Deployment

Fiori Launchpad Configuration

Adaptation Projects

Prerequisites

Adaptation Workflow

Adaptation Capabilities

AI-Powered Generation

Project Accelerator / Joule

AI Mock Data Generation

Project Functions

Project Validation Checks

Building Blocks (OData V4)

Troubleshooting

Common Issues

CLI Help

Migration from SAP Web IDE

Guided Development (76+ Guides)

Reference Documentation

Documentation Sources

SAP Fiori Tools Development Skill

Overview

Sample Projects

Quick Start Commands

Application Generation

Fiori Elements Floorplans

Data Source Options

Generated Project Structure

Page Editor Configuration

List Report Page Elements

Object Page Elements

Extension-Based Elements (OData V4)

Annotations Development

Language Server Features

Supported Vocabularies

Annotation Files Location

Preview Options

NPM Scripts

Run Control

Mock Data

Deployment

ABAP Deployment

Cloud Foundry Deployment

Fiori Launchpad Configuration

Adaptation Projects

Prerequisites

Adaptation Workflow

Adaptation Capabilities

AI-Powered Generation

Project Accelerator / Joule

AI Mock Data Generation

Project Functions

Project Validation Checks

Building Blocks (OData V4)

Troubleshooting

Common Issues

CLI Help

Migration from SAP Web IDE