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.

loadNextPage/loadPreviousPage

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

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.

totalResultCount

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!