Dataset PCF using FluentUI: Sorting

This is a part of my blog “My Checklist for a Dataset PCF using FluentUI“. My ColorfulOptionsetGrid PCF had paging, so sorting in memory was not an option. I needed to use the dataset.sorting to sort the columns on the server side, since the records in the new sort order might be on another page. That’s what I had to take care of:

Design decision: How should the sorting work?

The first question I had to answer was: how should the sorting work? Sure, I wanted to stay close to standard Dynamics 365 Grids. But the standard Grids implements multi-column-sort. This feature is a little hidden: if you hold the “SHIFT” key pressed while clicking on the column-header, the current column will be added to the sorted columns list, instead of replacing the sorted column.

Multisort in standard Dynamics 365 Grids

I have to admit that I was in a hurry, and decided to go without multi-sort for now. But I’ll keep that in mind, for a 100% implementation.

Where to attach the sorting to FluentUI: DetailsList?

The DetailsList has a “onRenderDetailsHeader” property, which is a callback where I could attach the “onColumnClick”

The onColumnClick event, has a second parameter which defines the clicked column:

The rest, is not related to FluentUI: I just needed to make the PCF Dataset sort my data.

Dataset.sorting using the pcf sdk

First I need to know if the column is already sorted, because that would mean that I need to change the direction. For that we need to inspect the dataset.sorting. The TypeScript documents it as an array of type “DataSetInterfaces.SortStatus“, which means array of objects containing name and sortDirection.

{
    name: "columnName",
    sortDirection: 0 // 0=ascending, 1 = descending
}

After you modify the dataset.sorting, you need to call the dataset.refresh(), otherwise it won’t take affect.

Pitfalls of dataset.sorting

Mutate dataset.sorting ?

In react you learn that you shouldn’t mutate (modify) a list. The pcf dataset.sorting seems to be a special kind of array. I didn’t really understand why, but it seems that the you are not allowed to replace the dataset.sorting with a new array. It just didn’t work for me. So instead of setting the dataset.sorting=newArray, you need to empty and fill this array with items.

//don't do this
dataset.sorting = [{name: myColumn, sortDirection: newSortOrder}]

//do this instead:
 while (dataset.sorting.length > 0) {
            dataset.sorting.pop();
        }
dataset.sorting.push({
    name: myColumn, 
    sortDirection: newSortOrder
});     

Don’t mutate the items inside the dataset.sorting

So if we have to modify the dataset.sorting, what about mutating the elements in an array? The answer is NO, you need to add new elements in the array, instead of mutating the content.

//don't do this ; you cannot preserve the items, and only change the direction
const item = dataset.sorting[0];
item.sortDirection = item.sortDirection===0 ? 1 : 0;

//do this; you need to push a new element after deleting it
const item = dataset.sorting[0];
while (dataset.sorting.length > 0) {
            dataset.sorting.pop();
        }
dataset.sorting.push({
    name : item.name, 
    sortDirection : item.sortDirection===0 ? 1 : 0
}); 

Change sorting doesn’t reset the page

In my opinion, when the sort order is changed, the grid has to start with page one again. That does the standard Dynamics 365 Grid too. That’s not the case with pcf datasets. I agree, I used then “unsupported” loadExactPage, since I wanted to have parity between ModelDriven and CanvasApps ( Scott Durow has a very good blog explaing this), but I don’t think that makes a difference. After setting the dataset.sorting, I had to tell the dataset to navigate to page 1 (dataset.loadExactPage(1))

 while (dataset.sorting.length > 0) {
            dataset.sorting.pop();
        }
dataset.sorting.push(newValue);        
(dataset.paging as any).loadExactPage(1);
dataset.refresh();

One thought on “Dataset PCF using FluentUI: Sorting

Add yours

Leave a Reply

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

WordPress.com Logo

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

Google photo

You are commenting using your Google 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

Create a free website or blog at WordPress.com.

Up ↑