最近，在一个定制应用程序中，国内云服务器，我有机会创建一个定制应用程序，使用Fiori Elements list report floorplan显示sku（物品/材料）列表。自定义应用程序（下面显示的示例）具有上载和显示文章图像的功能，这些文章是使用注释和数据提供程序类的重新定义开发的，我认为值得共享，以防有人需要实现类似的功能。

我的准备：

因为这似乎是一个非常常见的要求SAP已经在一些标准的Fiori elements应用程序中使用了它，大数据是做什么的，我探讨了标准SAP是如何实现这一点的。探索标准应用程序（如果没有定制的预配置SAP on prem或cloud access）的最佳方法之一是从首选云提供商（AWS）上的SAP cloud Appliance Library启动一个试用SAP解决方案实例，Azure或GCP）.

实现：

显示和上传的实现在以下两个部分中描述：

fiori应用程序是使用fiori元素列表报表模板开发的。由于SAP Netweaver Gateway支持媒体类型实体，我们需要后端提供带有"媒体"类型注释（m:HasStream="true"）的实体类型的图像数据。

下面是实体数据模型的示例：

我的实现基于CDS视图，但在SEGW OData服务中是基于代码的数据模型实现生成器也会这样做。

主实体被绑定到列表报告的智能表上，该智能表允许我们在fiori列表报告应用程序中显示物品编号（matnr）、物品描述等字段。主实体ZïCïu SKUIMAGEType与图像源实体（ZïIïu IMAGEType）相关联，该图像源实体具有"mimeïtype"属性，使该实体能够通过网关表示为流数据。

好的！解释够了，让我们直接进入实现步骤。

注意：代码片段仅为示例，适当调整以适合您自己的需求[例如。，用您自己的名称空间替换/删除。]

我们使用两个CDS视图，相应地将生成两个实体类型，如上图所示。

CDS 1:ZCDS\U C\U SKUIMAGE

CDS 2:ZCDS\U I\U IMAGE

，第二个CDS视图基于一个透明的表Z\u cat\u sku，人工智能书，该表存储文章图像的信息，如图像密钥、mime类型、材料的图像url。

一个图像密钥对于为文章上传的每个图像都是唯一的。可以选择使用GUID或类似的方法使其唯一，但是为了使主题更简单，云服务器，示例仅使用从数字范围对象生成的数字。

同样在第一个CDS视图中，我们有一个填充属性"GetUrl"的逻辑。不要强调如上所示的确切逻辑，其思想是将属性绑定到fiori list report app中的Image列。由于图像数据是通过网关提供的，因此我们需要一个URL，该URL指向具有$value OData查询选项的图像媒体实体。示例URL如下：

稍后，我们将看到上面的URL将以流数据的形式获取实际图像内容，新云，因为我们将在/iwbep/if\mgw\u appl\u srv\u runtime~get\u DPC\u EXT class的stream方法中实现一些逻辑。

c.重新定义MPC\u EXT class:SEGW tcode生成运行时人工制品后，重新定义MPC\u EXT的方法DEFINE类

在gateway系统中注册后，测试您的OData服务、gateway客户端（/IWFND/GW\u client tcode）

在SAP Web IDE中使用模板创建列表报表应用程序，并根据需要应用适当的注释以包含列

对于图像列，"添加批注"UI.IsImageUrl""到绑定到图像列的属性"GetUrl"。示例注释如下：

运行应用程序，图像将很好地呈现！

以下是chrome浏览器开发者工具"网络"页签中后台服务GET请求的几个快照。

结论：

在这篇博文中，我们看到了如何使用媒体类型实体和UI注释在fiori列表报表的列中显示图像。在下一部分中，我们将讨论如何在单击另一列中的按钮时上载列表报表中每一行的图像。