Perform Action after the Binding Is Complete

ducks13 picture ducks13 · Apr 21, 2015 · Viewed 20k times · Source

I wrote this part to bind OData information with a select controller:

var countrItems = new sap.ui.core.ListItem();
countrItems.bindProperty("key", "Land1");
countrItems.bindProperty("text", "Landx");
var CountrSelect = this.byId("CountrySelect");
CountrSelect.setModel(oModelTriptab);
CountrSelect.bindItems("/Countries", countrItems);

I would like to perform an action after the binding is complete (I want to select some default value that can change dynamically).

Answer

Boghyon Hoffmann picture Boghyon Hoffmann · Jan 25, 2018

Attach handlers to events provided by Binding:

<Select items="{
  path: '/Countries',
  events: {
    dataRequested: '.onCountriesRequested',
    dataReceived: '.onCountriesReceived',
    change: '.onCountriesChange'
  }
}">

Those events can be applied, not only to ListBindings, but to all bindings. Note: PropertyBindings do not trigger any requests, so no dataRequested or dataReceived for them.

I would like to perform an action after the binding is complete.

In that case, you'd attach a handler either to change or dataReceived event to be notified about the "complete" binding.

Compared to attaching a handler to requestCompleted, the above approach is more descriptive and, most importantly, binding-specific.


List, m.Table, m.Tree, ...

Alternatively, UI5 offers the event updateFinished for Controls derived from sap.m.ListBase. It's similar to the change event, but provides more information such as an additional "Growing" reason, actual, and total count of the entries.

<List
  updateFinished=".onCountriesUpdateFinished"
  items="..."
>
onCountriesUpdateFinished: function(event) {
  const reasonForUpdate = event.getParameter("reason"); // "Refresh", "Growing", "Filter", "Sort", "Context", ...
  const currentlyLoadedNumberOfCountries = event.getParameter("actual");
  const totalNumberOfCountries = event.getParamter("total") // Value of $count
  // ...
}