Pre-Filtering an Line Item Table in Fiori Elements Object Page

🔢 Implemented in S/4 HANA ON PREMISE 2023 – SP02; UI5 Version 1.120.14

While building a standard SAP Fiori Elements application consisting of a List Report and an ObjectPage, I had the requirement to display a child entity as a table directly within the Object Page.

The table was added using a @UI.facet annotation with a #LINEITEM_REFERENCE pointing to the navigation property of the child entity.

Not sure how to add child entities to an existing RAP BO? Have a look at the blog post How to add child entities to an existing RAP BO, where i walk through the complete implementation step by step.

@UI.facet: [
...
{

id: 'VKR_ITEMS',

parentId: 'TPC_SECTION',

type: #LINEITEM_REFERENCE,

targetElement: '_VKRItem',

targetQualifier: 'VKR_ITEM',

label: 'VKR Konten',

position: 22

},
...
]

In addition to displaying the child entity, the table should be pre-filtered. I haven’t found a way to implement this requirement using CDS annotations. That’s why i created an Object Page Extension. The extension uses the sap.ui.mdc.p13n.StateUtil class.

The implementation first checks whether a filter state already exists. This prevents overriding user-defined filters or personalization settings. If no filters are present, the predefined filter values are applied to the table.

sap.ui.define([
    "sap/ui/core/mvc/ControllerExtension",
    "sap/ui/mdc/p13n/StateUtil"
], function (ControllerExtension, StateUtil) {
    "use strict";
    return ControllerExtension.extend(
        "xxx.ext.ObjectPageExt",
        {
            override: {
                routing: {
                    onAfterBinding: async function () {
                        //prefiltering the table with currency EUR and delta not equal to 0
                        const aTables = this.base.getView().findAggregatedObjects(
                            true,
                            o => o.isA("sap.ui.mdc.Table")
                        );

                        const oTable = aTables.find(
                            t => t.getId().includes("_VKRItem")
                        );

                        const oState = await StateUtil.retrieveExternalState(oTable);

                        if (!oState || !oState.filter || Object.keys(oState.filter).length === 0) {
                            StateUtil.applyExternalState(
                                oTable,
                                {
                                    filter: {
                                        Currency: [{
                                            operator: "EQ",
                                            values: ["EUR"]
                                        }],
                                        Delta: [{
                                            operator: "NE",
                                            values: [0]
                                        }]
                                    }
                                }
                            );
                        }
                    }
                }

            }
        }
    );
});