sapui5 - Live Update the Number of Items

Question

I have a requirement where I need to live update the number of list items to Page's sub-header. I want use sap.ui.base.EventProvider, aggregation binding, or expression binding. Please walk me through as I have never used it before.

If I delete a list item, the number of list item should live update.

Answer 1

Client-side Models

If a client-side model such as JSONModel is used (i.e. assuming all the data are already available on the client) and if the target collection is an array, a simple expression binding is sufficient:

title="{= ${myJSONModel>/myProducts}.length}"

• Sample 1 (ClientModel): Updating count after deleting items from sap.m.Table
• Sample 2 (ClientModel): Updating count after filtering sap.ui.table.Table

As you can see in the above samples, when the number of items changes, the framework notifies the Expression Binding which eventually updates the property value automatically.

Server-side Models (e.g. OData)

OData V2

Using updateFinished event from sap.m.ListBase^api

Especially if the growing feature is enabled, this event comes in handy to get always the new count value which the framework assigns to the event parameter total.

[The parameter total] can be used if the growing property is set to true.

• Sample 3 (v2.ODataModel): Updating count after filtering sap.m.ListBase

<List
  growing="true"
  items="{/Products}"
  updateFinished=".onUpdateFinished"
>

onUpdateFinished: function(event) {
  const reason = event.getParameter("reason"); // "Filter", "Sort", "Refresh", "Growing", ..
  const count = event.getParameter("total"); // Do something with this $count value
  // ...
},

The updateFinished event is fired after items binding is updated and processed by the control. The event parameter "total" provides the value of $count that has been requested according to the operation such as filtering, sorting, etc..

Using change event from sap.ui.model.Binding^api

This event can be applied to any bindings which comes in handy especially if the control doesn't support the updateFinished event.

someAggregation="{
  path: '/Products',
  events: {
    change: '.onChange'
  }
}"

onChange: function(event) {
  const reason = event.getParameter("reason"); // See: sap.ui.model.ChangeReason
  const count = event.getSource().getLength();
  // ...
},

• event.getSource() returns the corresponding (List)Binding object which has the result of $count (or $inlinecount) stored internally. We can get that count result by calling the public API getLength().
• One downside is that there is no "growing" reason included in sap.ui.model.ChangeReason. But if the control can grow, it's probably derived from the ListBase anyway which supports the updateFinished event.

Manual trigger (Only in V2)

If there is no list binding at all but the count value is still required, we can always send a request manually to get the count value. For this, append the system query $count to the path in the read method:

myV2ODataModel.read("/Products/$count", {
  filters: [/*...*/],
  success: function(data) {
    const count = +data; // "+" parses the string to number.
    // ...
  }.bind(this),
}) 

OData V4

Please, take a look at the documentation topic Binding Collection Inline Count.