天天看點

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

一個朋友向我咨詢,關于 SAP Fiori 頁面自動重新整理的實作方法。

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟
SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

如果是 Jerry 之前視訊 一步步建立 SAP Fiori Elements 應用 介紹的 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 上能夠找到。

将 Jerry 上述代碼倉庫的應用克隆到本地。該應用裡我使用的 OData 服務為著名的用于教學的 Northwind 服務,其 url 為:

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

将這個 url 配置成應用 manifest.json 檔案的 dataSources/mainService 區域内對應的 uri 字段值。這樣,運作時該 SAP UI5 應用消費的 OData 服務就确定下來了,無需我們手動編寫代碼執行個體化 OData Model.

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

在 mani fest.json 檔案 sap.ui5 區域裡,維護字段 rootView 的值,以确定該應用的根視圖名稱為:

sap.ui.jerry.odatatable.Table

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

在這個根視圖裡,我隻定義了一個 sap.m.Table 控件,并且在控制器裡編寫了幾行 JavaScript 代碼,實作該表格控件的周期性動态重新整理。

表格控件的擡頭用于顯示目前頁面重新整理次數的計數器。例如下圖表示,目前表格已經重新整理了 7 次

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟
SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

Table 控件的 items 屬性綁定到 OData 服務裡名為 Products 的 entitySet,用于顯示該 OData 服務提供的産品資料。

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

本地執行 node local.js 指令後,通路如下 url 以打開這個 SAP UI5 應用的頁面:

http://localhost:3002/odatatable/

能看到該 OData 服務傳回的總共 77 個産品資料,顯示在表格控件裡:

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟
SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

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

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

關于 SAP 應用伺服器端的分頁實作,可以參考 Jerry 之前的文章:

SAP UI 搜尋分頁技術

SAP OData程式設計指南

SAP UI的加載動畫效果和幽靈設計(Ghost Design)

如果在本地測試時,消費 Northwind OData 服務遇到跨域問題,可以按照 Jerry 之前的文章 用JavaScript通路SAP雲平台上的服務遇到跨域問題該怎麼辦,自己開發一個簡單的代理伺服器 來避免這個問題。

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟
SAP Fiori 頁面的周期性動态重新整理功能的實作步驟
SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

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

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟
SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

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

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

上圖第 11 行代碼裡,傳入 IntervalTrigger 構造函數的數字,即是定時器觸發的時間間隔,機關為毫秒。第 12 行 addListener 方法,注冊一個事件處理函數。每當定時器時間間隔到達時,觸發該函數的執行。

上圖第 17 行代碼,拿到 Binding 執行個體後,調用其 refresh 方法,會觸發向背景的 OData 請求,重新加載資料,進而達到重新整理表格顯示資料的目的:

https://sapui5.hana.ondemand.com/#/topic/6c47b2b39db9404582994070ec3d57a2#loio66a130fa4d10411b8fc90df00185554b
SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

關于上圖 SAP 幫助文檔介紹的 refresh 方法,其實還有一個知識點。如果我們把 IntervalTrigger 構造函數裡傳入的時間間隔調小,比如指定成每隔 0.1 秒觸發一次,這樣在 Chrome 開發者工具 network 标簽頁裡能看到大量狀态為 cancelled 的 OData 請求:

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

Jerry 之前的文章 SAP UI5 OData謠言粉碎機:極短時間内發送兩個Odata request,前一個會自動被cancel掉嗎 曾經分析過,在什麼樣的情況下,OData 請求會被 cancel. 大家如果有所遺忘,可以再回過頭去閱讀。

在控制器的 onExit 鈎子函數裡,可以調用 removeListener 方法,移除事件處理函數,以避免可能的記憶體洩漏。

SAP Fiori 頁面的周期性動态重新整理功能的實作步驟

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

更多閱讀

在沒有任何前端開發經驗的基礎上, 建立第一個 SAP Fiori Elements 應用

答網友提問:使用 SAP Fiori Tools 建立的 Fiori Elements 應用,如何進行二次開發?

本地開發好的 SAP Fiori Elements 應用,如何部署到 ABAP 伺服器上

深入掌握 SAP Fiori Elements 工作原理的前提條件:了解 Smart Field

深入了解 SAP Fiori Elements 工作原理系列之二:如何給 SAP Fiori Elements 應用添加自定義按鈕

SAP Fiori Elements 架構裡 Smart Table 控件的工作原理介紹

SAP Fiori Elements List Report Smart Table 列項目寬度計算的奧妙

繼續閱讀