Technical Articles
Development of a Fiori Elements ‘Overview Page’ based on a RAP OData
I was curious on how to best implement an Fiori Elements ‘Overview Page’ Layout based on an OData Service exposed by our SAP BTP, ABAP Environment. After a little “googling” I found several Articles, Blogs, or UI5 Extensions Guides about Overview Pages but no concrete Guide on what the necessary Steps are to create a executable App. Here are the steps I found with some trial and error on how to create a Fiori Elements Overview Page based on a RAP-based OData V2 Service.
Necessary Technical Objects
A Service Binding wich exposes an UI – V2 OData Service, instead of an UI – V4 OData which is used for List-Object Page Apps.
I wasn’t able to get it running with UI – V4 Odata, maybe this isnt supported yet?
Steps
- I use the BAS Template Generator to select the Overview page Template.
- I select my relevant System and OData V2 Service
And which Entity is the MainEntity where the Filter will be applied on
- and then let it generate.
- This will return an empty Overview Page.
- Using the Information shared in the UI5 SDK Article for Fiori Elements Extension Overview Page I was able to extend the manifest.json and add my first Table into the Overview Page.
"sap.ovp": {
"globalFilterModel": "mainModel",
"globalFilterEntityType": "<<<YourEntitySetHere>>>",
"containerLayout": "resizable",
"enableLiveFilter": true,
"considerAnalyticalParameters": false,
"cards": {
"<<<YourCardName>>>": {
"settings": {
"addODataSelect": true,
"entitySet": "<<<YourEntitySetHere>>>",
"listFlavor": "standard",
"listType": "extended",
"showLineItemDetail": true,
"sortBy": "<<<Field>>>",
"sortOrder": "descending",
"subTitle": "{{cardSubtitle}}",
"title": "{{cardTitle}}",
"defaultSpan": "auto"
},
"model": "mainModel",
"template": "sap.ovp.cards.table"
}
},
"disableErrorPage": false,
"smartVariantRequired": true,
"showBasicSearch": true,
"refreshIntervalInMinutes": 5,
"bHeaderExpanded": true
This is my current Endresult, defintly still a work in progress, but better than a blank Overview Page. 😛
My Current Overview Page
Its definitely cool to finally have a visible result, but it took alot of trial and error specifically with the OData – V2 and then with what coding is relevant in the Manifest.json. I would appreciate similar to the RAP feature Showcase, also a detailed Showcase for the Overview Page and its possibilities.
Thanks for reading, I will try and keep updating if I try additional Tricks in my Overview Page. 🙂 What have your experiences been with the Overview Page?
Thank you for creating a blog on generating Overview Page application, its very good to see people are easily creating application using Fiori Elements.
I would like to mention that Overview Page can be created not only with V2 service, but also with a V4 service. The steps is very much alike how application is created consuming a V2 service.
https://open.sap.com/courses/fiori-ea1
That's awesome, I will have to try it with a V4 Service. Thanks for the Link, while clicking through and reading some of the comments i found the following. Do you know if this still holds true, because that would explain my Issues with using OData V2 / V4?
Best Regards,
Xaver