移动开发工具包（MDK）是SAP云平台移动服务的一项功能，mobile development kit在mobile development kit编辑器中可视化新的iOS SDK控件。

其中一个新控件是image collection控件。该控件管理并显示一组标题为网格状排列的图像，您可以在不同的布局类型中配置这些图像。

image collection控件是一种很好的方法来显示产品目录或特色项目。在本博客中，我提供了有关此控件的详细信息以及如何基于示例服务创建产品目录预览。您还可以使用规则编辑器从图片中删除文本。我认为这是一个额外的好处，因为我们还没有太多的内容涵盖您可以使用规则编辑器执行的不同操作。这将发生变化。

我还为YouTube上的SAP技术频道创建了一个视频，展示如何使用控件。请返回查看详细信息一旦我的视频公开，请链接此博客。

开发者可以添加圆形或方形的图像集。您可以定义高度，以及您希望它是水平滚动、水平调整还是垂直调整。您可以设置一个目标，这样当单击图像时，它会导航到有关该图像的更多详细信息。这对于产品图像或项目目录是一个很好的选择。

标题：每个单元格上显示的标题文本，例如product name

Target:映射用于填充单元格中数据的OData实体集

Image:特定记录要显示的图像

ImageisCircular:设置为True时，图像以圆形显示。

图像高度：要显示的图像的高度

图像宽度：要显示的图像的宽度

布局类型：设置目录的布局

水平适合水平卷轴垂直

最小中间间距：两个项目之间的最小间距。默认值为20px

最小行距：设置为垂直时两行之间的最小间距。默认值为20px

说明：图像采集项目的显示标签

创建分区页并将图像采集控件拖到该页上。

单击图像集合并设置属性

目标：产品集合

在对象浏览器中，将查询选项设置为$top=10，以将此功能预览的结果限制为前10个产品结果。

图像：[我们将返回此结果。]职务：姓名保留ImageHeight、imagewidth、Minimum行距和MinimumInteritem间距的默认值LayoutType:HorizontalScroll或HorizontalFit

创建一个规则

现在，创建一个名为ProductImagePath的规则放置在图像字段中。

移动服务对示例服务中的图像使用相对路径，而不是将图像保存到后端。移动开发工具包无法区分完整路径和相对路径，所以对于示例服务，我们将创建一个规则来删除相对路径，只保留图像名称。我已将图像附加在本博客的末尾，您可以将它们添加到您的本地客户端。

注意：如果您的后端存储产品图像，您无需执行这样的规则，您可以像从后端添加任何其他数据一样添加图像。不过，这样做的好处之一是，淘客放单，您可以体验使用规则编辑器可以做的事情。

在规则中，特价云服务器，创建一个名为ImagePath的新变量。

将set clientAPI to block拖到rule上，并将clientAPI更改为ImagePath。

展开Text->Values并抓取quote块，将其拖到rule上，并将其放在前面添加的块的右侧。键入res://以启动本地访问图像的路径。

再次展开文本->简单，然后选择要附加文本块的项并将其拖到设置块下。将项目更改为imagePath。

现在，我需要删除相对URL路径，只保留图像名称。我将拖动位于"文本"->"高级"下的"in-text remove"块并将其拖动到右侧以附加文本块。

in-text remove块允许我们从SampleService后端的PictureUrl数据中获取相对路径文本，并删除它。

将clientAPI块拖到rule上，并将绑定设置为evaluateTargetPath。它位于clientAPI下。

现在，从同一节开始，我将拖动对象浏览器并将其放置在clientAPI->evaluateTargetPath块中。我将打开对象浏览器并从后端获取图片URL。

现在，智能家居物联网，我将指定要从URL中删除的文本。我将删除图像名称之前的整个相对路径。当我转到SAP云平台移动服务时。我转到Sample服务并单击产品集合的view data，在XML中搜索.png并复制图像名–/SampleServices之前的路径/ESPM.svc/resources/images/。我将把它作为要删除的文本。

现在我将告诉规则，这从一开始就不区分大小写。

现在，个人如何建站，将imagePath变量拖到规则返回部分的右侧。

规则现在已完成，我可以将规则添加到目录预览的图像属性字段。

返回目录预览页。打开图像属性字段的对象浏览器。找到获取图像名称的规则。

将图像放入MDK客户端

现在，在此处获取这些图像并将其放入MDK客户端。提取到.mdkproject->AppResources->iOS并重新运行创建-client.command命令.

让我们看看完成的申请表。我的电脑里有一个目录预览显示以下产品图像和名称的应用程序。

您可以自己添加一些额外的内容