以SAP Cloud for Customer SalesOrder的搜尋頁面為例：

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

我們看到的頁面裡顯示的資料，仍然是C4C基於的SAP UI5實現裡，採用AJAX呼叫，從C4C後臺系統讀取回前臺的。

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

將上圖高亮json請求儲存到本地細細檢視：

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

這個json資料格式的結構反映了SAP C4C什麼樣的資料模型呢？

答案是SAP C4C UI模型的data model標籤頁裡看到的資料結構：

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

上圖的欄位和我們從Chrome開發者工具裡觀察到的JSON data model的欄位，具有一一對應的關係：

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

那麼我們在UI上看到的Sales Order 表格裡顯示的資料，儲存在json 模型裡什麼地方呢？

首先在data model標籤頁裡，得知UI上的資料顯示，來自BO CustomerOrder：

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

而json資料裡的CustomerOrder，分為三部分：

1. FieldCatalog
2. Elements
3. Header
![](https://img-blog.csdnimg.cn/img_convert/cc4590a260bc80f5f0d72e56dd60b5ce.png)

FieldCatalog包含了CustomerOrder這個BO每個欄位的索引號：

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

比如索引19代表UUID欄位。

Elements部分的結構，包含了SAP C4C UI上顯示的實際資料。
![](https://img-blog.csdnimg.cn/img_convert/6f7af9fa867cc5e3e26a8d1dcc12f962.png)

SAP Cloud for Customer UI上的資料採取分頁顯示，總共281條sales order，分10頁顯示，每頁顯示30條資料：

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

索引19代表的欄位正是UUID，採取索引值的設計，避免了直接使用欄位名來描述每條記錄的key-value，減小了最後從後臺傳遞到前臺的json資料尺寸：

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

更多Jerry的原創文章，盡在："汪子熙":
![](https://img-blog.csdnimg.cn/img_convert/e4a8387dca5921e049fd05f96ef232ae.png)

SAP Cloud for Customer(C4C)前臺顯示的資料是如何從後臺讀取的

相關文章