一個朋友向我諮詢，關於 SAP Fiori 頁面自動重新整理的實現方法。

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

如果是 Jerry 之前影片 [一步步建立 SAP Fiori Elements 應用](https://www.zhihu.com/zvideo/1379734590119137280) 介紹的 SAP Fiori Elements Overview 應用，要實現頁面自動重新整理比較容易，直接在 manifest.json 裡使用屬性 refreshIntervalInMinutes 定義重新整理時間間隔即可。

但這位朋友諮詢的 SAP Fiori 頁面，顯然是指採取 SAP UI5 Freestyle 方式開發的頁面。所謂 Freestyle 開發方式，是指不借助 SAP Fiori Elements 框架，而是使用 SAP UI5 SDK，由應用開發人員自行編寫應用的檢視和控制器邏輯。

要實現頁面重新整理，一種容易想到的思路就是，讓 SAP UI5 應用的 Controller 層，週期性地向後臺發起資料請求。一旦最新的資料響應從後臺返回到瀏覽器，根據 SAP UI5 MVC 設計，模型資料 (Model) 的更新則會導致檢視 (View) 的自動更新。

本文采取上述思路實現 SAP Fiori 頁面自動重新整理功能。當然如果大家有更好的實現方式，歡迎留言指教。

本文介紹的例子應用的所有程式碼，在我的 [Github](https://github.com/wangzixi-diablo/ui5-toolset/tree/main/odata-table) 上能夠找到。

將 Jerry 上述程式碼倉庫的應用克隆到本地。該應用裡我使用的 OData 服務為著名的用於教學的 Northwind 服務，其  url 為：

https://services.odata.org/Northwind/Northwind.svc

將這個 url 配置成應用 manifest.json 檔案的 dataSources/mainService 區域內對應的 uri 欄位值。這樣，執行時該 SAP UI5 應用消費的 OData 服務就確定下來了，無需我們手動編寫程式碼例項化 OData Model.

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

在 manifest.json 檔案 sap.ui5 區域裡，維護欄位 rootView 的值，以確定該應用的根檢視名稱為：

sap.ui.jerry.odatatable.Table

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

在這個根檢視裡，我只定義了一個 sap.m.Table 控制元件，並且在控制器裡編寫了幾行 JavaScript 程式碼，實現該表格控制元件的週期性動態重新整理。

表格控制元件的抬頭用於顯示當前頁面重新整理次數的計數器。例如下圖表示，當前表格已經重新整理了 7 次。

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

Table 控制元件的 items 屬性繫結到 OData 服務里名為 Products 的 entitySet，用於顯示該 OData 服務提供的產品資料。

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

本地執行 node local.js 命令後，訪問如下 url 以開啟這個 SAP UI5 應用的頁面：

http://localhost:3002/odatatable/

能看到該 OData 服務返回的總共 77 個產品資料，顯示在表格控制元件裡：

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

同時，在 Chrome 開發者工具裡觀察到總共 4 個 batch 請求。這是因為 Northwind OData 服務總共包含 77 個產品，而單次的 batch 請求，由於伺服器的分頁實現，一次只返回 20 條資料，故總共需要 77 / 20 + 1 = 4 次 batch 請求。

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

關於 SAP 應用伺服器端的分頁實現，可以參考 Jerry 之前的文章：

*   [SAP UI 搜尋分頁技術](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484840&idx=1&sn=3e6d5397faa6f69579992337e7125bac&chksm=ead5b73fdda23e29a594a833d6c68d1fc26ac8077c54997b4d2b666fd1815e1d05c227ca3fa7&scene=21#wechat_redirect)

*   [SAP OData程式設計指南](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484882&idx=1&sn=c396c7fd19d99b73120a8c7fc3bb897c&chksm=ead5b745dda23e535d3f3aa8c586f08ce1b4d541fdb25996a81660548550727f8271e255dda5&scene=21#wechat_redirect)

*   [SAP UI的載入動畫效果和幽靈設計(Ghost Design)](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491512&idx=1&sn=a44d166f7685b7a23aabaa22bc46c3a7&chksm=ead5ad2fdda22439755b9434a7364afd97356e1a7a623beb94f5375dc2ec47559d9efa60985f&scene=21#wechat_redirect)

如果在本地測試時，消費 Northwind OData 服務遇到跨域問題，可以按照 Jerry 之前的文章 [**用JavaScript訪問SAP雲平臺上的服務遇到跨域問題該怎麼辦**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484588&idx=1&sn=59f4ea3c55f9ca20ccac2fbae2a54a2d&chksm=ead5b63bdda23f2dad64acfc8ddc025181eea5a2301afd649c979b6fdc2e8552e04b4e089db3&scene=21#wechat_redirect)，自己開發一個簡單的代理伺服器 來避免這個問題。

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

如果實在覺得麻煩，使用如下的命令列啟動 Chrome，暫時禁掉其安全檢查(不推薦)：

> --user-data-dir="C:/temp" --disable-web-security

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

最後，在控制器裡想辦法實現週期性定時操作。很多朋友建議使用瀏覽器環境下原生的 setInterval 或者 setTimeout 等 API:

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

其實 SAP UI5 提供了基於 setTimeout 封裝的 API，sap.ui.core.IntervalTrigger，使用方式如下圖所示：

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

上圖第 11 行程式碼裡，傳入 IntervalTrigger 建構函式的數字，即是定時器觸發的時間間隔，單位為毫秒。第 12 行 addListener 方法，註冊一個事件處理函式。每當定時器時間間隔到達時，觸發該函式的執行。

上圖第 17 行程式碼，拿到 Binding 例項後，呼叫其 refresh 方法，會觸發向後臺的 OData 請求，重新載入資料，從而達到重新整理表格顯示資料的目的:

https://sapui5.hana.ondemand.com/#/topic/6c47b2b39db9404582994070ec3d57a2#loio66a130fa4d10411b8fc90df00185554b

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

關於上圖 SAP 幫助文件介紹的 refresh 方法，其實還有一個知識點。如果我們把 IntervalTrigger 建構函式里傳入的時間間隔調小，比如指定成每隔 0.1 秒觸發一次，這樣在 Chrome 開發者工具 network 標籤頁裡能看到大量狀態為 cancelled 的 OData 請求：

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

Jerry 之前的文章 [**SAP UI5 OData謠言粉碎機：極短時間內傳送兩個Odata request,前一個會自動被cancel掉嗎**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491291&idx=1&sn=237b0f4a83ffa8e047c7510d64a20dd6&chksm=ead5ac4cdda2255ae10700efd736c8f21d11bbf328149034a0d3df848667db2c6b13cf316fed&scene=21#wechat_redirect) 曾經分析過，在什麼樣的情況下，OData 請求會被 cancel. 大家如果有所遺忘，可以再回過頭去閱讀。

在控制器的 onExit 鉤子函式里，可以呼叫 removeListener  方法，移除事件處理函式，以避免可能的記憶體洩漏。

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

大家如果有更好的實現方式，歡迎留言指教。

**更多閱讀**

*   [在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492035&idx=1&sn=8373625310d71b4c8cc73612756a8168&chksm=ead65354dda1da4239a6442c577efee19b826d92b7372d4a551cd7af1957bd82fc002e34c2fe&scene=21#wechat_redirect)

*   [答網友提問：使用 SAP Fiori Tools 建立的 Fiori Elements 應用，如何進行二次開發？](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492113&idx=1&sn=5d004d151e59ac262a15fdf79869934c&chksm=ead65086dda1d99092e784b7937cc23a6641f7692e0048d31412c427e8042fa071a9fe8f4691&scene=21#wechat_redirect)

*   [本地開發好的 SAP Fiori Elements 應用，如何部署到 ABAP 伺服器上](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492152&idx=1&sn=b4f365a645779e1c57064b747d64ea61&chksm=ead650afdda1d9b9761fef55001935a8bd12aeda621a78edeafa7ee4cc154121bf76d7ab42c1&scene=21#wechat_redirect)

*   [深入掌握 SAP Fiori Elements 工作原理的前提條件：理解 Smart Field](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492283&idx=1&sn=716ba26a34b3cb071ba58c74945ad9da&chksm=ead6502cdda1d93a7c4b2efc5144ed77dfd619edd045e3ca7dcdd0e74221b605ad54b06fe4b6&scene=21#wechat_redirect)

*   [深入理解 SAP Fiori Elements 工作原理系列之二：如何給 SAP Fiori Elements 應用新增自定義按鈕](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492320&idx=1&sn=8e294788e4002f1a1d2efd00d075eee0&chksm=ead65077dda1d961f69684f665d4ad0be1b442a2e316b633a05834c75d50f3198e7a6efdb781&scene=21#wechat_redirect)

*   [SAP Fiori Elements 框架裡 Smart Table 控制元件的工作原理介紹](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492348&idx=1&sn=f134e5418350197afcae1d4836de9be0&chksm=ead6506bdda1d97d5401bb675857409d4ea09897b86fdaa639fc72fd74116c4e7a2bbd1d7d0d&scene=21#wechat_redirect)

*   [SAP Fiori Elements List Report Smart Table 列專案寬度計算的奧妙](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492410&idx=1&sn=fb80aeae21e11046848a6d67951374ce&chksm=ead651addda1d8bbdd08ee6c24c60116b45511c752b0b09b2cf20226bb1e1b0eff7ac495ef28&scene=21#wechat_redirect)

SAP Fiori 頁面的週期性動態重新整理功能的實現步驟

相關文章