如下圖所示，我有一個 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)

一個典型的加了 SAP 註解的 OData 服務明細分析

相關文章