Development of a Fiori Elements 'Overview Page' based on a RAP OData

[Xaver]

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

1. I use the BAS Template Generator to select the Overview page Template.


2. I select my relevant System and OData V2 Service


3. And which Entity is the MainEntity where the Filter will be applied on


4. and then let it generate.


5.  This will return an empty Overview Page.


6. 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?