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:

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

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

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:

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

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

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 Skill

Comprehensive Claude Code skill for SAP Fiori application development using SAP Fiori tools extensions.

Capability Index

Overview

This skill provides guidance for developing SAP Fiori applications using SAP Fiori tools - the official SAP development toolkit for VS Code and SAP Business Application Studio.

Auto-Trigger Keywords

This skill activates when discussing:

Tools & Extensions

• SAP Fiori tools
• Fiori tools
• Application Wizard
• Application Modeler
• Page Map
• Page Editor
• Guided Development
• Service Modeler
• Annotations Language Server
• Environment Check

Application Types

• SAP Fiori Elements
• Fiori Elements
• SAPUI5 Freestyle
• List Report
• Object Page
• Analytical List Page
• Overview Page
• Worklist
• Form Entry Object Page
• Custom Page

Generation & Templates

• Fiori: Open Application Generator
• Application Generator
• Template Wizard
• Fiori Elements generator
• SAPUI5 generator
• generate Fiori app
• create Fiori application
• Fiori template

Page Editor & Configuration

• configure List Report
• configure Object Page
• Page Editor properties
• filter fields
• table columns
• table actions
• header facets
• object page sections
• form section
• table section
• chart section

Annotations

• OData annotations
• UI annotations
• annotation language server
• code completion annotations
• micro-snippets
• annotation diagnostics
• Service Modeler
• override annotations
• local annotations
• XML annotations
• CDS annotations

Building Blocks

• Fiori Elements building blocks
• Chart building block
• FilterBar building block
• Table building block
• custom page building blocks

Extension Development

• custom columns
• custom sections
• custom actions
• custom views
• controller extensions
• extension-based elements

Preview & Testing

• Fiori preview
• npm start
• start-mock
• start-local
• MockServer
• mock data
• live data preview
• Run Control
• launch.json
• app-to-app navigation
• SAP Horizon theme
• Data Editor

Deployment

• deploy Fiori app
• ABAP deployment
• Cloud Foundry deployment
• ui5-deploy.yaml
• mta.yaml
• Fiori Launchpad configuration
• FLP configuration
• HTML5 Repository
• SAPUI5 ABAP Repository

Adaptation Projects

• adaptation project
• extend Fiori application
• application variant
• Adaptation Editor
• fragments
• extension points
• controller extension
• upgrade-safe
• on-premise extension
• S/4HANA Cloud extension

AI Generation

• Project Accelerator
• Joule Fiori
• AI mock data
• generate app from text
• generate app from image

Project Functions

• Application Information
• Project Validation
• Environment Check
• system connections
• SAP system connection
• service metadata
• reuse library

IDEs & Setup

• VS Code Fiori
• Business Application Studio
• BAS Fiori
• dev space
• Fiori dev space

Configuration Files

• manifest.json
• ui5.yaml
• ui5-local.yaml
• xs-app.json
• package.json Fiori

Errors & Troubleshooting

• CA-UX-IDE
• deployment error
• preview error
• MockServer error
• annotation error

Sample Projects

• fiori-tools-samples
• SAP Fiori samples GitHub
• Fiori Elements sample projects
• SAP-samples Fiori

Installation

Copy the sap-fiori-tools folder to your Claude Code skills directory:

# User skills (personal)
~/.claude/skills/sap-fiori-tools/

# Project skills (team)
.claude/skills/sap-fiori-tools/

Usage

The skill automatically activates when you ask about SAP Fiori tools topics. Examples:

• "Generate a new Fiori Elements List Report application"
• "Configure the Page Editor for Object Page"
• "How do I deploy my Fiori app to ABAP?"
• "Create an adaptation project for an existing app"
• "Set up mock data for preview"
• "Add a custom column to the table"

Skill Structure

Documentation Sources

Primary: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs

SAP Help Portal: https://help.sap.com/docs/SAP_FIORI_tools

Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/

Version Information

• Skill Version: 1.0.0
• Documentation Source Date: 2025-11-22
• Minimum SAPUI5 Version: 1.65+

Covered Topics

Getting Started

• Installation (VS Code, BAS)
• System requirements
• SAP system connections
• Environment setup

Application Generation

• Fiori Elements floorplans (6 types)
• SAPUI5 Freestyle templates
• Data source configuration
• CAP project integration

Development

• Page Map and Page Editor
• Annotation support
• Building blocks (OData V4)
• Extension-based elements
• Guided Development
• Internationalization (i18n)

Preview & Testing

• NPM scripts
• Run Control configuration
• Mock data management
• AI mock data generation
• App-to-app navigation
• External FLP preview

Deployment

• ABAP repository deployment
• Cloud Foundry deployment
• Fiori Launchpad configuration
• Security configuration

Adaptation Projects

• On-premise systems
• S/4HANA Cloud
• BTP ABAP Environment
• Controller extensions
• Fragments and extension points
• Upgrade-safe rules

AI Features

• Project Accelerator
• Joule integration
• Text/image-based generation

License

GPL-3.0

Maintainer

SAP Skills Repository | https://github.com/secondsky/sap-skills

Adaptation Projects Reference

Comprehensive reference for creating and managing SAP Fiori adaptation projects.

Table of Contents

1. Overview 2. On-Premise Systems 3. S/4HANA Cloud and BTP ABAP 4. Creating Adaptation Projects 5. Adaptation Capabilities 6. Controller Extensions 7. Fragments and Extension Points 8. Preview and Testing 9. Deployment 10. Upgrade-Safe Rules

---

Overview

Adaptation projects allow extending existing SAP Fiori applications without modifying source code. They create application variants that maintain separation from the original application.

Benefits

• Non-invasive extensions
• Independent lifecycle from base application
• Upgrade-safe modifications
• Version control support

Supported Environments

---

On-Premise Systems

Prerequisites

Limitations

• Cannot use ABAP Cloud Development packages
• Apps with mandatory startup parameters unsupported
• Previously deployed application variants cannot serve as bases
• Apps using sap.ca.scfld.md scaffolding unsupported

Required Services

Enable and activate:

• /sap/bc/adt - ABAP Development Tools
• /sap/bc/ui2/app_index/ - Application Index

Grant access to:

• /sap/bc/adt/discovery

Workflow

1. Create adaptation project 2. (Optional) Initialize Git repository 3. Make adaptations 4. Preview adaptation project 5. Deploy to ABAP repository

---

S/4HANA Cloud and BTP ABAP

Prerequisites

SAP S/4HANA Cloud:

• Verify extensibility support in SAP Fiori Apps Reference Library
• 3-system landscape with developer tenant required
• Submit enhancement requests via Influence Opportunity Homepage if needed

Both Environments:

• Source application must be "released for extensibility"
• Destination to development tenant configured
• Required business catalogs assigned

Required Business Catalogs

Destination Configuration

Create destination in BTP Cockpit pointing to development tenant with appropriate authentication.

---

Creating Adaptation Projects

Via Template Wizard

1. Open Command Palette: Cmd/Ctrl + Shift + P 2. Execute: Fiori: Open Template Wizard 3. Select "Adaptation Project" tile 4. Configure project settings

Configuration Fields

Via Generator Command

Fiori: Open Adaptation Project Generator

Add Deployment Configuration

Optional during creation or added later via:

Fiori: Add Deployment Configuration

---

Adaptation Capabilities

UI Adaptations

Structural Changes

Configuration Changes

Adaptation Editor UI Operations

Access: Right-click manifest.appdescr_variant > "Open Adaptation Editor"

Note: Removed fields remain available for re-adding. Mandatory fields require confirmation.

Quick Actions Availability Matrix

Quick actions vary by SAPUI5 version. Key milestones:

---

Controller Extensions

Purpose

Enhance existing controller functionality with:

• New methods
• Override methods
• Lifecycle hooks

File Structure

webapp/
├── changes/
│   ├── coding/
│   │   └── MyExtension.js
│   └── MyExtension.controllerExtension.change

Extension Template

sap.ui.define([
    "sap/ui/core/mvc/ControllerExtension"
], function(ControllerExtension) {
    "use strict";

    return ControllerExtension.extend("customer.project.extension.MyExtension", {
        // Override member for lifecycle and base methods
        override: {
            // Lifecycle methods
            onInit: function() {
                // Called after base controller onInit
            },
            onBeforeRendering: function() {
                // Called before view rendering
            },
            onAfterRendering: function() {
                // Called after view rendering
            },
            onExit: function() {
                // Called on controller destruction
            }
        },

        // Custom methods (outside override)
        myCustomMethod: function(oEvent) {
            // Custom business logic
        }
    });
});

Event Handler Binding

For methods in XML fragments, use prefix:

.extension.<controller extension namespace>

Example:

<Button press=".extension.customer.project.extension.MyExtension.myCustomMethod"/>

Provided Methods by Template

Important Rules

• Keep custom code in changes/coding/ folder
• Do not create additional folders at higher levels
• Namespace extensions with .extension to avoid conflicts

---

Fragments and Extension Points

Adding Fragments to Aggregations

1. Open Adaptation Editor 2. Click Edit mode 3. Select target control (smart filter bar, toolbar, etc.) 4. Choose "Add Fragment" from context menu 5. Configure fragment settings

Quick Actions:

• Add Custom Page Action
• Add Custom Table Action
• Add Custom Table Column
• Add Header Field
• Add Custom Section

Fragment Configuration

Fragment Template

<core:FragmentDefinition
    xmlns:core="sap.ui.core"
    xmlns:uxap="sap.uxap"
    xmlns="sap.m">
    <uxap:ObjectPageSection id="customer.project.customSection" title="Custom Section">
        <uxap:subSections>
            <uxap:ObjectPageSubSection>
                <Text text="Custom content"/>
            </uxap:ObjectPageSubSection>
        </uxap:subSections>
    </uxap:ObjectPageSection>
</core:FragmentDefinition>

Requirements

• Define namespace for all controls used
• Use stable and unique IDs
• IDs should follow pattern: customer.<project>.<elementId>

Adding Fragments to Extension Points

For freestyle SAPUI5 applications with predefined extension points:

1. Expand outline tree to find extension points 2. Right-click parent element 3. Select "Add fragment at extension point" 4. Configure fragment

Generated Files

• Fragment: webapp/changes/fragments/<name>.fragment.xml
• Change: webapp/changes/addXML.change

Cleanup

Delete associated change files when removing fragments to avoid blocking future additions.

---

Preview and Testing

Launch Preview

Fiori: Preview Adaptation Project

Or via Application Info page.

Preview Characteristics

• Runs in sandbox-like environment
• Outside SAP Fiori launchpad context
• Some FLP-dependent features may not work
• Features work correctly after deployment

Testing Adaptations

1. Make changes in Adaptation Editor 2. Preview immediately reflects changes 3. Test functionality in preview 4. Deploy only when satisfied

---

Deployment

On-Premise Deployment

Deploy to ABAP repository using standard deployment:

npm run deploy

S/4HANA Cloud Deployment

Use Adaptation Project Deployment Wizard:

Fiori: Deploy Adaptation Project

Post-Deployment

• Application variant appears in Fiori launchpad
• Independent tile/navigation configuration possible
• Base application updates do not affect deployed variant

---

Upgrade-Safe Rules

Core Principles

SAPUI5 Flexibility uses modification-free extensibility:

• Extension code separated from base application lifecycle
• Base application can upgrade independently
• Extensions remain functional across upgrades

Controller Extension Rules

1. Follow SAPUI5 best practices 2. Access only controls with stable IDs

• Never rely on control order in aggregations
• Never rely on parent-child relationships

3. Verify control existence before access

• Check if control exists
• Verify control type

4. Avoid private/protected methods

• Do not call or override private methods
• Do not use deprecated artifacts

5. No hardcoded property values

• OData metadata values change during upgrades
• Do not use value help entity sets in code

6. Handle reuse component changes

• Implement robust error handling
• Components may change during upgrades

Fragment Rules

• Use stable IDs with proper namespacing
• Do not reference controls by position
• Handle missing extension points gracefully

---

Checking Compatibility

Base App Upgrade Check

Fiori: Check Base App Upgrades

Verifies if adaptation project is current with base application updates.

Release State Consistency

Fiori: Check Consistency of Release State

Validates that adaptations align with released application state.

---

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs

Key files:

• extending-an-existing-application-6e25aca.md
• extending-an-sap-fiori-application-for-an-on-premise-system-802f01c.md
• extending-an-sap-fiori-application-for-sap-s-4hana-cloud-public-edition-and-sap-btp-abap-f4881a9.md
• creating-an-adaptation-project-072f566.md
• controller-extensions-ad7b4ae.md
• add-fragments-to-an-aggregation-or-extension-point-6033d56.md
• upgrade-safe-compatibility-rules-53706e2.md
• making-adaptations-2a076dd.md
• previewing-an-adaptation-project-64cc15b.md
• deploying-an-adaptation-project-to-the-abap-repository-febf0d9.md

Annotations Reference

Comprehensive reference for working with annotations in SAP Fiori tools.

Table of Contents

1. Language Server Features 2. Supported File Types 3. Supported Vocabularies 4. Code Completion 5. Micro-Snippets 6. Diagnostics 7. Internationalization 8. Service Modeler 9. Common Annotation Patterns

---

Language Server Features

SAP Fiori tools provides two annotation language servers:

Capabilities

• Code completion for annotation targets, terms, attributes, values
• Validation against OData vocabularies and project metadata
• Navigation to referenced annotations
• Quick vocabulary information views
• Internationalization (i18n) support

---

Supported File Types

CDS Annotation Files

Location: CAP project .cds files

annotate CatalogService.Products with @(
    UI: {
        HeaderInfo: {
            TypeName: 'Product',
            TypeNamePlural: 'Products',
            Title: { Value: name }
        },
        LineItem: [
            { Value: ID },
            { Value: name },
            { Value: price }
        ]
    }
);

XML Annotation Files

Location: webapp/annotations/*.xml

Prerequisites: 1. OData Service with local metadata copy 2. Path specified in manifest.json as local Uri 3. Metadata contains <edm:Schema> definitions 4. Single EntityContainer in metadata 5. Valid XML file with </edmx:DataServices/Schema> nodes

Manifest Configuration:

{
  "sap.app": {
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/SERVICE/",
        "type": "OData",
        "settings": {
          "localUri": "localService/metadata.xml",
          "annotations": ["annotation"]
        }
      },
      "annotation": {
        "type": "ODataAnnotation",
        "uri": "annotations/annotation.xml"
      }
    }
  }
}

---

Supported Vocabularies

OASIS OData v4 Vocabularies

SAP OData Vocabularies

---

Code Completion

Activation

• Windows: Ctrl + Space
• macOS: Cmd + Space

Context-Aware Suggestions

Code completion provides suggestions based on:

• Project metadata (entities, properties, associations)
• OData vocabulary definitions
• Current cursor context

Path Navigation

Use / character to: 1. Accept current segment selection 2. Trigger completion for next segment 3. Navigate multi-segment annotation paths

Supported Contexts

• Annotation targets
• Terms and term values
• Attributes and attribute values
• Record properties
• Path expressions

---

Micro-Snippets

Pre-defined code blocks for rapid annotation development.

Available Snippets

Record Snippet Types

1. Minimal Version: Only mandatory properties (nullable=false) 2. Complete Version: All available properties

Usage Example

Within <Schema> tags: 1. Trigger code completion 2. Select annotation target snippet 3. Cursor positions inside quotes for immediate target selection

---

Diagnostics

Validation Scope

The language server validates:

• Annotation syntax
• Vocabulary compliance
• Metadata references
• Property types and values

Message Types

Accessing Diagnostics

1. Hover: Mouse over highlighted sections 2. Problems Panel: View > Problems (all issues)

Quick Fixes

Light bulb icon provides automatic fixes:

• Missing required properties
• Type mismatches
• Value corrections

Limitations

Not Supported:

• Annotations embedded in metadata
• Dynamic expressions
• Backend annotation file modifications (local copies only)

---

Internationalization

Configuration

Non-CAP Projects:

// webapp/manifest.json
{
  "sap.ui5": {
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "project.i18n.i18n"
        }
      }
    }
  }
}

CAP Projects:

// .cdsrc.json or package.json
{
  "i18n": {
    "folders": ["_i18n", "i18n", "assets/i18n"]
  }
}

Key Naming Conventions

i18n Scenarios

1. Non-internationalized labels: Convert to i18n key references 2. Missing i18n keys: Auto-generate with matching values 3. Duplicate text: Link to existing i18n entries

Mass i18n Generation

Bulk externalization of multiple UI texts: 1. Access via Page Editor or annotation file 2. Select multiple translatable strings 3. Generate keys in batch operation

Best Practice

Handle i18n near project completion to minimize unused entries and reduce localization costs.

---

Service Modeler

Purpose

Visualize OData service metadata and annotations for exploration and overriding.

Launching

• Command Palette: Fiori: Open Service Modeler
• Context Menu: Right-click folder > "Override Annotations"
• Editor: Click icon when metadata.xml is open

Features

Annotation Display:

• View backend and local annotation files
• Local annotations override backend annotations
• Search annotations by term or target

Source Navigation:

• "Show in Source" icon opens original file
• Highlighting for context

Editing Annotations

Backend annotations cannot be modified directly. Local annotations:

• Location: /webapp/annotations/<filename>.xml
• Edit via XML Code Editor
• Delete using Service Modeler delete icon

Override Priority

Local annotations win over backend annotations when:

• Same annotation term
• Same qualifier
• Same target

---

Common Annotation Patterns

List Report Line Item

<Annotations Target="Namespace.EntityType">
    <Annotation Term="UI.LineItem">
        <Collection>
            <Record Type="UI.DataField">
                <PropertyValue Property="Value" Path="PropertyName"/>
                <PropertyValue Property="Label" String="Column Label"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>

Selection Fields (Filter Bar)

<Annotation Term="UI.SelectionFields">
    <Collection>
        <PropertyPath>Property1</PropertyPath>
        <PropertyPath>Property2</PropertyPath>
    </Collection>
</Annotation>

Header Info

<Annotation Term="UI.HeaderInfo">
    <Record Type="UI.HeaderInfoType">
        <PropertyValue Property="TypeName" String="Entity"/>
        <PropertyValue Property="TypeNamePlural" String="Entities"/>
        <PropertyValue Property="Title">
            <Record Type="UI.DataField">
                <PropertyValue Property="Value" Path="Name"/>
            </Record>
        </PropertyValue>
    </Record>
</Annotation>

Object Page Facets

<Annotation Term="UI.Facets">
    <Collection>
        <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Label" String="General"/>
            <PropertyValue Property="ID" String="GeneralFacet"/>
            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#General"/>
        </Record>
    </Collection>
</Annotation>

Field Group

<Annotation Term="UI.FieldGroup" Qualifier="General">
    <Record Type="UI.FieldGroupType">
        <PropertyValue Property="Data">
            <Collection>
                <Record Type="UI.DataField">
                    <PropertyValue Property="Value" Path="Property1"/>
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>

---

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs/Developing-an-Application

Key files:

• maintaining-annotations-with-language-server-6fc93f8.md
• code-completion-dd4fc3b.md
• micro-snippets-addf811.md
• diagnostics-1fd8f54.md
• internationalization-i18n-eb427f2.md
• visualizing-annotations-with-service-modeler-58784b5.md
• working-with-annotations-55bfb91.md
• overriding-annotations-2f1bb9c.md

Configuration Reference

Comprehensive reference for configuring SAP Fiori tools projects.

Table of Contents

1. MTA Configuration 2. JavaScript Code Assist 3. Security Certificates 4. Custom Middlewares 5. SAPUI5 Version Management 6. Project Functions 7. Reuse Libraries 8. UI Service Generation

---

MTA Configuration

Generate MTA Deployment File

Command:

Fiori: Open CF Application Router Generator

Generated Structure

project/
├── router/                    # App router configuration
├── mta.yaml                   # MTA configuration
├── package.json
├── package-lock.json
└── .gitignore

Router Type Options

Adding Applications to MTA

Existing MTA File: When MTA file exists, Application Generator:

• Automatically enables deployment configuration
• Updates MTA file with settings

New MTA File: Select "Cloud Foundry" as target landscape during generation.

Best Practice: 1. Create MTA file first 2. Generate Fiori application in subfolder 3. Better supports multi-application deployments

CAP Projects

Options for MTA in CAP:

• Generate new instance-based destination
• Use existing destinations from MTA file

---

JavaScript Code Assist

Prerequisites

SAPUI5 version 1.76 or newer

Setup Steps

1. Add Dependencies

In package.json:

{
  "devDependencies": {
    "eslint": "5.16.x",
    "@sap/eslint-plugin-ui5-jsdocs": "2.0.x",
    "@sapui5/ts-types": "1.92.x"
  }
}

2. Create tsconfig.json

{
  "compilerOptions": {
    "module": "none",
    "noEmit": true,
    "checkJs": true,
    "allowJs": true,
    "types": ["@sapui5/ts-types"]
  }
}

3. Create .eslintrc

{
  "plugins": ["@sap/ui5-jsdocs"],
  "extends": [
    "eslint:recommended",
    "plugin:@sap/ui5-jsdocs/recommended"
  ]
}

4. Install Dependencies

rm -rf node_modules
npm install

Features

• Code completion for SAPUI5
• Type-aware suggestions
• Documentation hints

---

Security Certificates

When Certificates Needed

When local certificate authority is unknown to operating system (certificate valid but not trusted).

Setup Steps

Step 1: Obtain Certificate

Export certificate from web browser or obtain from CA.

Step 2: Install to Trust Store

Windows: 1. Right-click CA certificate 2. Select "Install Certificate" 3. Add to trust store (current user or all users)

macOS: 1. Right-click CA certificate 2. Open With > Keychain Access 3. Import into System keychain

Step 3: Configure Environment

Set NODE_EXTRA_CA_CERTS environment variable:

Windows: 1. System Properties > Advanced > Environment Variables 2. Create new variable with certificate path

macOS:

export NODE_EXTRA_CA_CERTS=path/to/certificate/file

Troubleshooting Invalid Certificates

For truly invalid certificates (not recommended):

NODE_TLS_REJECT_UNAUTHORIZED=0

Warning: Resolve underlying certificate issues instead.

---

Custom Middlewares

Overview

Plug custom middleware into SAPUI5 Server module's express server.

Application Reload Middleware

Auto-refresh browser on file changes.

Configuration (ui5.yaml):

server:
  customMiddleware:
    - name: fiori-tools-appreload
      afterMiddleware: compression
      configuration:
        path: webapp          # Directory to monitor
        ext: html,js,json,xml,properties,change
        port: 35729           # Communication port
        debug: false          # Enable logging

Proxy Middleware

Connect to backend systems and manage SAPUI5 versions.

Basic Backend Connection:

server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
          - path: /sap
            url: https://my.backend.com:1234

Multiple Backends:

configuration:
  backend:
    - path: /sap/opu/odata/sap/SERVICE1
      url: https://system1.com
    - path: /sap/opu/odata/sap/SERVICE2
      url: https://system2.com

Special Options:

SAPUI5 Version Management:

configuration:
  ui5:
    path:
      - /resources
      - /test-resources
    url: https://sapui5.hana.ondemand.com
    version: 1.78.0

Serve Static Middleware

Deliver static resources locally.

SAPUI5 Local Serving:

server:
  customMiddleware:
    - name: fiori-tools-servestatic
      afterMiddleware: compression
      configuration:
        paths:
          - path: /resources
            src: "Path/To/SAPUI5-SDK"

Execution

npx fiori run

Requires properly configured ui5.yaml.

---

SAPUI5 Version Management

Minimum Version

Location: manifest.json

{
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.120.0"
    }
  }
}

Change Command:

Fiori: Change Minimum SAPUI5 Version

Updates:

• manifest.json minUI5Version
• @sap/ux-specification module

Deployment Warning: If target system lacks required version, warning displays.

Preview Version

Default: Uses minimum SAPUI5 version

Custom Configuration: Create custom run configuration

Source: https://ui5.sap.com (default)

Fallback: Next higher version if requested unavailable

Deployed Version

ABAP Environment:

• FLP apps: Backend's installed SAPUI5 version
• Standalone: Relative paths (backend) or absolute URLs (specific version)

Cloud Foundry:

• Work Zone: iFrame with backend version
• Standalone: Configured destination, defaults to latest from ui5.sap.com

---

Project Functions

Application Information

Command: Fiori: Open Application Info

Sections:

Project Validation

Command: Fiori: Validate Project

Validation Steps:

Output: Markdown report + Problems tab

Project Cleanup

Removes unused elements:

• Orphaned UI.FieldGroup and UI.LineItem annotations
• Unused annotation terms: UI.MultiLineText, Common.ValueListWithFixedValues, Common.Text, Common.ValueList, Common.FieldControl

Environment Check

Command: Fiori: Open Environment Check

Report Sections:

Output Options: View in interface or export as .zip

Data Editor

Command: Via Application Info > Start Data Editor

Capabilities:

• Edit cells (double-click, excludes keys)
• Add rows (cascades to related entities)
• Delete rows (cascades deletions)
• Search functionality
• Show/hide columns

Live Updates (ui5-mock.yaml):

server:
  customMiddleware:
    - name: "@sap-ux/ui5-middleware-fe-mockserver"
      configuration:
        watch: true

---

Reuse Libraries

Create Reusable Library

Command: Fiori: Open Reusable Library Generator

Required Fields:

• Module name
• Namespace
• Minimum SAPUI5 version
• OData service (optional)

Add Library Reference

Prerequisites:

• Reuse library in workspace
• Existing SAP Fiori project

Command: Fiori: Add Reference to SAP Fiori Reusable Libraries

Steps: 1. Select target SAP Fiori project 2. Choose workspace as source 3. Select libraries/components 4. Click Finish

Updated Files:

• ui5.yaml
• ui5-local.yaml
• manifest.json

Deploy Reuse Library

1. Add library project to workspace 2. Accept migration prompt 3. Dependencies install automatically 4. Generate deployment configuration 5. Deploy to ABAP

---

UI Service Generation

Purpose

Generate UI services from business objects or data models.

Command: Fiori: Generate UI Service

Service Sources

Options

• Draft enablement (if supported)
• Automatic Fiori application creation

Procedure

1. Execute command 2. Select SAP system (VS Code) or destination (BAS) 3. Choose business object or data service 4. Specify package and transport 5. Enable drafts (optional) 6. Enable auto app creation (optional)

Result

• UI service generated
• If auto-create enabled, SAP Fiori Generator launches

---

Filter Fields Configuration

Types

Adding Filter Fields

1. Open Page Map for List Report 2. Select Configure Page 3. Click Add icon next to Filter Bar > Filter Fields 4. Select properties for filtering

Generated Annotation: UI.SelectionFields

Restrictions

Cannot select properties marked with:

• UI.Hidden
• UI.HiddenFilter
• NonFilterableProperties

Visual Filters

For analytically-enabled services:

Configuration:

• Select analytically-enabled entity
• Choose groupable property (dimension)
• Select/create measure

Generated Annotations:

• UI.Chart
• UI.PresentationVariant
• Common.ValueList
• UI.SelectionFields

Editable Properties

Compact Filters: Label, External ID, Text, Text Arrangement, Display Type

Visual Filters (Additional): Measure/Dimension Labels, Scale Factor, Fractional Digits, Sort Order, Fixed Values

---

Table Configuration

Sorting

Presentation Variant Property: UI.SelectionPresentationVariant or UI.PresentationVariant

Add Sort Property: 1. Configure presentation variant 2. Add sort properties 3. Specify direction 4. Reorder as needed

Default Filtering

Selection Variant: UI.SelectionPresentationVariant or UI.SelectionVariant

Add Default Filter: 1. Configure selection variant 2. Add filter properties 3. Supports multiple filters per property

---

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs

Key files:

• Generating-an-Application/Additional-Configuration/
• Project-Functions/
• Developing-an-Application/filter-fields-0b84286.md
• Developing-an-Application/table-aaff7b1.md

Deployment Reference

Comprehensive reference for deploying SAP Fiori applications to ABAP and Cloud Foundry.

Table of Contents

1. Deployment Overview 2. ABAP Deployment 3. Cloud Foundry Deployment 4. Fiori Launchpad Configuration 5. Undeployment 6. Troubleshooting

---

Deployment Overview

SAP Fiori tools supports deployment to two primary environments:

Deployment Workflow

1. Generate deployment configuration 2. Configure Fiori Launchpad (optional) 3. Execute deployment 4. Verify in target system

---

ABAP Deployment

Prerequisites

Authentication Methods

Generate Configuration

Command Palette:

Fiori: Add Deployment Configuration

CLI:

npx fiori add deploy-config

Configuration Prompts

Transport Request Options

1. Enter manually - Provide transport request ID directly 2. Choose from existing - Select from system-provided list 3. Create new - Auto-generate during configuration 4. Create during deployment - Auto-generate on first deployment

Generated Files

ui5-deploy.yaml:

specVersion: "2.4"
metadata:
  name: project-name
type: application
builder:
  resources:
    excludes:
      - /test/**
      - /localService/**
deploy:
  target:
    url: https://system.url
    client: "100"
    scp: false
    params:
      sap-language: EN
  app:
    name: ZAPP_NAME
    package: ZPACKAGE
    description: Application description
    transport: DEVK900123

package.json update:

{
  "scripts": {
    "deploy": "fiori deploy --config ui5-deploy.yaml"
  }
}

Execute Deployment

npm run deploy

The command: 1. Builds the application 2. Creates ZIP of dist folder 3. Uploads to SAPUI5 ABAP Repository 4. Registers with transport (if applicable)

---

Cloud Foundry Deployment

Prerequisites

Generate Configuration

Command Palette:

Fiori: Add Deployment Configuration

Select "Cloud Foundry" as target.

Configuration Prompts

Generated Project Structure

project/
├── webapp/
│   └── manifest.json
├── mta.yaml                  # MTA descriptor
├── xs-app.json               # App router configuration
├── xs-security.json          # Security descriptor
├── package.json              # Updated with scripts
├── ui5.yaml
└── ui5-deploy.yaml

MTA Descriptor (mta.yaml)

_schema-version: "3.2"
ID: project-name
version: 0.0.1
modules:
  - name: project-name-destination-content
    type: com.sap.application.content
    requires:
      - name: project-name-destination-service
        parameters:
          content-target: true
      - name: project-name-repo-host
        parameters:
          service-key:
            name: project-name-repo-host-key
      - name: project-name-uaa
        parameters:
          service-key:
            name: project-name-uaa-key
    parameters:
      content:
        instance:
          destinations:
            - Name: project-name-repo-host
              ServiceInstanceName: project-name-html5-srv
              ServiceKeyName: project-name-repo-host-key
              sap.cloud.service: project-name
            - Authentication: OAuth2UserTokenExchange
              Name: project-name-uaa
              ServiceInstanceName: project-name-xsuaa
              ServiceKeyName: project-name-uaa-key
              sap.cloud.service: project-name
          existing_destinations_policy: update

  - name: project-name
    type: html5
    path: .
    build-parameters:
      build-result: dist
      builder: custom
      commands:
        - npm install
        - npm run build:cf

resources:
  - name: project-name-repo-host
    type: org.cloudfoundry.managed-service
    parameters:
      service: html5-apps-repo
      service-plan: app-host
  - name: project-name-destination-service
    type: org.cloudfoundry.managed-service
    parameters:
      service: destination
      service-plan: lite
  - name: project-name-uaa
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      config:
        xsappname: project-name
        tenant-mode: dedicated

xs-app.json (App Router Configuration)

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/sap/opu/odata/(.*)$",
      "target": "/sap/opu/odata/$1",
      "destination": "backend-destination",
      "authenticationType": "xsuaa"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

Build and Deploy

# Build MTA archive
npm run build

# Deploy to Cloud Foundry
npm run deploy

Or using CF CLI directly:

# Build
mbt build

# Deploy
cf deploy mta_archives/project-name_0.0.1.mtar

SAP Business Application Studio Alternative

1. Create Basic Multitarget Application template 2. Add Approuter Configuration module 3. Configure destination-content module

---

Fiori Launchpad Configuration

Generate Configuration

Command Palette:

Fiori: Add Fiori Launchpad Configuration

CLI:

npx @sap-ux/create

Configuration Parameters

Manifest Updates

{
  "sap.app": {
    "crossNavigation": {
      "inbounds": {
        "intent1": {
          "semanticObject": "Product",
          "action": "display",
          "title": "{{appTitle}}",
          "subTitle": "{{appSubTitle}}",
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          }
        }
      }
    }
  }
}

---

Undeployment

ABAP Undeployment

Via Application Info page or CLI:

npx fiori undeploy --config ui5-deploy.yaml

Cloud Foundry Undeployment

cf undeploy project-name --delete-services

---

Troubleshooting

Common ABAP Issues

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                 # All commands
npx fiori deploy help          # Deploy command options
npx fiori add deploy-config help  # Configuration options

Required OData Services

Ensure these services are enabled and accessible:

---

Central Application Router

For exposing applications through central managed router:

1. Configure destination to HTML5 Repository 2. Set up managed application router service 3. Reference application in launchpad configuration

See expose-application-to-central-application-router-85ad10d.md for details.

---

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs/Deploying-an-Application

Key files:

• deploying-an-application-1b7a3be.md
• deployment-configuration-1c85927.md
• generate-deployment-configuration-abap-c06b9cb.md
• generate-deployment-configuration-cloud-foundry-41e63bd.md
• sap-fiori-launchpad-configuration-bc3cb89.md
• deployment-of-application-607014e.md
• undeploy-an-application-70872c4.md
• security-8a147c6.md

Getting Started Reference

Comprehensive reference for setting up and migrating SAP Fiori tools projects.

Table of Contents

1. Installation 2. Migration from SAP Web IDE 3. Importing Applications 4. ADT Integration 5. Command Palette Reference 6. Telemetry 7. Security Best Practices

---

Installation

Visual Studio Code

Prerequisites:

Windows Node.js Setup: 1. Download Windows installer from nodejs.org (requires admin rights) or standalone binary 2. Extract binary to C:\Users\<your_user>\AppData\Local\Programs 3. Set NODE_PATH environment variable pointing to Node folder 4. Add %NODE_PATH% to System variables Path 5. Restart computer after changes

macOS Node.js Setup: Use package manager: Homebrew or Node Version Manager (nvm)

npm Configuration Check:

npm config get @sap:registry

Expected values: https://registry.npmjs.org or undefined

If set incorrectly to @sap, remove entry from .npmrc file in home directory.

Required Extensions: Install SAP Fiori tools - Extension Pack which includes:

• Application Wizard
• Application Modeler
• Guided Development
• Service Modeler
• XML Annotation Language Server
• XML Toolkit

Optional Extensions:

• SAP CDS Language Support (for CAP applications)
• UI5 Language Assistant Support (control ID checks)

SAP Business Application Studio

Dev Space Types with SAP Fiori Tools: 1. SAP Fiori Dev Space - Dedicated for Fiori development 2. Full Stack Cloud Application Dev Space - For CAP applications

Setup Steps: 1. Complete SAP Business Application Studio onboarding 2. Create dev space with appropriate type 3. Start dev space and begin development

Note: UI5 Language Assistant is installed automatically in SAP Fiori tools Dev Spaces.

Authentication Methods

Required OData Services (SAML Disabled)

---

Migration from SAP Web IDE

Overview

SAP Fiori tools enables migrating projects from SAP Web IDE to VS Code or SAP Business Application Studio.

Note: SAP Web IDE requires productive SAP BTP global account (not available on free tier).

Supported Project Types

• SAP Fiori elements (V2 and V4)
• Freestyle SAPUI5
• SAPUI5 Adaptation Projects
• SAPUI5 Extensibility projects

Prerequisites

• Latest SAP Fiori tools extensions installed
• Project functioning properly in SAP Web IDE
• BAS: Destination defined for target system
• VS Code: Knowledge of target system hostname and client

Migration Steps

1. Import/Clone Project

• Clone from Git repository, OR
• Export from SAP Web IDE and drag into workspace

2. Launch Migration

• Click "Start Migration" prompt, OR
• Command Palette: Fiori: Migrate Project for use in Fiori tools

3. Select Projects

• Check desired projects in list
• Manually add via filesystem if not detected

4. Configure Settings

5. Execute Migration

• Click "Start Migration"
• Packages install automatically

Files Modified During Migration

Approximately 13 files updated including:

• package.json
• ui5.yaml
• manifest.json
• index.html
• changes_loader.js (created)
• locate-reuse-libs.js (created)

Post-Migration Steps

CRITICAL: Migration doesn't update deployment configuration!

npm run deploy-config

Verification:

• Review source control changes
• Test SAP Fiori tools features (Page Map, Application Generator)
• Sync OData services if metadata.xml is missing

---

Importing Applications

From SAPUI5 ABAP Repository

Prerequisites: Create two folders in workspace:

• restore-from-exported - stores restored application
• restore-from-exported/webapp - contains extracted files

Import Procedure

1. Access SAPUI5 ABAP backend system 2. Open transaction SE80 3. Execute report /UI5/UI5_REPOSITORY_LOAD 4. Enter SAPUI5 application name 5. Select Download and choose empty folder 6. Download as .zip archive 7. Extract to restore-from-exported/webapp

• Ensure manifest.json at exact path

8. Create package.json in restore-from-exported:

   {
     "name": "your-app-name",
     "version": "1.0.0"
   }

9. Run: Fiori: Migrate Project for use in Fiori tools 10. Complete migration process

Important Notes

• Downloaded code typically minified
• -dbg.js files contain unminified source
• Before UI5 CLI build, remove:
• -dbg.js files
• -preload.js files
• .js.map files

---

ADT Integration

Overview

Launch SAP Fiori Generator directly from ABAP Development Tools in Eclipse.

One-Time Configuration

1. Select target system in ADT 2. Access system properties 3. Navigate to ABAP Development settings 4. Enable IDE configuration option 5. Specify preferred IDE (BAS or VS Code)

Features

Streamlined Project Creation:

• "Create Fiori Project" button appears near service details
• Data source selection step skipped (already selected in ADT)
• Main entity pre-selected

Application Download:

• Quick Fiori Application generator option
• Downloads deployed application to workspace
• Updates for SAP Fiori tools compatibility

Direct Command:

Fiori: Download ADT Deployed App from SAPUI5 ABAP Repository

Important: VS Code saved ABAP system URL must match ADT URL.

---

Command Palette Reference

Access via Cmd/Ctrl + Shift + P, then type "Fiori:"

Project Management

Application Development

Configuration & Deployment

Development Tools

Navigation & Preview

System & Utilities

AI Assistance

---

Telemetry

Overview

SAP Fiori tools collects non-personally identifiable usage information to improve the product.

Configuration

Fiori: Change Telemetry Settings

Toggle telemetry collection on/off according to preference.

---

Security Best Practices

Development Security

• Follow organization's software development security policies
• Avoid using production OData services for development
• Use separate credentials for development vs production
• Use trusted NPM registry
• Apply security guidelines for all required tools
• Implement source control with regular commits

Path Variable Security

Verify PATH variable content:

• node command points to trusted origin
• cds command points to trusted origin

Reporting Issues

1. Check SAP Fiori tools FAQs 2. Search SAP Community 3. Create incident in SAP Support Portal

• Component: CA-UX-IDE

---

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs/Getting-Started-with-SAP-Fiori-Tools

Key files:

• getting-started-with-sap-fiori-tools-2d8b1cb.md
• installation-e870fcf.md
• visual-studio-code-17efa21.md
• sap-business-application-studio-b011040.md
• migration-70d41f3.md
• importing-an-application-ab4657c.md
• abap-development-tools-integration-20da2fd.md
• command-palette-4896dcc.md
• telemetry-837c231.md
• report-issues-and-security-7c755a5.md

Page Editor Reference

Detailed configuration reference for the SAP Fiori tools Page Editor.

Table of Contents

1. List Report Page 2. Object Page 3. Extension-Based Elements 4. Building Blocks 5. Quick Actions

---

List Report Page

Filter Fields

Configure filter bar elements for data discovery.

Types:

• Compact Filters: Fields with value help
• Visual Filters: Charts with selectable elements (analytics-enabled services)

Adding: Page Map > Configure Page > Add icon next to Filter Bar > Filter Fields

Generates UI.SelectionFields annotation.

Excluded Properties: UI.Hidden, UI.HiddenFilter, NonFilterableProperties

Editable Properties (Compact): Label, External ID, Text, Text Arrangement, Display Type

Visual Filter Properties: Measure/Dimension Labels, Scale Factor, Fractional Digits, Sort Order, Fixed Values

Table Configuration

Supported Table Types: Responsive, Grid, Analytical, Tree (hierarchical data)

Column Types (7):

Column Properties:

• Label: From Common.Label or @title, customizable
• Importance: Controls small-screen visibility (None = hidden)
• Hidden: Conditional hiding via boolean property

Table Actions

Action Types:

Placement: Toolbar or Inline (column)

Properties:

• Label (from Common.Label or @title)
• Importance (column actions only)
• Criticality (Positive/Negative for inline only)
• Hidden (conditional)
• Semantic Object Mapping (external navigation)
• Requires Context (toolbar external navigation)

Multiple Views

Display additional tables/charts in separate tabs via icon tab bar.

Requirements:

• @Aggregation.ApplySupported at service level
• Custom aggregations: @Aggregation.CustomAggregate
• Transformation aggregations: SAPUI5 1.106+
• Cannot coexist with Analytical Charts

Adding Views: 1. Click Add icon on Views node 2. Select table or chart view type 3. Choose Entity from OData Service 4. For charts: specify type, dimension, measure

Generates UI.LineItem or UI.Chart with qualifiers, updates manifest.json.

Management: Drag-and-drop reordering, delete icon (cannot remove last main entity table view)

Analytical Chart

Add aggregated data visualization to List Report.

Prerequisites:

• No Multiple Views in List Report
• Main entity has aggregable/groupable properties
• Transformation aggregations: SAPUI5 1.106+

Adding: 1. Click "Add Chart" in Page Editor header 2. Select chart type 3. Choose dimension (groupable property) 4. Choose measure (aggregable property or create new)

Configuration Properties:

Note: Sort order applies to both chart and table.

---

Object Page

Header Configuration

Based on @UI.HeaderInfo annotation.

Header Properties:

Header Actions:

• Standard Actions: Edit, Delete (can be hidden conditionally)
• Annotation-Based: UI.DataFieldForAction, UI.DataFieldForIntentBasedNavigation, UI.DataFieldForActionGroups
• Custom Actions: Based on application extensions

Header Sections (7 Types):

Reorder sections via drag-and-drop (updates UI.HeaderFacets).

Section Types

Form Section

Based on UI.FieldGroup annotation.

Adding: 1. Open Page Editor for Object/Form Entry Page 2. Navigate to section node > Add icon 3. Choose "Add Form Section" 4. Enter label

Properties:

• Label: Section title
• Display on Demand: Hide content under "Show More"
• Hidden: Visibility control

Table Section

Adding: 1. Open Page Editor 2. Section node > Add icon > "Add Table Section" 3. Enter label and Value Source Entity

Generates UI.LineItem annotation with reference facet.

Properties: Label, Hidden

Identification Section

Display key identifying information prominently.

Chart Section

Embed charts within Object Page for data visualization.

Group Section

Group related content logically with collapsible containers.

Footer Configuration

Actions from UI.DataFieldForAction records where Determining = true.

Limitations:

• External navigation actions NOT allowed in footer
• Importance and Requires Context properties don't apply

Criticality: Affects action ordering (Positive/Negative reorganizes nodes)

Basic Fields

Adding Fields: 1. Expand section > click add button 2. Search/select fields from dropdown 3. Multiple fields can be added simultaneously

Excluded Properties:

• Edm.Guid type properties
• Draft properties: IsActiveEntity, HasActiveEntity, HasDraftEntity
• Draft navigation: SiblingEntity, DraftAdministrativeData
• Already referenced properties
• Duplicates within same section

Moving Fields:

• Drag-and-drop (highlights green when valid)
• Arrow buttons (up/down)
• Multi-select: Ctrl+Click
• Cross-section only when same entity FieldGroup/Identification

Field Properties:

Restrictions (Input Control):

Note: Read-only objects disable Display Type and Restrictions properties.

---

Extension-Based Elements

Custom Columns (OData V4)

Add custom columns with XML fragments:

Configuration Steps: 1. Select Table in Page Editor 2. Add > Custom Column 3. Provide: Header text, Fragment name, Anchor column, Placement 4. Optional: Generate event handler

Generated Files:

• Fragment: webapp/ext/fragments/<name>.fragment.xml
• Controller (optional): webapp/ext/<name>.controller.js

Fragment Template:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
    <Text text="{PropertyPath}" id="customColumn"/>
</core:FragmentDefinition>

Custom Sections (OData V4)

Add custom sections to Object Page:

Configuration:

• Section title
• View type: Fragment (V4) or View (V2)
• Fragment/View name
• Anchor section and placement
• Generate event handler option

Fragment Location: webapp/ext/fragments/

Custom Actions (OData V4 1.96+)

Add action buttons with custom handlers:

Configuration:

• Action ID (unique identifier)
• Button Text
• Anchor and Placement
• Action Handler File
• Handler Method name
• Requires Selection toggle (for table actions)

Handler Template:

sap.ui.define([], function() {
    "use strict";
    return {
        onCustomAction: function(oEvent) {
            // Custom action logic
        }
    };
});

Custom Views (OData V4 1.96.29+)

Add custom tab views to List Report:

Configuration:

• View Key (unique)
• Label text
• Fragment selection
• Event handler generation

Controller Extensions

Extend page controller lifecycle and methods:

Lifecycle Methods:

• onInit - Component initialization
• onBeforeRendering - Before UI rendering
• onAfterRendering - After UI rendering
• onExit - Component destruction

Override Pattern:

sap.ui.define(["sap/ui/core/mvc/ControllerExtension"], function(ControllerExtension) {
    return ControllerExtension.extend("customer.extension.MyExtension", {
        override: {
            onInit: function() {
                // Extension logic
            }
        },
        // Custom methods outside override
        myCustomMethod: function() {
            // Custom logic
        }
    });
});

File Locations:

• Extension: webapp/changes/coding/<name>.js
• Change descriptor: webapp/changes/<name>.controllerExtension.change

---

Building Blocks

Reusable UI components for OData V4 custom pages and sections.

Chart Building Block

Embed charts in custom UI:

<macros:Chart
    id="chartBlock"
    metaPath="@com.sap.vocabularies.UI.v1.Chart"
    contextPath="/EntitySet"/>

Filter Bar Building Block

Add filter capabilities:

<macros:FilterBar
    id="filterBar"
    metaPath="@com.sap.vocabularies.UI.v1.SelectionFields"
    liveMode="true"/>

Table Building Block

Display tabular data:

<macros:Table
    id="tableBlock"
    metaPath="@com.sap.vocabularies.UI.v1.LineItem"
    readOnly="true"/>

Page Building Block

Container for custom pages:

<macros:Page id="customPage">
    <!-- Page content -->
</macros:Page>

Rich Text Editor Building Block

Content editing in custom sections:

<macros:RichTextEditor
    id="richTextEditor"
    value="{Description}"/>

---

Quick Actions

Page Editor provides quick action shortcuts for common operations:

Accessing Quick Actions

1. Right-click element in Page Editor outline 2. Select from context menu 3. Configure in dialog

---

Configuration Files

Manifest.json Updates

Page Editor modifications update manifest.json:

{
  "sap.ui5": {
    "routing": {
      "targets": {
        "ListReport": {
          "options": {
            "settings": {
              "content": {
                "header": {},
                "body": {}
              }
            }
          }
        }
      }
    }
  }
}

UI Flexibility Changes

Custom extensions generate flexibility changes in webapp/changes/:

• addXML.change - Fragment additions
• controllerExtension.change - Controller extensions
• propertyChange.change - Property modifications

---

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs/Developing-an-Application

Key files:

• list-report-page-493f2aa.md
• form-and-object-page-1eb11a6.md
• maintaining-extension-based-elements-02172d2.md
• maintaining-building-blocks-6d3ad83.md
• supported-elements-in-page-editor-47f0424.md

Preview Reference

Comprehensive reference for previewing SAP Fiori applications during development.

Table of Contents

1. Preview Overview 2. NPM Scripts 3. Run Control 4. Mock Data 5. Live Data 6. App-to-App Navigation 7. External FLP Preview 8. Developer Variants 9. SAP Horizon Theme 10. Virtual Endpoints 11. CAP Project Preview

---

Preview Overview

SAP Fiori tools provides multiple preview options:

Default Preview Port

Applications run on localhost:8080 by default. If port is in use, system selects next available port.

HTTPS/SSL Considerations

• localhost serves as HTTP proxy to backend services
• Domain security policies may require HTTPS
• Configure browser to trust local certificates if needed

---

NPM Scripts

Available Scripts

Running Scripts

VS Code: 1. Open terminal: Ctrl + 2. Navigate to project root 3. Run script: npm run start-mock

SAP Business Application Studio: 1. Open terminal: Terminal > New Terminal 2. Navigate to project root 3. Run script: npm run start-mock

Context Menu: Right-click project folder and select from available scripts.

---

Run Control

Configuration Location

<workspace_root>/.vscode/launch.json

Important: Run Control only searches root-level .vscode/ folder, not subfolders.

Sample launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Start app-name",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "start"],
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal"
        },
        {
            "name": "Start app-name (mock)",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "start-mock"],
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal"
        }
    ]
}

Multi-Root Workspace

Multiple configurations can be merged: 1. Add folders as workspace roots 2. Each root's launch.json configurations become available 3. Access via Run and Debug view

Creating Run Configurations

VS Code:

Fiori: Create Run Configuration (VS Code)

SAP Business Application Studio:

Fiori: Create Run Configuration (BAS)

---

Mock Data

MockServer Setup

Install MockServer:

Fiori: Install MockServer

Or manually:

npm install @sap-ux/ui5-middleware-fe-mockserver --save-dev

Mock Data Location

webapp/localService/mockdata/
├── EntitySet.json
├── AssociatedEntitySet.json
└── ...

Mock Data Format

[
    {
        "ID": "1",
        "Name": "Product 1",
        "Price": 100.00,
        "Currency": "USD"
    },
    {
        "ID": "2",
        "Name": "Product 2",
        "Price": 200.00,
        "Currency": "EUR"
    }
]

Data Editor

Visual mock data management tool.

Launch: Via Application Info page > Start Data Editor

Features:

• Edit cells by double-clicking (primary/foreign keys excluded)
• Add rows with automatic cascading to related entities
• Delete rows with cascading deletions
• Search functionality
• Show/hide columns

Configuration for Live Updates:

Add to ui5-mock.yaml:

server:
  customMiddleware:
    - name: "@sap-ux/ui5-middleware-fe-mockserver"
      configuration:
        watch: true

AI Mock Data Generation

Generate contextual mock data using entity property names.

Requirements:

• SAP Build Code subscription or Test Drive access
• EDMX project with metadata.xml file

Launch: Via Page Editor > Generate Mock Data action

---

Live Data

Configuration

Live data preview connects to actual backend OData services.

Requirements:

• Backend system accessible
• Authentication configured
• Destination set up (BAS) or system connection (VS Code)

Start Command

npm start

ui5.yaml Configuration

server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
          - path: /sap
            url: https://backend.system.com
            destination: BACKEND_DESTINATION

---

App-to-App Navigation

Enable Navigation Preview

Fiori: Enable App-to-App Navigation Preview

Configuration Steps

1. Execute command via Command Palette 2. Select source application 3. Select destination application(s) 4. Launch source app preview 5. Execute navigation

Generated Files

Source Application:

• appconfig/fioriSandboxConfig.json - FLP sandbox configuration
• Updated ui5.yaml - Middleware configuration

fioriSandboxConfig.json Structure

{
    "applications": {
        "destination-app-semantic-object-action": {
            "additionalInformation": "SAPUI5.Component=namespace.destination",
            "applicationType": "URL",
            "url": "../destination-app/",
            "title": "Destination App"
        }
    }
}

Requirements

• Both applications in same workspace
• Configured external navigation in source app
• Matching semantic objects and actions

---

External FLP Preview

Purpose

Preview application within actual SAP Fiori launchpad environment.

Configuration

Fiori: Preview on External Fiori Launchpad

Parameters

Use Cases

• Test FLP-dependent features
• Verify tile configuration
• Test cross-application navigation

---

Developer Variants

Purpose

Create and test page variants during development.

Creating Variants

Fiori: Create Developer Variant

Variant Types

• Filter variants
• Table variants
• Page variants

Storage

Developer variants stored locally, not deployed to backend.

---

SAP Horizon Theme

Preview with Horizon Theme

Fiori: Preview with SAP Horizon Theme

About SAP Horizon

SAP Horizon is SAP's evolved design language with:

• Modern visual design
• Improved accessibility
• Enhanced user experience

Theme Variants

---

Virtual Endpoints

Purpose

Convert project to use virtual endpoints for simplified proxy configuration.

Convert Command

Fiori: Convert to Virtual Endpoints

Benefits

• Simplified destination configuration
• Consistent endpoint naming
• Easier multi-system setup

Configuration Update

Updates ui5.yaml with virtual endpoint mappings.

---

CAP Project Preview

Prerequisites

• CAP project with cds dependencies
• Node.js or Java runtime
• Database configured (SQLite for development)

Starting Preview

Node.js CAP:

cds watch

Java CAP:

mvn spring-boot:run

Fiori Preview in CAP

From CAP project root:

npm run start

Or use Run Control with CAP-specific configuration.

Supported Templates for CAP

• List Report Object Page (OData V4)
• Analytical List Page (OData V4)

CAP-Specific ui5.yaml

specVersion: "2.4"
metadata:
  name: cap-app
type: application
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
          - path: /odata/v4
            url: http://localhost:4004

---

Custom Middlewares

Adding Custom Middleware

Create custom server middleware for specialized preview needs.

Configuration

In ui5.yaml:

server:
  customMiddleware:
    - name: my-custom-middleware
      afterMiddleware: compression
      configuration:
        option1: value1

Use Cases

• Custom authentication handling
• Request/response modification
• Logging and debugging
• Feature flags

---

Troubleshooting

Port Already in Use

System automatically selects next available port. Check terminal output for actual port.

SSL Certificate Errors

Configure browser to trust localhost certificates or use HTTP for development.

Backend Connection Failed

1. Verify destination/system configuration 2. Check authentication credentials 3. Confirm backend service is accessible 4. Review proxy configuration in ui5.yaml

Mock Data Not Loading

1. Verify MockServer is installed 2. Check mock data file names match entity sets 3. Validate JSON syntax in mock data files 4. Ensure metadata.xml is present

---

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs/Previewing-an-Application

Key files:

• previewing-an-application-b962685.md
• use-mock-data-bda83a4.md
• use-live-data-497aee2.md
• generating-mock-data-with-ai-815c310.md
• run-control-overview-d7f20f3.md
• app-to-app-navigation-preview-543675f.md
• preview-an-application-on-external-sap-fiori-launchpad-c789692.md
• developer-variant-creation-ceb845a.md
• preview-an-application-with-the-sap-horizon-theme-2a42256.md
• use-custom-middlewares-dce5315.md
• previewing-an-sap-fiori-elements-cap-project-1dc179a.md