使用SAP WebIDE創建SAP Fiori Elements應用

在新建項目菜單裡,

使用SAP WebIDE創建SAP Fiori Elements應用

Category選擇為SAP Fiori Elements,模板選擇為List Report Application:

使用SAP WebIDE創建SAP Fiori Elements應用


使用SAP WebIDE創建SAP Fiori Elements應用

該List Report Application消費的OData服務,從Service Catalog的下拉菜單裡選擇指向ES5系統的Destination,從中選擇EPM_REF_APPS_SHOP_SR這個服務:

使用SAP WebIDE創建SAP Fiori Elements應用

選擇Suppliers這個data collection:

使用SAP WebIDE創建SAP Fiori Elements應用

OData Collection選擇Suppliers:

使用SAP WebIDE創建SAP Fiori Elements應用

一切就緒後,運行:

使用SAP WebIDE創建SAP Fiori Elements應用

看到空白的頁面,這是因為我們尚未在該List Report Application裡指定更多有意義的annotation:

使用SAP WebIDE創建SAP Fiori Elements應用

新建一個annotation文件,用來存放我們的自定義註解:

使用SAP WebIDE創建SAP Fiori Elements應用


使用SAP WebIDE創建SAP Fiori Elements應用

而manifest.json也自動引用了我們剛剛創建的annotation.xml:

使用SAP WebIDE創建SAP Fiori Elements應用

新建一個annotation:

使用SAP WebIDE創建SAP Fiori Elements應用


使用SAP WebIDE創建SAP Fiori Elements應用

註解類型選擇為UI.LineItem:

使用SAP WebIDE創建SAP Fiori Elements應用

在UI.LineItem下再創建一個DataFieldWithURL註解:

使用SAP WebIDE創建SAP Fiori Elements應用

再添加一個UI.DataField註解。這樣,在Fiori Elements繪製的表格裡出現了兩列,分別通過UI.DataFieldWithUrl和UI.DataField實現。

使用SAP WebIDE創建SAP Fiori Elements應用


使用SAP WebIDE創建SAP Fiori Elements應用

在添加一個UI.PresentationVariant註解,實現排序功能:

使用SAP WebIDE創建SAP Fiori Elements應用

把UI.PresentationVariant.SortOrder.Common.SortOrder施加到Name字段上:

使用SAP WebIDE創建SAP Fiori Elements應用

這樣Name字段就支持自動排序了:

使用SAP WebIDE創建SAP Fiori Elements應用

通過UI.HeaderInfo註解,我們可以維護對用戶更友好的信息:

使用SAP WebIDE創建SAP Fiori Elements應用

分別通過UI.HeaderInfo的TypeName和TypeNamePlural維護HeaderInfo的單數和複數形式:

使用SAP WebIDE創建SAP Fiori Elements應用

效果如下:

使用SAP WebIDE創建SAP Fiori Elements應用


分享到:


相關文章: