How to attach FE OP Controller Extension function to OData V4 dataReceived event?

[AlwinvandePutTM]

I want to catch the dataReceived event of OData V4 model which is used by a Fiori Elements Standard Object Page in a Controller Extension. So that after every time the data is loaded or refreshed on the screen, I get into my custom Controller Extension function.

At onAfterRendering the data is not yet available.
So I have to attach an event to the model.

When I tried this

onAfterRendering: function () {
  var oModel = this.base.getExtensionAPI().getModel();
  oModel.attachEvent('dataReceived', myFunction);
},

I saw that only events messageChange and sessionTimeout are available in the model.

So maybe they are available after the ExtensionAPIPromise, but it the function is not called.

onInit: function () {
  var oView = this.getView();
  ExtensionAPI.getExtensionAPIPromise(oView).then(
    function (oExtensionAPI) {
      oExtensionAPI.attachPageDataLoaded(function (event) {
        var sPath = event.context.sPath;  // get the path
        var oData = event.context.getModel().getProperty(sPath); 
      }.bind(this));
    }.bind(this)
  )
},

I also tried this. but the event is not triggered. Probably because it creates a new binding.

onAfterRendering: function () {
  var oModel = this.base.getExtensionAPI().getModel();
  var oContextBinding = oModel.bindContext("/Run");
  oContextBinding.attachEvent('dataReceived', function (event) { 
    console.log('Testing...')
  })
},

Could you help me?


 

[junwu · Accepted solution]

this should work, but where is your myFunction. can you also try model.attachDataReceived

onAfterRendering: function () {
  var oModel = this.base.getExtensionAPI().getModel();
  oModel.attachEvent('dataReceived', myFunction);
},

[AlwinvandePutTM · Accepted solution]

I tried your solution. To be sure I created a new project.

onAfterRendering: function () {
  console.log('onAfterRendering');

  var oModel = this.base.getExtensionAPI().getModel();
  oModel.attachEvent(
    'dataReceived',
    function(oEvent) {
      console.log('dataReceived');
    }
  );
}

 It results in 

ODataModel-dbg.js:509  Uncaught (in promise) Error: Unsupported event 'dataReceived': v4.ODataModel#attachEvent
    at w.attachEvent (ODataModel-dbg.js:509:10)
    at f.onAfterRendering (RunObjectPageControllerExtension.controller.js:21:12)
    at o.<computed> [as onAfterRendering] (ControllerExtension-dbg.js:174:21)
    at b.fireEvent (EventProvider-dbg.js:247:11)
    at d.fireEvent (Element-dbg.js:626:23)
    at f.fireAfterRendering (ManagedObjectMetadata-dbg.js:789:44)
    at g.onAfterRendering (View-dbg.js:752:3)
    at d._handleEvent (Element-dbg.js:342:21)
    at h1 (RenderManager-dbg.js:1285:15)
    at i1 (RenderManager-dbg.js:1370:4)

 When I debug attachEvent, only events messageChange and sessionTimeout are supported. UI5 version is 1.102.2.

[AlwinvandePutTM · Accepted solution]

Is see now that dataReceived is Since: 1.106.0. I work on 1.102.2.

[Marian_Zeis]

I would suggest you attach to the List Binding Event:
https://ui5.sap.com/#/api/sap.ui.model.odata.v4.ODataListBinding%23events/dataReceived 

onAfterRendering: function () {
  var oModel = this.base.getExtensionAPI().getModel();
  var oView = this.getView();
  var oTable = oView.byId("yourTableId"); // Replace with actual table ID
  
  if (oTable) {
    var oBinding = oTable.getBinding("items"); // Adapt this if you're using a different aggregation
    if (oBinding) {
      oBinding.attachEvent("dataReceived", function (oEvent) {
        console.log("Data received:", oEvent);
      });
    }
  }
}