My Checklist for a Dataset PCF using Fluent UI

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

Header disapears when you scroll

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

Another problem is the height of the dataset pcf as a subgrid. Here is a blog post about this problem.

If you want to implement a FullScreen mode for the PCF, you can read my blog here.

3. Footer

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.

4. Columns

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.

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. To open/navigate to a record, there might be a few ways to consider. I’ve also hit a small bug.

7. Translations

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.

8. Disabled

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.

9. Responsible 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:

Stay tuned for the next blogs containing more details about each problem. I’ll modify this blog, including the links to the corresponding explanation.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑