Sap Fiori Tools

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:

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

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

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)

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: