Create a Virtual Dataset PCF using FluentUI DetailsList
Vložit
- čas přidán 25. 05. 2022
- Setup a project for a virtual code component.
Implement the dataset PCF using the FluentUI DetailsList.
Use the dataset PCF for a subgrid and enable the view switcher, the out-of-the-box search and the ribbon interaction.
My blog "My Checklist for a Dataset PCF using FluentUI": dianabirkelbach.wordpress.com...
My blog about the need to use React.memo for optimizations: dianabirkelbach.wordpress.com...
The code from the video can be found here: github.com/brasov2de/DatasetE...
Looking forward to try this out this week :)
Thanks for the video, Diana :)
You're welcome :-) Thanks!
best dedicated contributor ever!
Thank you :-)
Great video @Diana,
However, for many users there could be a hardtime following after ~ 8:07 where you switched your code with new data in Index and datasetexample file and we cant find the code to refer anywhere.
if you include or explain that part, that would have been much easier.
Thanks for watching
Thanks a lot for reaching out. I think I know what you mean, at 8:07 you see a little code in init method (not part of this video), but actually I wanted to show only the updateView which will render every time, so that's why we need React.memo.
You can ignore that code in init.
Please find the complete code here: github.com/brasov2de/DatasetExample/blob/1_simpledataset/DatasetExample/index.ts
The code you see in init at 8:07, is an example how to add linking and filtering to a dataset PCF, which I've covered in another video: czcams.com/video/djNAKBNL934/video.html&ab_channel=DianaBirkelbachakaDianamicsPCFLady
If you are interested in something specific, please let me know
Excellent video Diana,
A little question regarding the next / previous buttons to set the next or previous records. Is there a cds command to display this feature ?
Thanks a lot.
Best regards
Thank you! 🙂
The dataset.paging provides the methods you need. For instance loadNextPage: learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/paging/loadnextpage?WT.mc_id=BA-MVP-5004107
I have a blog regarding paging, including all the details about currentPage, totalRecords: dianabirkelbach.wordpress.com/2020/10/05/dataset-pcf-using-fluentui-paging/.
Furthermore, you can find this react Hook in my gitHub repository, (github.com/brasov2de/ColorfulOptionsetGrid/blob/master/ColorfulOptionsetGrid/App/Generic/Hooks/usePaging.tsx) which you can take as it is and use it in your project.
Hope this helps!
As with many tutorials there is a lot of assumed knowledge that is prerequisite for understanding what's going on. A list of these at the beginning or in the comments would be extremely helpful.
Thank you! I'll keep that im mind!
I've posted a few links in the description, which leads to more blogs on several subjects.
Maybe you can help me understand where I should concentrate: the definition of Virtual Components? Working with a dataset PCF? More on React or FluentUI?
In general anything that the viewer is assumed to have knowledge/experience with which will be used without much explanation. In your case FluentUI & React would be on that list. As you know, although they are typically used when developing a PCF (i guess? I don't have stats to go on), but a PCF can certainly be developed without them.
@Diana, Great video. thank you. Do we need to install react and fluentui for this PCF..?
Thank you :-) This is a virtual component, and will use the React und Fluent UI libraries from Power Platform. You don't have to install react; the setup for a virtual component is taking care of the libraries.
Very helpful video @Diana,
I followed your complete video and the controller working fine. And I have a description column and I need to show it completely. currently, it's displaying only part of it. is it any there property to make it fully visible or maybe by adding more height? is it possible?
can you give me an idea to do it? or place that I need to modify in your code. big help. thank you.
Hi :-)
I saw in the docs that the Details List has an example for the "Variable row height" but I haven't try it out yet: developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/variablerowheights
In case it doesn't work, I'll keep it in mind to dig on this.
@@PCFLady Actually, I have done it by wrapping the column value with another div. it worked. Thank you for your response.
const attributes = dataset.columns.map((column) => {
return {
[column.name]: {entityIn.getFormattedValue(column.name)} ,
};
});