当前位置：首页 > news >正文

SAP Fiori UI5 开发环境搭建和部署（含增强开发）

news 来源：原创 2025/6/10 6:33:41

先梳理一下 Fiori、SAPUI5 和 OpenUI5 的关系，SAPUI5 和 OpenUI5 是同一套前端框架的不同发行版本，主要区别在于：

SAPUI5

提供更多控件（尤其是企业级组件）和 SAP 专属功能（如 Fiori 主题、Analytical 控件）。
深度集成 SAP 生态系统（如 OData 服务、Fiori Launchpad、SAP Gateway）。
SAP 专有版本，仅限 SAP 客户/合作伙伴使用（需 SAP 许可证）。

OpenUI5

开源版本（Apache 2.0 许可证），可自由使用。
功能上缺少 SAP 专属控件和服务，但核心框架与 SAPUI5 一致。
适合非 SAP 环境或需要开源许可的项目。

Fiori 是基于 SAPUI5/OpenUI5 的设计规范和应用类型（如 Transactional、Analytical 应用）。

以下是使用 VSCode 工具进行 Fiori 开发的实践记录。

一环境搭建

1 安装 Nodejs（建议版本大于20）

2 安装开发工具 VSCode

3 安装 VSCode 插件，推荐安装这个插件包：

4 创建 SAP 连接：

点击 Test Connection 进行连接测试，如果提示证书问题，安装 VSCode 插件 Node Extra CA Certs，并参考这个文档解决证书问题：SAP Help Portal - SAP Online Help，如果测试通过，点击 Save。

二新建一个 UI5 工程（Freestyle 开发）

SAP UI5 的 Freestyle 开发（自由风格开发）是指在不依赖 SAP 标准工具或模板（如 SAP Fiori Elements）的情况下，完全自主设计、开发和构建 UI5 应用程序的方式。开发者需要手动编写代码，自定义应用的所有环节，从视图布局到业务逻辑，灵活度更高，但开发成本也更大。

进入 VSCode 并切换到目标工作目录。
在控制台执行命令 npm install --global @ui5/cli。
在 VSCode 按住 Ctrl+Shift+P 后调用 Open Application Generator 命令进行工程初始化（推荐），也可手动新建工程（参考 OpenUI5 SDK - Demo Kit，不推荐）。

初始化完成后，在控制台运行命名 npm run start 启动工程。

三生成 Fiori Adaptation 工程（UI5 增强开发）

增强开发是指在不直接修改 SAP 标准代码或标准应用的前提下，通过官方支持的扩展技术对现有功能进行定制化修改或功能追加。这种开发方式的核心是保持标准系统的稳定性，同时满足企业的个性化需求。其中包含 UI5 增强。如何进行 UI 增强开发呢？

1 查看标准应用文档

访问以下链接查询目标应用信息，通过应用ID或应用名称搜索目标应用：

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer

若查询结果为 UI5 开发的应用，则支持进行 UI5 增强开发。

2 工程初始化

在 VSCode 按住 Ctrl+Shift+P 后调用 Open Adaptation Project Generator，在页面上选择目标应用，生成 Adaptation Project：

3 编辑或运行应用

点击 Open Adaption Editor 进入编辑器，点击 Preview Application 运行应用。

四部署应用和发布磁贴

部署之前需要维护 Package ID 及 Request Number 等（在 SAP GUI 分别执行 SE80 和 SE09 完成创建）。

1 部署自开发应用

在 VSCode 按住 Ctrl+Shift+P 后调用 Open Application Info，然后选择 Create Deploy Configure 生成部署文件，填写时注意 Repository Name 不超过15个字符。运行 npm run deploy-test 测试部署（输出的日志相对更详细），通过后再运行 npm run deploy 进行正式部署。如果在线上修改了磁贴的 ICF Path 等信息，可能需要先执行 npm run undeploy，再执行 npm run deploy 才能生效。如果部署报 403 或 404，可能需要在 GUI 端手动创建 BSP 应用（注意要在部署的包下面创建，创建完需要激活一下）。如果部署时提示 No default virus profile active or found，可以在 GUI 端将 Virus Scan Switched Off 勾选上：

2 部署增强开发应用

在 VSCode 按住 Ctrl+Shift+P 后调用 Open Application Info，点击 Open Deployment Wizard 选择目标应用后点击 Deploy。

3 发布（自开发或增强开发）应用磁贴

进入 SAP Fiori Launchpad Application Manager 系统，点击 New Standard Catalog 创建 Technical Catalog（ID 要求以 Z _ 开头，含 TC，以 _COMMON 结尾）。

上面操作完成会自动跳转到 Open in SAP Fiori Launchpad App Manager（如果不跳转，可在Launchpad 搜索并进入应用 Launchpad Content Manager Client Specific，然后搜索刚建的 Catalog ID，选中后点击 Open in SAP Fiori Launchpad App Manager 按钮实现跳转），点击 Add App 创建应用并保存（后续如需修改点左上角 Edit），选择类型 SAPUI5 FIORI APP。
注意：Semantic Object 和 Action 要保证全局唯一，如果是标准 FIORI 应用的增强开发，Semantic Object 和 Action 要和标准应用的一致（标准库文档可查），选完后可带出其他数据，此外需要维护一个参数 sap-priority 为1来提升新应用的优先级，最后还需要补全标准应用的其他入参（标准库文档可查）。