cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
sheldoncopper73
Resolver I
Resolver I

How to add custom sorting in a PCF dataset component ?

Hi,

 

I want to add custom sorting on my PCF grid. However I do not see any method to add sorting. 

 

Also I want the sorting to not only be applied to the data visible as per the page size. Instead it should be applied to the entire data set.

So lets say my Page Size is 4, and I sort the grid by name and in descending order. Now if there's a record with the name starting with 'Z' on the 5th page still it should get displayed on the 1st page as 1st record. 

 

Any suggestion is  highly appreciated.

 

Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions
DianaBirkelbach
Super User
Super User

Hi @sheldoncopper73 , 

Basically @skoofy5 is right, but it needs a little more: you need to go to page 1 by yourself.

I use loadExactPage, so my code for sorting is looking like this:

const oldSorting = (sorting || []).find((sort) => sort.name===columnClicked);        
const newValue : DataSetInterfaces.SortStatus = {
      name: columnClicked, 
      sortDirection : oldSorting!= null ? (oldSorting.sortDirection === 0 ? 1 : 0) : 0 //0 = ascending
 };
while (dataset.sorting.length > 0) {
   dataset.sorting.pop();
}
dataset.sorting.push(newValue);        
(dataset.paging as any).loadExactPage(1);
dataset.refresh();

 

In case you don't work with loadExactPage, I guess you need:

dataset.paging.reset()

in order to go to page 1.

 I have a blog about sorting, showing also another issue. Maybe it helps: Dataset PCF using FluentUI: Sorting – Dianamics PCF Lady (wordpress.com)

 

Kind regards,

Diana


----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

8 REPLIES 8
Goutham
Helper II
Helper II

I believe you had implementing some kind of pagination logic in your custom control.from Datasetgrid,You need to load all items from all pages  and then apply the sorting logic. use dataset.Paging.Loadnextpage() until it loads all pages or set dataset.paging.pagesize(use SetPageSize) to totalrecordscount. I agree this has some performance considerations.

 

Please look at below forum for implementing sorting.

https://stackoverflow.com/questions/60513317/apply-a-sort-to-a-dataset-in-a-powerapps-component-pcf 

 

There are also custom grids in PCF gallery which you can look at for sorting.

skoofy5
Super User
Super User

I'm keen to know the answer to this - I don't believe the code below is supported, but I need a correctly sorted dataset.

dataSet.sorting.push({ name: "columnName", sortDirection: 0 });

 

DianaBirkelbach
Super User
Super User

Hi @sheldoncopper73 , 

Basically @skoofy5 is right, but it needs a little more: you need to go to page 1 by yourself.

I use loadExactPage, so my code for sorting is looking like this:

const oldSorting = (sorting || []).find((sort) => sort.name===columnClicked);        
const newValue : DataSetInterfaces.SortStatus = {
      name: columnClicked, 
      sortDirection : oldSorting!= null ? (oldSorting.sortDirection === 0 ? 1 : 0) : 0 //0 = ascending
 };
while (dataset.sorting.length > 0) {
   dataset.sorting.pop();
}
dataset.sorting.push(newValue);        
(dataset.paging as any).loadExactPage(1);
dataset.refresh();

 

In case you don't work with loadExactPage, I guess you need:

dataset.paging.reset()

in order to go to page 1.

 I have a blog about sorting, showing also another issue. Maybe it helps: Dataset PCF using FluentUI: Sorting – Dianamics PCF Lady (wordpress.com)

 

Kind regards,

Diana


----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

@DianaBirkelbach - do you know if there's any potential issues using this considering it's undocumented?

All I can find regarding sorting is this - https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/sortstatus

Hi @skoofy5 , 

If you mean sorting, it is documented here: DataSet - Power Apps | Microsoft Docs

Or do you refer to the unsupported loadExactPage?

Kind regards,

Diana

 

 

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Hi @DianaBirkelbach ,

I see below code is not working. Am i missing any?From console, i see that column name pushed to sorting is correct.

I am using fluentUi details list and calling this oncolumnheaderclick. Any thoughts would be appreciated?

 

oncolumnclicked(ev,column) //column is of IColumn type
{
let columnClicked=column.fieldName;
const newValue : DataSetInterfaces.SortStatus = {
name: columnClicked,
sortDirection : 1
};
while (dataset.sorting.length > 0) {
dataset.sorting.pop();
}
dataset.sorting.push(newValue);
(dataset.paging as any).loadExactPage(1);
dataset.refresh();

}

Hi @Goutham , 

Besides that the sorting is only descending, (which is not the issue here), I cannot detect any problem in the code.

But similar code works for me. 

Calling the dataset.refresh() will call the updateView method of your PCF (later on), this time with refreshed content. Maybe it's a react issue, where the change in the Virtual DOM is not detected. I think a console.log with the data inside the updateView (maybe first line of code there) could clarify this.

Kind regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Thank you Diane!!

Yes, its issue with overridden logic in Componentdidupdate. 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Users online (1,228)