PCF Dataset Paging in Model vs Canvas Apps

One of the recent additions to PCF for Canvas Apps is the ability to bind dataset PCF controls to datasets in a Canvas App. A challenge that faces all PCF developers is if their control should support both Model AND Canvas – so with this in mind you need to be aware of the differences in the way that data is paged.

This post demonstrates how the paging API works in Model and Canvas and highlights the differences. In my tests, I used an entity that had 59 records and spanned 3 pages of 25 records per page.


There are two ways of paging through your data:

  1. Incrementally load the data using loadNextPage
  2. Page the data explicitly using loadExactPage
    In Model Apps, when you call loadNextPage, the next page of data will be added on top of the existing dataset.sortedRecordIds – whereas in Canvas, you will get a reset set of records that will just show the page that you have just loaded.

This is important if you control aims to load all records incrementally or uses some kind of infinite scrolling mechanism.

This is how nextPage/previousPage works in Canvas Apps

This is how nextPage/previousPage works in Model Apps

Notice how the totalRecordsLoaded increases with each page for Model, but for Canvas it shows only the number of records on that page.
You might think that using this approach would be more efficient because it uses the fetchXml paging cookie - well from what I can see it doesn't seem to be any different to just specifying the page in the fetchXml - and has the same performance as loadExactPage...


When you want to show a specific page – jumping over other pages without loading them, you can use ‘loadExactPage’. This method is not currently documented – but it is mentioned by the PCF team in the forums
This method will load the records for the specific page and so dataset.sortedRecordIds will only contain that page – this is the same on both Canvas and Model!

Notice that if you load a specific page, the hasNextPage and hasPreviousPage is updated to indicate if you can move back or forwards. This would only help when using loadExactPage in Model Apps, because when using loadNextPage in Model Apps, you will never get hasPreviousPage == true because you are loading all the records incrementally rather than a specific page.

This is how loadExactPage works in Canvas Apps

This is how loadExactPage works in Model Apps

Notice total records loaded shows only the number of records in that page.


This property should give you how many records there are in the current dataset – however, in Canvas it only gives you the number of records that have been loaded via the paging methods. If you look at the comparisons above, you’ll see that the Canvas totalResultCount goes up with each page, but in Model, it remains the total record count.
Interestingly this property is not actually documented – however it’s in the Typescript definitions.

The Future

It’s not clear if we will see a completely unified experience between Canvas and Model with PCF controls – but I’ll update this post if anything changes!

Comments (2) -

  • Scott,  Have you seen any strange issues when you start to increase the paging size for the DateSet in a Canvas app?  I'm facing an issue that occurs at certain times.  Essentially what is happening is that my Canvas DataSet says it has a larger number of records than it is actually returning.

    paging.pageSize: 5000
    paging.totalResultCount: 554
    sortedRecordIds: 25

    The really weird part is that this only happens in certain situations.  I'm using a collection to load the data into my control and i do a ClearCollect on the onVisible of my form with the control.  When i load the app it ends up getting all 554 records it's only when I navigate away from the form and navigate back that it seems to get messed up.

    Also thanks for writing this article the paging in Canvas makes more sense now.

    • I have seen some odd things when changing the page size - things to check are that you are checking for the loading property and not rendering if this is set to true.

      If you can create a repro for the issue then that would be good to share with the team.
Comments are closed