Unanswered

How to add Pagination in Fluent UI Detailslist using react for custom pcf control

(0) Share

Report

Posted on by Priyanka J

I am using fluent UI Details List control (https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist) to display records in a grid and its working fine.
The only issue I am facing is pagination in the Details List. The reference link I am using to implement this is https://www.alphabold.com/develop-pcf-control-using-ms-fluent-ui-and-react/. I have implemented this by using custom PCF field control.

I am not sure this is the correct way to display entity records if there is no direct link with the entity where we are displaying this list on form. There is no direct relationship between the entities.
So I cannot create a view on entity which I can display in sub grid and create custom PCF dataset control which can display pagination.

Is there any way we can add pagination to Details List or some other component like dataset can be used for this requirement?
Please help here

Categories:

Power Apps component framework

All responses (4)

Answers (0)

aroudaki Microsoft Employee on at

Like (1)

Report

Re: How to add Pagination in Fluent UI Detailslist using react for custom pcf control

you can also check this tutorial on create a PCF grid using Fluent detail list
Create a model-driven app dataset component in Microsoft Dataverse - Power Apps | Microsoft Docs
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Re: How to add Pagination in Fluent UI Detailslist using react for custom pcf control

Hi @priyankajadhav ,

I haven't tried to filter on linked entities, but I have digged a little in the docs.

One way could be by using the .linking.addLinkedEntity and setting the linkType "inner". That could be enough for the case where you just need to filter on relations. (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/linking/addlinkedentity?WT.mc_id=BA-MVP-5004107)

If you need some more filtering conditions, maybe this works:

set the alias when you define the linking (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/ilinkentityexposedexpression?WT.mc_id=BA-MVP-5004107#alias)

set the filter using <your_dataset>.filtering.setFilter (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/filtering/setfilter?WT.mc_id=BA-MVP-5004107).
There you can use the entityAliasName where you can use the alias defined by linking. (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/conditionexpression?WT.mc_id=BA-MVP-5004107#entityaliasname)

This would be something like this (but as I said, I haven't tried it out):

dataset.linking.addLinkedEntity({ // ... alias: "myAlias"}); dataset.filtering.setFilter({ filterOperator: 0, //And conditions: [{ attributeName: ..., conditionOperator: ..., value: ..., entityAliasName : "myAlias" }], filters: [], });

Hope this helps!

Kind regards,

Diana
Priyanka J 3 on at

Like (0)

Report

Re: How to add Pagination in Fluent UI Detailslist using react for custom pcf control

@DianaBirkelbach Thank you so much for this solution. I have tried this by using PCF dataset and able to filter the data by field of same entity. Now I want to apply filter on link entities field but unable to do the same. Appreciate your help here
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (2)

Report

Re: How to add Pagination in Fluent UI Detailslist using react for custom pcf control

Hi @priyankajadhav ,

You can use a dataset PCF. Even if you don't have a relation to the host table(entity), you can place a subgrid which is not limited to the parent entity (show all records). Then you can use the PCF Dataset filtering sdk to filter your data as you need. This will provide a few advantages over a field PCF: having the data provided by the framework to you, search box, view switch, using the ribbon.

Regarding paging using FluentUI DetailsList, I have a blog series, and one part is about paging: https://dianabirkelbach.wordpress.com/2020/10/05/dataset-pcf-using-fluentui-paging/

You might find some other interesting parts. The github repository is here: https://github.com/brasov2de/ColorfulOptionsetGrid

Also you might find some interesting examples in the sdk: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/use-sample-components?WT.mc_id=BA-MVP-5004107

Hope this helps!

Kind regards,

Diana