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
Advocate IV
Advocate IV

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

View solution in original post

@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
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,383)