Lately I’ve implemented the ColorfulOptionsetGrid, which you can get from my github repository or through the pcf.gallery. In the beginning I’ve thought it will be pretty easy, since using FluentUI DetailsList you get very fast the look and feel of Dynamics 365 Grids. But there were quite a few “details”, which I had to solve first. In this blog post is the checklist that I will use in the future for dataset PCFs . In the next posts I’ll get into details about the issues.
1. Sticky header
Using DetailsList, the header doesn’t stay visible when you scroll down the records. To have the header staying always visible, I had to implement the “onRenderDetailsHeader” event, and use a “Sticky” control
2. Full height
The Grid should conver the whole place available. The width is not a problem, since using css “100%” worked, but the height might be tricky, since 100% didn’t work for me (maybe there is a better way). Basically I react to height changes, and use the “px” (with some exceptions).
The expected behaviour was that the control is covering the whole height of the component, and is showing a scrollbar if more records are inside a page, while still having the footer always visible. To have the scrollbars I used the ScrollablePane control from FluentUI. This might cause that the Ribbon Flyouts and the View-Selector are rendered under the Grid, unless you fix it. More details on Full Height Grids can be found here.
Another problem is the height of the dataset pcf as a subgrid. Here is a blog post about how to implement the subgrid height.
If you want to implement a FullScreen mode for the PCF, you can read my blog here.
The DetailsList has an OOB possibity for footer, by defining the footer renderer. In my tests, the footer doesn’t stick to the bottom of the grid. In case there are less records, the footer will be rendered right below the last record.
Take care to reflect the sort order of the columns and the customized width. Also, the columns added using property-set, that are not in the view, have no width or sort order. There are some more properties that you might want to reflect; like isHidden, disabledSorting, isPrimary. Read more about columns definition in my related blog.
5. Filter, Paging & Sorting
The navigation inside the grid is not included in the DetailsList. You have to make this by your own.
In case you allow the search input in your manifest, and navigate using paging, there is a small bug right now, returning sometimes too many records. Here you can read how I’ve implemented the paging.
Remember that if you have paging, you cannot sort the records by yourself (in Memory), because the records in the new sort order might be on another page. So you need to make it on the server-side. Unless you load all records in Memory. Read more about sorting in my related blog.
6. Selection and open record
I’ve done the selection itself by using the FluentUI “MarqueeSelection” Control. Using the PCF Dataset sdk you can set the selected elements for your grid. You can read about selection here.
To open/navigate to a record, there might be a few ways to consider. Have a look to the possibilities and which one I’ve chosen.
That works like every translation, but there is a bug right now: the name of your pcf control is not translated when shown in the ribbon “Show As” command. I’ve reported the bug. Until it will be fixed, I’ve implemented a workarround.
In case you have some edit/save features in your grid, the dataset component should also check the disabled state of the record where the subgrid is placed, and disabled the grid too.
9. Responsive UI
I haven’t implemented it yet, but I consider doing this. Since the ModelDriven Apps are running on several devices, the width might be very limited; having scroll bars both horizontal and vertical is not something the user should have to deal with.
10. Avoid memory leaks
Don’t forget to unmount your component from the ReactDOM in the “destroy” method of your “index.ts”.
11. Production ready & granular import
Just to have my checklist complete, I add the last steps:
- Check if you imported only the needed Controls from FluentUI in your bundle, as my other blog post describes: https://dianabirkelbach.wordpress.com/2020/07/27/fluentui-granular-imports/
- Make an production bundle, as described in my other blog post: https://dianabirkelbach.wordpress.com/2020/04/28/pcf-solution-packaging-unmanaged-production-release/
Stay tuned for the next blogs containing more details about each problem. I’ll modify this blog, including the links to the corresponding explanation.