如下图所示，我有一个 SAP UI5 应用，使用 SAP UI5 SmartTable 控件，消费了一个施加了 sap 命名空间的 OData 服务。关于这个 SAP UI5 应用更多细节，请查看我这篇文章：[如何以 mock server 的方式本地启动 SAP UI5 应用，使它不连接服务器端 OData 服务](https://zhuanlan.zhihu.com/p/370597942)。

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

本文详细分析该应用消费的 OData 服务设计。

这个 OData 服务的版本是 2.0，包含三个 EntityType 和三个 Annotations：

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

其中 Product entitytype，key 为属性 ProductId:

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

命名空间为 com.sap.wt05:

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

而 Product entityType, 具有 LineItem 注解，注解里定义了四个 DataField，分别是：ProductId, Price，Name 和 Category，这四个属性，就是最后渲染而成的四个表项：

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

如果我在 metadata.xml 里给属性 productId 添加一个 sap:label 属性：

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

最后的效果：
![](https://img-blog.csdnimg.cn/img_convert/9cc09defc93d0557b79c82f5846b093b.png)

这个表格本身也是响应式 (responsive)的，因此其控件大小可以随着屏幕尺寸的变化而变化，达到最佳显示效果：

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

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

ITPub博客

一个典型的加了 SAP 注解的 OData 服务明细分析

最新文章