天天看點

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

筆者之前的文章​​到底什麼樣的 ABAP 系統能運作 Fiori 應用​​曾經提到,我們可以把SAP GUI裡的傳統事務碼放到SAP Launchpad裡啟動,并在浏覽器裡運作。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

這是事物碼 SE80 在浏覽器裡運作的界面:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

筆者最初注意到這種将SAP GUI裡的事務碼運作在浏覽器裡的做法,是在日常工作的測試時,發現Fiori Launchpad裡這個Create Material的tile.

回憶一下,原生的Fiori應用,無論我們在頁面内進行何種點選操作,都不會跳轉到一個全新的頁面去,即不會打開一個新的浏覽器視窗,或者一個新的标簽頁——Fiori原生應用,所有的使用者操作都在一個頁面内完成,頁面的切換通過SAP UI5的router元件完成,這是一個典型的Single Page Application的特征。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

反之,當我點選了上圖Create Material tile之後,啟動的應用是在另一個新的Chrome标簽頁裡打開并操作的,請大家注意上圖紅色新開啟的标簽頁。

這就說明,這個Create Material tile背後的應用不是基于SAP UI5開發的Fiori原生應用。

那麼它又是用什麼技術開發的呢?仔細觀察url:

​​https://:44311/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=928&sap-language=EN#Material-create?sap-ui-tech-hint=GUI​​ 發現了這個片段:sap-ui-tech-hint=GUI

這暗示我們,該應用的UI是基于SAP GUI繪制的。

我們在浏覽器裡打開該應用:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

把上圖該應用的界面同SAP GUI裡S/4HANA的物料主資料建立事務碼MM01的界面做對比:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

發現除了外觀風格外,二者的字段名稱,位置,布局完全一緻。結合種種我們觀察到的結果,顯然這個Create Material tile指向的應用是基于SAP GUI裡MM01事務碼包裹而成的。

在浏覽器裡打開該tile,在Chrome開發者工具中把tile所屬的Fiori Catalog ID記錄下來:SAP_CMD_BC_PR_MAINT

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

在Fiori Launchpad裡根據該ID打開對應的catalog,發現有好幾個和Material相關的跳轉對象,其類型都為SAP GUI裡的Transaction:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

我們之前發現的url片段,sap-ui-tech-hint=GUI,就配置在這裡:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

跳轉的目的事務碼ID MM01,配置在此處。同時Device Types裡隻支援桌面,這沒什麼問題,因為SAP GUI通過浏覽器渲染出來的界面,不像SAP UI5那樣具有響應式布局的功能,是以隻能運作在桌面浏覽器裡。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

在運作時,一旦SAP UI5架構代碼解析到sap-ui-tech-hint參數的值為GUI,就執行對應的渲染邏輯。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

在Chrome開發者工具的Sources标簽頁裡,能看到gui/sap/its這個路徑片段。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

ITS即Internet Trasaction Server,SAP Netweaver裡一項非常古老的技術,這個技術提供的元件能解析使用SAP GUI技術開發出的screen的中繼資料并渲染成HTML,進而能夠讓SAP GUI的事務碼運作在浏覽器裡。

關于SAP ITS in SAP NetWeaver Application Server的更多介紹,參考SAP ​​幫助文檔​​。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

如果我們想體驗ITS,也很容易。SICF事務碼,輸入webgui,執行:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

發現這個節點正好位于本文正在讨論的its節點下:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

右鍵單擊webgui,選擇Test Service:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

自動彈出了浏覽器視窗,顯示的頁面同使用SAP GUI登入系統後顯示的初始頁面一緻。

接下來可以像使用SAP GUI那樣,在浏覽器裡輸入事務碼并執行了。比如SE38進入ABAP編輯器:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節
關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

下面介紹如何将事務碼 SE80置于SAP Fiori Launchpad并在浏覽器裡運作。

本文基于的SAP UI5版本号為1.38.9:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

根據英文部落格的網友回報,在UI5 1.52.1,S/4HANA 1709上測試通過。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

假設我們想把在Fiori Launchpad上啟動SE80應用的tile配置到這個名叫“SAP Fiori Extensibility”的catalog去,

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

首先可以打開Chrome開發者工具,重新重新整理頁面,在Network标簽頁裡打開Fiori頁面加載産生的HTTP請求,在請求正文裡把上圖catalog ID抄下來:SAP_FIORI_EXTENSIBILITY.

如果不想用Chrome開發者工具,也可以直接登入背景,通過查詢登入使用者配置設定的PFCG角色,也能找到這個ID:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

打開Fiori Launchpad Designer,輸入剛才找到的catalog ID,打開,建立一個新的tile:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

維護tile标題,Semantic Object,Action和參數。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

儲存這個tile,自動生成一個url,後續點選該tile後,新打開的浏覽器視窗就會加載它。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

下一步我們需要指定這個tile點選後跳轉的目标對象(Target Mapping):

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

在Intent裡選擇剛才建立tile時維護的Semantic Object和Action,在Target區域,Application Type選擇Transaction,隻有這樣才能在浏覽器裡打開SAP GUI裡的事務碼。Transaction字段維護成SE80.

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

儲存之後,在Target Mapping清單裡看到一條新生成的記錄:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

最後一步,将這個建立的tile配置到SAP Fiori Extensibility這個catalog裡。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節
關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

點選Tile,SE80事務碼能夠如我們期望的方式在浏覽器裡打開了。

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

注意這種方式打開的事務碼,實際上是運作在Fiori Launchpad所部署在的gateway系統上。如果你的Fiori解決方案,gateway系統和背景系統是兩台不同的伺服器,需要在SPRO Manage SAP System Aliases裡維護一條記錄,通過該記錄把一個System Alias映射到一個在SM59裡建立的,指向背景系統的RFC Destination. 假設這個Alias取名為S4CMD:

關于 SAPGUI 事物碼在 Fiori Launchpad 中嵌入運作的技術細節

然後把該Alias維護到tile的Target Mapping裡即可。

總結