通过 Jerry 这篇文章 [在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&token=1980816726&lang=zh_CN#rd) 介绍的步骤，创建一个简单的 SAP Fiori Elements 应用。

![](https://img-blog.csdnimg.cn/img_convert/3e6fbd3687447b0e3c487041b3c7391a.png)

在 Visual Studio Code 命令栏里，使用 start-mock，则能够以本地 mock 数据启动这个 Fiori Elements List Report 应用。

在项目工程文件里，找到 localService 文件夹下面的 metadata.xml, 定位到名为 SEPMRA_C_PD_ProductType 的 EntityType：

![](https://img-blog.csdnimg.cn/img_convert/511a7089a36968b4ee9a48e7ef2cd6fe.png)

这个 entityType 对应 manifest.json 文件里定义的 List Report 应用能够工作，所必需的 Main Entity Set：

![](https://img-blog.csdnimg.cn/img_convert/f21e90ceb052031c777b744f1d105c17.png)

在 本地元数据文件 metadata.xml 里，给 sap:label 的值维护成：产品类别。注意，sap:label 附近，就是另一个注解属性值：sap:value-list , 表明这个产品类别是一个下拉列表，且列表内的表项值固定。

![](https://img-blog.csdnimg.cn/img_convert/2114d80ebe3f037bdf820ed1a3a3edff.png)

冒号之前的 sap 这一 xml 文件命名空间，定义在 xml 文件头部：

![](https://img-blog.csdnimg.cn/img_convert/1e9d4b9fa424ae5595d6fc6c71747d91.png)

最终效果：

![](https://img-blog.csdnimg.cn/img_convert/1777a9d7abaf18e9e5b0c4f195a4c658.png)

同理，产品图片的修改方式：

![](https://img-blog.csdnimg.cn/img_convert/286e18235693ab7db456ae8fff56f911.png)

最后的效果：

![](https://img-blog.csdnimg.cn/img_convert/af1c1e376b0a574fb8f4fd75725acfa9.png)

注意：如果 online 运行，即连接 SAP 服务器消费 OData 服务时，必须将 OData 服务提供的注解也进行对应修改。否则，本文介绍的这些本地修改，将不会生效。

下图是连接 SAP 服务器后台 OData 服务渲染的 SAP Fiori Elements List Report 应用, 我们能注意到，本地的那些修改已经丢失了。

![](https://img-blog.csdnimg.cn/img_convert/332628bd257ea209eab36d52e425c3eb.png)

ITPub博客

SAP Fiori Elements 在本地测试模式下如何修改 List Report 里字段标签和图标

最新文章