Bind Paginator to model?

[#1]

I was wondering if anyone had tried binding a Paginator to a model, to have the numberOfPages automatically set to the number of entries in the model's row set.

As an example, I'd developed a simple Panel/HTML representation of my weblog posts (in preparation for "Re-presenting my site in SAPUI5") and then added a Paginator at the top to page through the posts. It looks like this:

In order to work out what value to set the numberOfPages to, I ended up using jQuery to parse the source XML that the Model had consumed, and count the number of 'entry' elements. You can see the code here: https://github.com/qmacro/sapui5bin/blob/master/snippets/model_to_html.html#L31

I noticed in the docu that the Paginator inherits a number of bind methods from sap.ui.core.Element, and was curious to see whether binding a Paginator could auto-set the numberOfPages according to the data.

Anyone tried this?

[AndreasKunz · Accepted solution]

Hi DJ,

the inherited "bind" methods are the generic ones that can be used to bind any property or aggregation of any Control.

(there may be exceptions, where a property documentation says that setting the value is only possible at certain times or so, but this is at least the general rule)

However, the "numberOfPages" is a number property, so you can only bind it to a number which is present in the model. So either the service that provides your blog entries needs to also provide the count or you need to do the counting yourself.

When you really want to use the binding (so the count and the paginator would automatically adapt if a new blog post is added to the Model) you can use a formatter function in the binding:

  oPaginator.bindProperty("numberOfPages", "/entry", function(value) {

    // binding goes against the array, so "value" is the whole array now...

    // this formatter returns the array length, which is the blog post count

    if (value){           

      return value.length;           

    }

    return 0;

  });

Actually I'm not 100% sure how such a property binding agains an array reacts on data changes and whether this usage is intended and fully supported, but at least it does work. 😉

See a running example here (only runs in Chrome/Firefox, not in IE, because UI5 is loaded cross-domain):

http://jsbin.com/aku_paginator_bound/2/edit

Cheers - and a Happy New Year!

Andreas

[qmacro · Accepted solution]

Hey Andreas

Thanks for answering, and what a lovely answer it was too. Using property formatters to bridge the gap between control properties and values that don't actually exist explicitly in the model is a great solution.

I also learned something from the last bit of your code example: that you can use placeAt() multiple times pointing at the same element id, and the controls will simply be appended.

oPanel.placeAt("content");

oPaginator.placeAt("content");

Cheers, and all the best for 2013!

dj

[Former Member · Accepted solution]

Hi Andreas and DJ Adams,

Great post this one! I am doing some stuff with SAPUI5 and SAP MII and I am just wondering if you guys have any example using XML Model and a table using a paginator with the navigationMode: sap.ui.table.NavigationMode.Paginator.

Any clues will be much appreciated! 🙂

Thanks guys!

Cheers,

Bruno