Live Update the Number of Items

Subhash Chaganti

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.

Boghyon Hoffmann

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}"

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.ListBaseapi

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.

<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.Bindingapi

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.

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

NavigationDrawer update items

分類Dev

Returning the number of items in a list

分類Dev

How to "number" array items?

分類Dev

Specify number of items in tuple

分類Dev

AngularJS orderby filter without live update

分類Dev

NASM - Get number of items in stack

分類Dev

Maximum number of items in DocumentDb IN clause

分類Dev

Update database phone number

分類Dev

Find the number of common items in two sequences for repeating items

分類Dev

HTML update number according to another number

分類Dev

ngrx - update single item in a list of items

分類Dev

Update UI after removing items from List

分類Dev

Live reload no longer works after Angular 6 update

分類Dev

Is there a way to edit a javascript function to live update in a html form output?

分類Dev

Count number of items in an array with a specific property value

分類Dev

How to reduce the number of items in the TFS workspace

分類Dev

Limiting number of items in gatsby-plugin-feed

分類Dev

Knapsack in PuLP, adding Constraints on Number of Items selected

分類Dev

Random distribution of items in list with exact number of occurences

分類Dev

Limit number of selected items in ng-grid

分類Dev

Interview live-coding - Find Second Biggest number in array

分類Dev

How to update an array with his index number in Mongoose

分類Dev

Update android app without changing version number

分類Dev

Angular 7 Observable number does not update view

分類Dev

BigQuery update how to get number of updated rows

分類Dev

Using Row_Number() with Update Statement

分類Dev

Limit number of checkboxes and update string based on their value

分類Dev

Rebuild_index does not update new items Haystack Elasticsearch Django

分類Dev

Do VueJS indexes update when newly added items are added?

Related 関連記事

  1. 1

    NavigationDrawer update items

  2. 2

    Returning the number of items in a list

  3. 3

    How to "number" array items?

  4. 4

    Specify number of items in tuple

  5. 5

    AngularJS orderby filter without live update

  6. 6

    NASM - Get number of items in stack

  7. 7

    Maximum number of items in DocumentDb IN clause

  8. 8

    Update database phone number

  9. 9

    Find the number of common items in two sequences for repeating items

  10. 10

    HTML update number according to another number

  11. 11

    ngrx - update single item in a list of items

  12. 12

    Update UI after removing items from List

  13. 13

    Live reload no longer works after Angular 6 update

  14. 14

    Is there a way to edit a javascript function to live update in a html form output?

  15. 15

    Count number of items in an array with a specific property value

  16. 16

    How to reduce the number of items in the TFS workspace

  17. 17

    Limiting number of items in gatsby-plugin-feed

  18. 18

    Knapsack in PuLP, adding Constraints on Number of Items selected

  19. 19

    Random distribution of items in list with exact number of occurences

  20. 20

    Limit number of selected items in ng-grid

  21. 21

    Interview live-coding - Find Second Biggest number in array

  22. 22

    How to update an array with his index number in Mongoose

  23. 23

    Update android app without changing version number

  24. 24

    Angular 7 Observable number does not update view

  25. 25

    BigQuery update how to get number of updated rows

  26. 26

    Using Row_Number() with Update Statement

  27. 27

    Limit number of checkboxes and update string based on their value

  28. 28

    Rebuild_index does not update new items Haystack Elasticsearch Django

  29. 29

    Do VueJS indexes update when newly added items are added?

ホットタグ

アーカイブ