Create a Virtual Dataset PCF using FluentUI DetailsList
Вставка
- Опубліковано 14 жов 2024
- 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": dianabirkelbac...
My blog about the need to use React.memo for optimizations: dianabirkelbac...
The code from the video can be found here: github.com/bra...
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!
Looking forward to try this out this week :)
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.
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: ua-cam.com/video/djNAKBNL934/v-deo.html&ab_channel=DianaBirkelbachakaDianamicsPCFLady
If you are interested in something specific, please let me know
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)} ,
};
});
@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.
best dedicated contributor ever!
Thank you :-)
Is there a way to make this PCF editable. I have a project that needs to use inline editing grids with different color formatting for column headers.
Well, basically yes.. You can define the cells, and save the data using the dataset saving features. I have here a blog where I have an example: dianabirkelbach.wordpress.com/2021/12/20/editable-dataset-pcf-new-sdk-methods/
But you still don't have the column filter as the standard grids has. And you need to implement all kinds of controls.
Huge effort, for a small change (having colors in header).
Maybe you can think of some alternative ideas. Maybe we can user the Power Apps Grid, and show the colors inside the cells instead. That would be much much simpler and integrated from the UI perspective: dianabirkelbach.wordpress.com/2022/07/27/power-apps-grid-control-first-glimpse-to-the-cell-renderer-and-editors/
@@PCFLady Multumesc frumos. Thank you for the answer.