Extending a Fiori Elements Object Page to fire a function on every page switch

[former_member188650]

Hi experts,

I have a CDS view exposed as a Fiori Elements application. I would like to add a custom table to the Object Page screen you navigate to when you click on the line from the List Report. I have successfully done this by creating an Extension, and now I have a view.xml and a controller.js which adds the Facet to the Object Page, and the table is set up in the XML view. These files are in the 'ext' folder in the app folder in WebIDE Full Stack.

My question is how can I add some functionality to the controller to detect every page switch? I want to update the JSONModel with the data for the current line item I'm looking at, in order to populate the custom table.

I have looked at the attachRouteMatched() function of the Router, but this does not fire the first time, and seems to fire on navigation back to the List Report too, which means the Model is updated with the previous item's data, not the current one.

I have tried adding an event delegate of onBeforeShow which is what I use on my normal SAPUI5 apps, but this does not work here. Using onBeforeRendering lifecycle of course only runs the first time the Object Page is navigated to.

Does anyone know how I can fire a function every time the app navigates to the Object Page from the List Report?

Many thanks

[maheshpalavalli]

Hi Matthew Kennedy,

You need to create the extension for the object page(webide) then in the controller you need to write the below code.

sap.ui.controller(listreptest.ext.controller.ObjectPageExt", {
	onInit: function (oEvent) {

                // The below function will get called for every binding change
		this.extensionAPI.attachPageDataLoaded(function (oEvent) {
			
		}.bind(this));
	}
});

Thanks,

Mahesh

[former_member188650]

Thanks Mahesh. Unfortunately I get an error that this.extensionAPI is undefined, do you know why this would be the case? I have run the app in the latest version of UI5 available on the WebIDE, as well as 1.44.15 which is what my dev system is currently running. Both have the same issue.

[maheshpalavalli]

Matthew Kennedy How did you create the controller extension for the object page? could you put the screenshot of the manifest.json for the controller extension. And what other information do you find in the "this" scope?

[former_member188650]

I used the WebIDE functionality to create an extension.

Right Click on project -> New -> Extension -> Object Page Extension

and set the View Type to 'View' which generates the View and Controller files in the 'ext' folder.

manifest.json - link to manifest

Below is the output from console.log(this) in a function of my controller.

Thanks very much

[tursko]

The extension API is found here: this.base.templateBaseExtension.getExtensionAPI()