筆者之前的文章[到底什麼樣的 ABAP 系統能執行 Fiori 應用](https://xie.infoq.cn/article/a3dec607c0c7247d0ae33963d)曾經提到，我們可以把SAP GUI裡的傳統事務碼放到SAP Launchpad裡啟動，並在瀏覽器裡執行。

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

這是事物碼 SE80 在瀏覽器裡執行的介面：

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

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

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

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

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

這就說明，這個Create Material tile背後的應用不是基於SAP UI5開發的Fiori原生應用。
那麼它又是用什麼技術開發的呢？仔細觀察url:

https://<hostname>: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繪製的。
我們在瀏覽器裡開啟該應用：

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

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

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

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

在瀏覽器裡開啟該tile，在Chrome開發者工具中把tile所屬的Fiori Catalog ID記錄下來：SAP_CMD_BC_PR_MAINT

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

在Fiori Launchpad里根據該ID開啟對應的catalog，發現有好幾個和Material相關的跳轉物件，其型別都為SAP GUI裡的Transaction：

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

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

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

跳轉的目的事務碼ID MM01，配置在此處。同時Device Types裡只支援桌面，這沒什麼問題，因為SAP GUI透過瀏覽器渲染出來的介面，不像SAP UI5那樣具有響應式佈局的功能，因此只能執行在桌面瀏覽器裡。

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

在執行時，一旦SAP UI5框架程式碼解析到sap-ui-tech-hint引數的值為GUI，就執行對應的渲染邏輯。

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

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

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

ITS即Internet Trasaction Server，SAP Netweaver裡一項非常古老的技術，這個技術提供的元件能解析使用SAP GUI技術開發出的screen的後設資料並渲染成HTML，從而能夠讓SAP GUI的事務碼執行在瀏覽器裡。

關於SAP ITS in SAP NetWeaver Application Server的更多介紹，參考SAP [幫助文件](https://help.sap.com/saphelp_nw70/helpdata/en/46/668d4b72255de4e10000000a1553f6/frameset.htm)。

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

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

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

發現這個節點正好位於本文正在討論的its節點下：

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

右鍵單擊webgui，選擇Test Service：

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

自動彈出了瀏覽器視窗，顯示的頁面同使用SAP GUI登入系統後顯示的初始頁面一致。
接下來可以像使用SAP GUI那樣，在瀏覽器裡輸入事務碼並執行了。比如SE38進入ABAP編輯器：

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

下面介紹如何將事務碼 SE80置於SAP Fiori Launchpad並在瀏覽器裡執行。
本文基於的SAP UI5版本號為1.38.9:

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

根據英文部落格的網友反饋，在UI5 1.52.1，S/4HANA 1709上測試透過。

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

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

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

首先可以開啟Chrome開發者工具，重新重新整理頁面，在Network標籤頁裡開啟Fiori頁面載入產生的HTTP請求，在請求正文裡把上圖catalog ID抄下來：SAP_FIORI_EXTENSIBILITY.

如果不想用Chrome開發者工具，也可以直接登入後臺，透過查詢登入使用者分配的PFCG角色，也能找到這個ID：

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

開啟Fiori Launchpad Designer，輸入剛才找到的catalog ID，開啟，建立一個新的tile：

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

維護tile標題，Semantic Object，Action和引數。

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

儲存這個tile，自動生成一個url，後續點選該tile後，新開啟的瀏覽器視窗就會載入它。

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

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

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

在Intent裡選擇剛才建立tile時維護的Semantic Object和Action，在Target區域，Application Type選擇Transaction，只有這樣才能在瀏覽器裡開啟SAP GUI裡的事務碼。Transaction欄位維護成SE80.

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

儲存之後，在Target Mapping列表裡看到一條新生成的記錄：

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

最後一步，將這個新建的tile配置到SAP Fiori Extensibility這個catalog裡。

![](https://img-blog.csdnimg.cn/img_convert/3e12bb8e5ad2350bb7fc09d4d66a468a.png)
![](https://img-blog.csdnimg.cn/img_convert/97f2430b20b7d1bf3df414d09a19b167.png)

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

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

注意這種方式開啟的事務碼，實際上是執行在Fiori Launchpad所部署在的gateway系統上。如果你的Fiori解決方案，gateway系統和後臺系統是兩臺不同的伺服器，需要在SPRO Manage SAP System Aliases裡維護一條記錄，透過該記錄把一個System Alias對映到一個在SM59裡建立的，指向後臺系統的RFC Destination. 假設這個Alias取名為S4CMD：

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

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

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

# 總結

本文前半部分，首先介紹了將 SAPGUI 傳統的事物碼，嵌入到 Fiori Launchpad 中啟動並在瀏覽器裡執行的技術原理，接著以每一位 ABAP 開發人員每天都會使用的事物碼 SE80 為例，介紹了將其配置到 Fiori Launchpad 的詳細步驟。</hostname>

關於 SAPGUI 事物碼在 Fiori Launchpad 中嵌入執行的技術細節

相關文章