Dataset PCF using FluentUI: Paging

This is a part of my blog “My Checklist for a Dataset PCF using FluentUI“. The footer has to show the navigation buttons and the selected/available records. In this blog post I’ll talk about how I’ve implemented the paging and how I’ve integrated it in my footer.

Paging component

For the footer, I’ve made a React functional component, taking 2 props:

  • the dataset itself
  • the count of selected records

The render part is easy; the most of the time took me to make the UI kind of looking like the Dynamics 365 Grid Footer. That’s what I’ve ended up with:

I know if I’m on the first/last page by inspecting the dataset.paging properties: hasPreviousPage and hasNextPage.

Paging Hook

The logic for paging is all inside the usePaging custom Hook. For that I’ve took a few state variables, like: pageSize, totalRecords, currentPage, firstItemNumber, lastItemNumber:

export const usePaging = (dataset: DataSet) => {    
    const [firstItemNumber, setFirstItemNumber] = React.useState<number>(0);
    const [lastItemNumber, setLastItemNumber] = React.useState<number>();
    const [totalRecords, setTotalRecords] = React.useState<number>();
    const [currentPage, setCurrentPage] = React.useState<number>(0);
    const [pageSize, setPageSize] = React.useState<number>(0);   

There are two possibilities to work with pages, provided by the PCF Dataset sdk: loadNextPage/loadPreviousPage and loadExactPage. Scott Durow wrote a great blog about dataset paging, telling about the sdk methods and showing the differences between CanvasApps and ModelDriven Apps.The loadNextPage/loadPreviousPage didn’t felt wright for me because:

  • I wanted to have my control for both Canvas and ModelDriven Apps (not working now, but hopefully in the future)
  • In ModelDriven Apps, loadNextPage adds records on top, keeping the previous ones. There might useful if you need infinite scrolling , but I want to stay close to the standard grids and show only one page at a time.

So I’ve used the loadExactPage method. This way I get only one page of data, for both ModelDriven and Canvas Apps. This method is not documented in the sdk, but is referenced in the forum, so I hope this will be supported in the future.

Unfortunately there is no measure in the dataset, telling which one is the currentPage. So we need to detect and keep track of it. I do that using a side effect. My effect watches the dataset changes (the second parameter of the useEffect). When the dataset is changed, my state has to be recalculated:

Given the currentPage and the pageSize, it’s no problem to calculate the rest. But where to start? I’ve used the dataset.paging.hasPreviousPage, as an indicator telling me if I’m on the first page or not.

Now I just need the methods to move to the next, previous or first page. I had to cast (using “as any”), since the “loadExactPage” is not defined in the TypeScript definition.

So my paging hook looks something like this:

Now I can integrate it in my GridFooter component. The missing part is the “selectedCount” prop, which I’ll explain in my next blog.

Paging issue

At least at the time I’ve developed the PCF, there were a bug in the dataset behavior: when I’ve navigated to page 2 (or more), and then used the search input, the dataset.paging.totalRecordsCount was right (like 1 if there was only one record found), but dataset.sortedRecordsIds and dataset.records had 25 records (the paging size). Fortunately, the firts one(s) was the filtered ones, so I could implement a workarround: I always consider only the first records in my dataset and ignore the rest:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Powered by

Up ↑

%d bloggers like this: