Back to Details

sap-fiori-tools

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SAP Fiori Tools Development Skill

SAP Fiori Tools 开发技能

Related Skills

相关技能

  • sapui5: Use for underlying UI5 framework details, custom control development, and advanced UI patterns
  • sap-cap-capire: Use for CAP service integration, OData consumption, and backend service configuration
  • sap-abap-cds: Use when consuming ABAP CDS views as OData services or working with ABAP backends
  • sap-btp-cloud-platform: Use for deployment targets, BTP destination configuration, and Cloud Foundry deployment
  • sap-api-style: Use when documenting OData APIs or following API documentation standards for Fiori apps
Comprehensive guidance for developing SAP Fiori applications using SAP Fiori tools extensions.
  • sapui5: 用于底层UI5框架细节、自定义控件开发以及高级UI模式相关场景
  • sap-cap-capire: 用于CAP服务集成、OData消费以及后端服务配置场景
  • sap-abap-cds: 用于将ABAP CDS视图作为OData服务使用或与ABAP后端交互的场景
  • sap-btp-cloud-platform: 用于部署目标配置、BTP目标设置以及Cloud Foundry部署场景
  • sap-api-style: 用于编写OData API文档或遵循Fiori应用的API文档标准场景
以下是使用SAP Fiori工具扩展开发SAP Fiori应用的全面指南。

Table of Contents

目录

Overview

概述

SAP Fiori tools is a collection of extensions that simplifies SAP Fiori elements and SAPUI5 application development. It includes six main components:
ComponentPurpose
Application WizardGenerate Fiori Elements and Freestyle SAPUI5 templates
Application ModelerVisual Page Map and Page Editor for configuration
Guided DevelopmentStep-by-step feature implementation guides
Service ModelerVisualize OData service metadata and annotations
Annotations Language ServerCode completion, diagnostics, i18n for annotations
Environment CheckValidate setup and destination configurations
Minimum SAPUI5 Version: 1.65+ Support Component: CA-UX-IDE
SAP Fiori工具是一套扩展集合，可简化SAP Fiori Elements和SAPUI5应用的开发流程。它包含六大核心组件：
组件用途
Application Wizard生成Fiori Elements和Freestyle SAPUI5模板
Application Modeler用于配置的可视化页面地图和页面编辑器
Guided Development分步式功能实现指南
Service Modeler可视化OData服务元数据和注解
Annotations Language Server注解的代码补全、诊断、国际化支持
Environment Check验证开发环境和目标配置
最低SAPUI5版本: 1.65+ 支持组件: CA-UX-IDE

Sample Projects

示例项目

Official SAP sample repository with Fiori Elements applications built using SAP Fiori tools:
Repository: SAP-samples/fiori-tools-samples
FolderContent
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:
bash
git clone [https://github.com/SAP-samples/fiori-tools-samples](https://github.com/SAP-samples/fiori-tools-samples)
cd fiori-tools-samples/V4/apps/salesorder
npm install
npm start
SAP官方示例仓库，包含使用SAP Fiori工具构建的Fiori Elements应用：
仓库地址: SAP-samples/fiori-tools-samples
文件夹内容
V2/
OData V2 Fiori Elements 示例
V4/
OData V4 Fiori Elements 示例
cap/
CAP项目集成示例
app-with-tutorials/
教程配套项目
快速开始:
bash
git clone [https://github.com/SAP-samples/fiori-tools-samples](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
通过命令面板（
Cmd/Ctrl + Shift + P
）访问功能：
Fiori: Open Application Generator       # 创建新应用
Fiori: Open Application Info            # 查看项目命令
Fiori: Open Page Map                    # 可视化导航编辑器
Fiori: Open Guided Development          # 功能实现指南
Fiori: Open Service Modeler             # 探索OData服务
Fiori: Add Deployment Configuration     # 设置ABAP或CF部署
Fiori: Add Fiori Launchpad Configuration # 配置FLP磁贴
Fiori: Validate Project                 # 运行项目验证
Fiori: Open Environment Check           # 排查目标配置问题

Application Generation

应用生成

Fiori Elements Floorplans

Fiori Elements 模板

FloorplanOData V2OData V4Use Case
List Report PageYesYesBrowse large datasets, navigate to details
Worklist PageYes1.99+Process work items, task completion
Analytical List PageYes1.90+Data analysis, KPI visualization
Overview PageYesYesRole-based dashboards, multi-card views
Form Entry Object PageYesYesStructured data entry
Custom PageNoYesExtensible custom UI with building blocks
模板OData V2OData V4适用场景
List Report Page是是浏览大型数据集，导航至详情
Worklist Page是1.99+处理工作项，完成任务
Analytical List Page是1.90+数据分析，KPI可视化
Overview Page是是基于角色的仪表板，多卡片视图
Form Entry Object Page是是结构化数据录入
Custom Page否是可扩展的自定义UI，包含构建块

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)
  1. SAP系统 - 连接到ABAP本地系统或BTP系统
  2. CAP项目 - 使用本地Node.js或Java CAP项目
  3. EDMX文件 - 上传元数据用于仅模拟开发
  4. SAP Business Accelerator Hub - 仅用于开发/测试（已弃用）

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
webapp/
  ├── manifest.json          # 应用描述文件
  ├── Component.js           # UI5组件
  ├── localService/          # 模拟数据和元数据
  │   ├── metadata.xml
  │   └── mockdata/
  └── annotations/           # 本地注解文件
package.json
ui5.yaml                     # UI5工具配置
ui5-local.yaml               # 本地开发配置

Page Editor Configuration

页面编辑器配置

The Page Editor provides visual configuration for Fiori Elements pages.
页面编辑器为Fiori Elements页面提供可视化配置功能。

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
  • 页眉 - 配置页眉 facets 和操作
  • 章节 - 表单、表格、标识、图表、分组章节
  • 页脚 - 配置页脚操作

Extension-Based Elements (OData V4)

基于扩展的元素（OData V4）

ElementLocationDescription
Custom ColumnTableAdd custom columns with fragments
Custom SectionObject PageAdd custom sections with views
Custom ActionHeader/TableAdd action buttons with handlers
Custom ViewList ReportAdd custom tab views
Controller ExtensionPageOverride lifecycle methods
For detailed configuration, see 
references/page-editor.md
.
元素位置描述
自定义列表格使用片段添加自定义列
自定义章节对象页面使用视图添加自定义章节
自定义操作页眉/表格添加带处理程序的操作按钮
自定义视图列表报表添加自定义选项卡视图
控制器扩展页面重写生命周期方法
详细配置请参考 
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
  • 代码补全 (
    Ctrl/Cmd + Space
    ) - 上下文感知的建议
  • 微代码片段 - 插入完整的注解块
  • 诊断 - 针对词汇表的验证
  • 国际化支持 - 提取可翻译字符串
  • 查看/跳转至定义 - 导航至注解源

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
OASIS OData v4: Core、Capabilities、Aggregation、Authorization、JSON、Measures、Repeatability、Temporal、Validation
SAP词汇表: 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
.
  • CDS文件: CAP项目中的 
    .cds
    文件
  • XML文件: 
    webapp/annotations/*.xml
注解模式请参考 
references/annotations.md
。

Preview Options

预览选项

NPM Scripts

NPM脚本

bash
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
bash
npm start           # 使用后端真实数据
npm run start-mock  # 通过MockServer使用模拟数据
npm run start-local # 使用模拟数据和本地SAPUI5资源
npm run start-noflp # 不使用Fiori启动页沙箱

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
通过 
.vscode/
文件夹中的 
launch.json
配置。支持：
  • 每个工作区多个运行配置
  • VS Code和BAS集成
  • 应用间导航预览

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
.
  • 数据编辑器 - 可视化模拟数据管理
  • AI生成 - 生成上下文相关的模拟数据（需要SAP Build Code订阅）
  • MockServer - 自动设置模拟服务器
预览详情请参考 
references/preview.md
。

Deployment

部署

ABAP Deployment

ABAP部署

Prerequisites:
  • SAP_UI 7.53+
  • SAPUI5 ABAP Repository service enabled
  • S_DEVELOP authorization
Configuration:
bash
npx fiori add deploy-config    # Generate ui5-deploy.yaml
npm run deploy                  # Execute deployment
Generated Files: 
ui5-deploy.yaml
, updated 
package.json
前提条件:
  • SAP_UI 7.53+
  • 启用SAPUI5 ABAP Repository服务
  • 拥有S_DEVELOP权限
配置步骤:
bash
npx fiori add deploy-config    # 生成ui5-deploy.yaml
npm run deploy                  # 执行部署
生成文件: 
ui5-deploy.yaml
、更新后的 
package.json

Cloud Foundry Deployment

Cloud Foundry部署

Prerequisites:
  • MTA tool: 
    npm i -g mta
  • CF CLI with multiapps plugin
  • HTML5 Repository service instance
Configuration:
bash
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
.
前提条件:
  • MTA工具: 
    npm i -g mta
  • 安装了multiapps插件的CF CLI
  • HTML5 Repository服务实例
配置步骤:
bash
npx fiori add deploy-config    # 选择Cloud Foundry
npm run build                   # 生成mta.yaml
npm run deploy                  # 部署到CF
生成文件: 
mta.yaml
、
xs-app.json
、
xs-security.json
部署详情请参考 
references/deployment.md
。

Fiori Launchpad Configuration

Fiori启动页配置

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.
通过以下命令添加FLP磁贴配置：
Fiori: Add Fiori Launchpad Configuration
必填参数:
  • Semantic Object（唯一标识符）
  • Action（例如 "display"）
  • 标题
  • 副标题（可选）
配置会更新 
manifest.json
中的入站导航设置。

Adaptation Projects

适配项目

Extend existing Fiori applications without modifying source code.
无需修改源代码即可扩展现有Fiori应用。

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
本地环境（VS Code）:
  • SAP_UI 7.54+，SAPUI5 1.72+
  • 基础应用必须包含manifest.json
  • 不能使用ABAP Cloud包
S/4HANA Cloud & BTP ABAP:
  • 应用必须已"发布为可扩展"
  • 包含开发租户的三系统环境
  • 已分配所需的业务目录

Adaptation Workflow

适配工作流

  1. Create adaptation project via Template Wizard
  2. Make UI adaptations in Adaptation Editor
  3. Preview adaptation
  4. Deploy to ABAP repository
  1. 通过模板向导创建适配项目
  2. 在适配编辑器中进行UI适配
  3. 预览适配效果
  4. 部署到ABAP仓库

Adaptation Capabilities

适配能力

AdaptationDescription
Control VariantsCreate page variants/views
FragmentsAdd UI fragments to extension points
Controller ExtensionsOverride/extend controller methods
App Descriptor ChangesModify manifest.json settings
OData ServiceAdd/replace OData services
Component UsagesAdd SAPUI5 component references
For adaptation details, see 
references/adaptation-projects.md
.
适配类型描述
控件变体创建页面变体/视图
片段向扩展点添加UI片段
控制器扩展重写/扩展控制器方法
应用描述文件修改修改manifest.json设置
OData服务添加/替换OData服务
组件引用添加SAPUI5组件引用
适配详情请参考 
references/adaptation-projects.md
。

AI-Powered Generation

AI驱动生成

Project Accelerator / Joule

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
根据业务需求生成完整的带Fiori UI的CAP项目。
输入格式: 文本、图片或两者结合
生成输出:
  • 实体定义和关联
  • 代码列表和值帮助
  • 列表报表应用
  • 对象页面配置
  • 示例数据
限制:
  • 不包含图表或专用页眉
  • 不要在需求中包含个人/敏感数据

AI Mock Data Generation

AI模拟数据生成

Generate contextual mock data using entity property names (requires SAP Build Code subscription).
根据实体属性名称生成上下文相关的模拟数据（需要SAP Build Code订阅）。

Project Functions

项目功能

FunctionCommand
Application Info
Fiori: Open Application Info
Project Validation
Fiori: Validate Project
Environment Check
Fiori: Open Environment Check
Data EditorVia Application Info page
Service Metadata
Fiori: Open Service Modeler
System ConnectionsManage SAP Systems in VS Code
功能命令
应用信息
Fiori: Open Application Info
项目验证
Fiori: Validate Project
环境检查
Fiori: Open Environment Check
数据编辑器通过应用信息页面访问
服务元数据
Fiori: Open Service Modeler
系统连接在VS Code中管理SAP系统

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
  1. 项目 - 验证package.json、manifest.json、ui5.yaml
  2. 注解 - 验证注解文件
  3. 规范 - 检查manifest和changes文件夹
  4. ESLint - 若已配置则运行ESLint

Building Blocks (OData V4)

构建块（OData V4）

Reusable UI components for custom pages and sections:
BlockUse Case
ChartData visualization
Filter BarQuery filtering
TableTabular data display
PageCustom page container
Rich Text EditorContent editing in custom sections
用于自定义页面和章节的可复用UI组件：
构建块适用场景
图表数据可视化
筛选栏查询筛选
表格表格数据展示
页面自定义页面容器
富文本编辑器在自定义章节中进行内容编辑

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:
bash
undefined
端口8080被占用: 系统会自动选择下一个可用端口
HTTPS/SSL错误: 配置浏览器信任本地证书
部署400错误: 检查 
/IWFND/ERROR_LOG
，在 
/IWFND/VIRUS_SCAN
中配置病毒扫描
调试部署:
bash
undefined

macOS/Linux

macOS/Linux

DEBUG=ux-odata-client npm run deploy
DEBUG=ux-odata-client npm run deploy

Windows

Windows

set DEBUG=ux-odata-client & npm run deploy
undefined
set DEBUG=ux-odata-client & npm run deploy
undefined

CLI Help

CLI帮助

bash
npx fiori help              # List available commands
npx fiori deploy help       # Deployment command help
bash
npx fiori help              # 列出可用命令
npx fiori deploy help       # 部署命令帮助

Migration from SAP Web IDE

从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
.
使用以下命令迁移现有项目：
Fiori: Migrate Project for use in Fiori tools
支持的项目类型: Fiori Elements（V2/V4）、Freestyle SAPUI5、适配项目、可扩展性项目
迁移后: 运行 
npm run deploy-config
更新部署配置。
迁移详情请参考 
references/getting-started.md
。

Guided Development (76+ Guides)

Guided Development（76+个指南）

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)
通过以下命令访问分步式实现指南：
Fiori: Open Guided Development
指南分类:
  • 构建块（图表、筛选栏、表格）
  • 页面元素（卡片、页眉Facets、章节）
  • 表格增强（列类型、操作）
  • 筛选与导航
  • 配置（变体管理、副作用）
  • 扩展（自定义操作、章节、列）

Reference Documentation

参考文档

For detailed information on specific topics:
有关特定主题的详细信息：

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
  • references/getting-started.md
    - 安装、迁移、ADT集成、命令
  • references/configuration.md
    - MTA、中间件、SAPUI5版本、项目功能
  • references/page-editor.md
    - 页面编辑器配置详情
  • references/annotations.md
    - 注解模式和示例
  • references/deployment.md
    - 部署配置详情
  • references/adaptation-projects.md
    - 适配项目工作流
  • references/preview.md
    - 预览和测试选项

Documentation Sources

文档来源

Primary Source: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs
Last Updated: 2025-11-22
SectionDocumentation 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 ProjectsRoot docs folder
SAP Resources:
主要来源: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs
最后更新: 2025-11-22
章节文档链接
入门指南
Getting-Started-with-SAP-Fiori-Tools/
应用生成
Generating-an-Application/
开发
Developing-an-Application/
预览
Previewing-an-Application/
部署
Deploying-an-Application/
项目功能
Project-Functions/
适配项目根文档文件夹
SAP资源: