This is a part of my blog “My Checklist for a Dataset PCF using FluentUI“. What’s the right height for the grid pcf?
Dataset PCF as a Home Grid
If the PCF is used for the home grid, it is pretty easy: we need to fill in the whole height, and fortunately it works by using pure CSS “height:100%”. The issue here, is to have the header and the footer always visible, while the records are scrolled down, but that’s a problem I’ll talk about in another blog.
Dataset PCF as a Subgrid
For this problem I didn’t had a good solution in the beginning. On the form the height of the PCF is not set, and similar to field-type PCFs, the subgrids are allowed to expand in height as much they want. It’s actually a great feature of PCFs, which we cannot achieve using the old HTMLWebResources based on IFrames. But that means, that we don’t have a base for the height, so the CSS height:100% won’t work. But what’s the right height then? I can imagine 3 solutions, but I like the last one.
1. Using available height
An approach would be to always fill the available height. In case you are looking for this, Scott Durow offered a solution (with codepen demo) in the Community Forum based on CSS (using vh – relative to the height of the view port). Depending on the PCF purpose, it could be a good approach: I’m thinking of calendar controls, or other canvas-based controls. I think that using Scott’s solution, together with the CSS min-height, to stop the control shrinking too much when the browser get’s shrinked, it can work pretty well.
2. Using customized “Number of rows”
But for a grid control, I’d like to try to stick close to the standard grids. They follow the customizing rules, where you can set the number of rows that should be shown.
In order to get close to this, I’ve examined a few parameters that I get in the PCF context (some of them are not documented in the sdk):
- context.mode.rowSpan
- Not documented
- context.parameters.dataset.paging.pageSize
- That’s documented and sounds pretty much like a friend for my problem:
The number of records to return per dataset page. On forms, dataset pageSize goes with the formatting (Number of rows) and on others you can choose your personal options
- That’s documented and sounds pretty much like a friend for my problem:
- context.parameters.autoExpand
- Not documented, but it seems to be the check box in the image above : “Automatically expand to use available space”
- context.mode.allocatedHeight
- Documented, but usually not set for datasets
Here’s the result of the examination for a subgrid:
| Customizing | rowSpan | paging. pageSize | autoExpand | allocated Height |
|---|---|---|---|---|
| 14 rows, without autoexpand | 17 | 14 | false | not set |
| 14 rows, with autoexpand | 5 | 14 | true | not set |
| 4 rows, without autoexpand | 7 | 4 | false | not set |
| 4 rows, with autoexpand | 5 | 4 | true | not set |
| 9 rows, without autoexpand | 12 | 9 | false | not set |
| 9 rows, with autoexpand | 5 | 9 | true | not set |
It seems that for the subgrids, the paging.pageSize can tell me about the height I should use. The rowSpan is allways 5 if the autoExpand is set, so it helps only sometimes.
What about other places where the grid can be rendered:
| Customizing | rowSpan | paging. pageSize | autoExpand | allocated Height | CSS 100% |
|---|---|---|---|---|---|
| Home Grid | undefined | 25 | undefined | not set | works |
| Related Records | undefined | 25 | undefined | not set | works |
| Dashboard | undefined | 25 | undefined | not set | works |
| Canvas Apps | 1 | 25 | undefined | SET | works |
So given this examination, if I want to set the height I have 3 possibilities:
- allocatedHeight in case is set
- css: height 100%
- using dataset.paging.pageSize
- pageSize * constant + headerHeight + footerHeight
It seems that this could work, in case I can decide if the PCF is rendered as a subgrid or not. Actually only the subgrid works differently: in all other cases the height is given by the platform. But if I don’t have the height right, I risk having 2 scrollbar, which is a bad user experience. So, I’ve decided to go with a 3rd approach.
3. My solution: don’t set the height at all
I like the poster hanging in our office “It’s simple, until you make it complicated” 😉It was exactly the case here.
I had another look at the standard grids. In the home grid (and all the other cases except subgrids), I had to take care that the grid header and footer stays visible, while only the records are scrolled, and that the footer stay down if there are less records:
But if you have a look to the standard subgrids (image below), the header and the footer don’t stay visible, while the footer is shown right below the last record. The subgrid doesn’t have a scrollbar, the scrolling is made by the form:
I remembered that that’s exactly what the FluentUI DetailsList does (before I had to make it learn to work with 100% height).
So if I can tell that I’m on a subgrid, I DON’T HAVE TO SET THE HEIGHT AT ALL. I just let the DetailsList take the height it needs. If I don’t set the height, it will take the height it needs to render the customized number of rows (or less, if there is no paging necessary) and only the form-scrollbars will be shown. Perfect! 🙂
My only problem is: how can I tell that the PCF is rendered as a subgrid or not. The only solution I could come up for now, is using the context.parameters.autoExpand. If it’s not null or undefined, I’m on a subgrid. The decision in my code is looking like this:
if (context.parameters.autoExpand != null ) {
//that's the subgrid case
return <>
<DetailsList.../>
<Footer/>
</>
}
//otherwise make the "100%" Grid
<WrapperForDetailsList ...>
<DetailsList.../>
</Footer>
</WrapperForDetailsList>
Unfortunately that’s unsupported, since autoExpand parameter is not documented. In case you know a better way, please let me know.
I’m not aware of the difference, if the autoExpand is true or false (I think that made a difference only in older CRM versions), so I check only if it’s null or not.
In case you want to have a closer look, I’ve implemented the change to my github repository.
Dianamics PCF Lady 