如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

i042416發表於2019-06-22

如果我們手上已經有可以正常工作的OData服務,無論位於ABAP on-premise系統還是public上的internet OData service,都可以用SAP WebIDE裡的Fiori建立嚮導,幾分鐘之內輕鬆建立出可以持續開發的UI5應用。

開啟SAP雲平臺上的WebIDE,New->Project from Template:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

選擇Master Detail風格的Fiori應用:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用


如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

這裡就要指定這個UI5應用消費的OData服務url了。下拉選單裡看到的是一個我在SAP雲平臺建立的Destination,指向on premise系統:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

url路徑選擇/sap/opu/odata/sap/CRM_OPPORTUNITY,做過CRM的朋友們會知道這個路徑指向的是CRM ABAP裡的OData服務CRM_OPPORTUNITY:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用


如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

點選Test,會解析出OData服務的metadata,然後可以點Next按鈕:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

點了Next之後,需要指定Master list和detail檢視裡重要欄位的繫結路徑。這些欄位的說明在上圖右邊的縮圖裡有展示。

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

點finish後,應用成功建立。執行應用:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

最後渲染的應用如下:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

至此我們沒有編寫一行程式碼,就得到了一個可以工作的master-detail風格的Fiori應用。

壓縮過後webIDE自動生成的JavaScript總共程式碼也不過500多行:

如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用

要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":


如何用SAP WebIDE的Fiori建立嚮導基於ABAP OData service快速建立UI5應用


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2648447/,如需轉載,請註明出處,否則將追究法律責任。

相關文章