sap-fiori-tools

SAP Fiori Tools 开发技能

相关技能

• sapui5：用于了解底层 UI5 框架详情、自定义控件开发和高级 UI 模式
• sap-cap-capire：用于 CAP 服务集成、OData 消费和后端服务配置
• sap-abap-cds：用于将 ABAP CDS 视图作为 OData 服务使用，或处理 ABAP 后端
• sap-btp-cloud-platform：用于部署目标、BTP destination 配置和 Cloud Foundry 部署
• sap-api-style：用于记录 OData API，或遵循 Fiori 应用的 API 文档标准
• sap-dependency-security：用于加强 npm/JavaScript 供应链控制、固定 MCP 服务版本以及更新依赖项

何时使用此技能

在生成 Fiori Elements 或 Freestyle SAPUI5 应用、配置 Page Editor/List Report/Object Page 行为、编辑注解、使用模拟或实时数据预览、部署到 ABAP 或 Cloud Foundry、构建适配项目，或使用 Fiori MCP/生成工具时，请使用此技能。

本指南全面介绍如何使用 SAP Fiori tools 扩展开发 SAP Fiori 应用。

目录

• 概述
• 示例项目
• 快速入门命令
• 应用生成
• Page Editor 配置
• 注解开发
• MCP 工具（AI 辅助开发）
• 捆绑资源

概述

SAP Fiori tools 是一组扩展，可简化 SAP Fiori elements 和 SAPUI5 应用开发。它包含六个主要组件：

组件	用途
Application Wizard	生成 Fiori Elements 和 Freestyle SAPUI5 模板
Application Modeler	用于配置的可视化 Page Map 和 Page Editor
Guided Development	分步功能实现指南
Service Modeler	可视化 OData 服务元数据和注解
Annotations Language Server	注解的代码补全、诊断和 i18n
Environment Check	验证设置和 destination 配置

最低 SAPUI5 版本：1.65+ 支持组件：CA-UX-IDE

示例项目

官方 SAP 示例仓库，包含使用 SAP Fiori tools 构建的 Fiori Elements 应用：

仓库：SAP-samples/fiori-tools-samples

文件夹	内容
V2/	OData V2 Fiori Elements 示例
V4/	OData V4 Fiori Elements 示例
cap/	CAP 项目集成示例
app-with-tutorials/	教程配套项目

快速入门：

git clone https://github.com/SAP-samples/fiori-tools-samples
cd fiori-tools-samples/V4/apps/salesorder
npm install
npm start

---

快速入门命令

通过命令面板（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

应用生成

Fiori Elements 页面布局

页面布局	OData V2	OData V4	用例
List Report 页面	是	是	浏览大型数据集，导航至详情
Worklist 页面	是	1.99+	处理工作项，完成任务
Analytical List Page	是	1.90+	数据分析、KPI 可视化
Overview Page	是	是	基于角色的仪表板、多卡片视图
Form Entry Object Page	是	是	结构化数据录入
Custom Page	否	是	使用 building blocks 构建可扩展的自定义 UI

数据源选项

1. SAP System - 连接到 ABAP 本地部署或 BTP 系统
2. CAP Project - 使用本地 Node.js 或 Java CAP 项目
3. EDMX File - 上传元数据以进行仅模拟开发
4. SAP Business Accelerator Hub - 仅用于开发/测试（已弃用）

生成的项目结构

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 配置

Page Editor 提供 Fiori Elements 页面的可视化配置。

列表报表页面元素

• 筛选字段 - 配置带值帮助的筛选栏
• 表格 - 配置列、操作和行选择
• 多个视图 - 创建带标签页的表格视图
• 分析图表 - 添加数据可视化

对象页面元素

• 页眉 - 配置页眉方面和操作
• 分区 - 表单、表格、标识、图表和分组分区
• 页脚 - 配置页脚操作

基于扩展的元素（OData V4）

元素	位置	说明
自定义列	表格	使用片段添加自定义列
自定义分区	对象页面	使用视图添加自定义分区
自定义操作	页眉/表格	添加带处理程序的操作按钮
自定义视图	列表报表	添加自定义标签页视图
控制器扩展	页面	覆盖生命周期方法

有关详细配置，请参阅 references/page-editor.md。

注解开发

语言服务器功能

• 代码补全（Ctrl/Cmd + Space）- 根据上下文提供建议
• 微代码片段 - 插入完整的注解块
• 诊断 - 根据词汇表进行验证
• i18n 支持 - 将可翻译字符串外部化
• 查看/转到定义 - 导航到注解源

支持的词汇表

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

注解文件位置

• CDS 文件：CAP 项目中的 .cds 文件
• XML 文件：webapp/annotations/*.xml

有关注解模式，请参阅 references/annotations.md。

预览选项

NPM 脚本

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

运行控制

通过 .vscode/ 文件夹中的 launch.json 配置。支持：

• 每个工作区使用多个运行配置
• VS Code 和 BAS 集成
• 应用间导航预览

模拟数据

• 数据编辑器 - 直观管理模拟数据
• AI 生成 - 生成符合上下文的模拟数据（需要 SAP Build Code）
• MockServer - 自动设置模拟服务器

有关预览详情，请参阅 references/preview.md。

部署

ABAP 部署

先决条件：

• SAP_UI 7.53+
• 已启用 SAPUI5 ABAP Repository 服务
• S_DEVELOP 授权

配置：

npx fiori add deploy-config    # Generate ui5-deploy.yaml
npm run deploy                  # Execute deployment

生成的文件：ui5-deploy.yaml、更新后的 package.json

Cloud Foundry 部署

先决条件：

• MTA 工具：npm i -g mta
• 带有 multiapps 插件的 CF CLI
• HTML5 Repository 服务实例

配置：

npx fiori add deploy-config    # Select Cloud Foundry
npm run build                   # Generate mta.yaml
npm run deploy                  # Deploy to CF

生成的文件：mta.yaml、xs-app.json、xs-security.json

有关部署详情，请参阅 references/deployment.md。

Fiori Launchpad 配置

通过以下方式添加 FLP 磁贴配置：

Fiori: Add Fiori Launchpad Configuration

必需参数：

• 语义对象（唯一标识符）
• 操作（例如，“display”）
• 标题
• 副标题（可选）

配置会使用入站导航更新 manifest.json。

适配项目

在不修改源代码的情况下扩展现有 Fiori 应用程序。

先决条件

本地部署（VS Code）：

• SAP_UI 7.54+、SAPUI5 1.72+
• 基础应用必须包含 manifest.json
• 不能使用 ABAP Cloud 软件包

S/4HANA Cloud 和 BTP ABAP：

• 应用程序必须“已发布以支持扩展”
• 采用带有开发人员租户的 3 系统架构
• 已分配所需的业务目录

适配工作流

1. 通过模板向导创建适配项目
2. 在适配编辑器中进行 UI 适配
3. 预览适配效果
4. 部署到 ABAP 代码库

适配功能

适配项	描述
控制变体	创建页面变体／视图
片段	向扩展点添加 UI 片段
控制器扩展	覆盖／扩展控制器方法
应用描述符更改	修改 manifest.json 设置
OData 服务	添加／替换 OData 服务
组件使用	添加 SAPUI5 组件引用

有关适配详情，请参阅 references/adaptation-projects.md。

AI 驱动的生成

Project Accelerator / Joule

根据业务需求生成包含 Fiori UI 的完整 CAP 项目。

输入格式：文本、图像或两者结合

生成内容：

• 实体定义和关联
• 代码列表和值帮助
• 列表报表应用
• 对象页配置
• 示例数据

限制：

• 不支持图表或专用标题
• 请勿在需求中包含个人／敏感数据

AI 模拟数据生成

使用实体属性名称生成上下文相关的模拟数据（需要 SAP Build Code 订阅）。

项目功能

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

项目验证检查

1. 项目 - 验证 package.json、manifest.json、ui5.yaml
2. 注解 - 验证注解文件
3. 规范 - 检查 manifest 和 changes 文件夹
4. ESLint - 如果已配置，则运行 ESLint

构建模块（OData V4）

用于自定义页面和区段的可复用 UI 组件：

模块	用例
图表	数据可视化
筛选栏	查询筛选
表格	表格数据展示
页面	自定义页面容器
富文本编辑器	在自定义区段中编辑内容

故障排除

常见问题

端口 8080 已被占用：系统会自动选择下一个可用端口

HTTPS／SSL 错误：配置浏览器信任 localhost 证书

部署出现 400 错误：检查 /IWFND/ERROR_LOG，在 /IWFND/VIRUS_SCAN 中配置病毒扫描

调试部署：

# macOS/Linux
DEBUG=ux-odata-client npm run deploy

# Windows
set DEBUG=ux-odata-client & npm run deploy

CLI 帮助

npx fiori help              # List available commands
npx fiori deploy help       # Deployment command help

从 SAP Web IDE 迁移

使用以下方式迁移现有项目：

Fiori: Migrate Project for use in Fiori tools

支持的类型：Fiori Elements（V2/V4）、Freestyle SAPUI5、适配项目、可扩展性项目

迁移后：运行 npm run deploy-config 以更新部署配置。

有关迁移详情，请参阅 references/getting-started.md。

引导式开发（76+ 个指南）

访问分步实施指南：

Fiori: Open Guided Development

指南类别：

• 构建模块（图表、筛选栏、表格）
• 页面元素（卡片、标题方面、区段）
• 表格增强（列类型、操作）
• 筛选与导航
• 配置（变体管理、副作用）
• 扩展（自定义操作、区段、列）

参考文档

有关特定主题的详细信息：

---

MCP 工具（AI 辅助开发）

fiori-tools MCP 服务（@sap-ux/fiori-mcp-server）将 AI 编码助手直接集成到 Fiori 开发中，提供语义文档搜索和程序化应用生成。

先决条件：Node.js 20+。无需身份验证。捆绑的 MCP 配置固定使用 @sap-ux/[email protected]；MCP 包版本由 sap-dependency-security 管理，并通过 npm run validate:mcp-security 验证。

可用工具

工具	描述
search_docs	对 Fiori Elements、Annotations、UI5 和 Fiori 工具文档进行语义搜索
list_fiori_apps	扫描目录，识别可供修改的现有 Fiori 应用
list_functionalities	返回创建或修改应用所支持的操作
get_functionality_details	获取特定操作所需的参数
execute_functionality	使用提供的参数执行创建或修改操作

典型工作流

1. 使用 search_docs 查找注解模式或 Fiori Elements 配置选项
2. 使用 list_fiori_apps 发现当前工作区中的应用
3. 使用 list_functionalities 查看支持哪些修改操作
4. 使用 get_functionality_details 了解所需参数
5. 使用 execute_functionality 应用更改

配套 MCP 服务

SAP 建议配合以下工具使用：

• sapui5 技能：包含用于 UI5 框架工具的 @ui5/mcp-server
• sap-cap-capire 技能：包含用于 CAP 后端的 @cap-js/mcp-server

---

捆绑资源

参考文档

• references/getting-started.md - 安装、迁移、ADT 集成和命令
• references/configuration.md - MTA、中间件、SAPUI5 版本和项目函数
• references/page-editor.md - Page Editor 配置详情
• references/annotations.md - 注解模式和示例
• references/deployment.md - 部署配置详情
• references/adaptation-projects.md - 适配项目工作流
• references/preview.md - 预览和测试选项

文档来源

主要来源：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 资源：

• Fiori 设计指南：https://experience.sap.com/fiori-design-web/
• SAP Help Portal：https://help.sap.com/docs/SAP_FIORI_tools