Zoom In (FullScreen) PCFs

How to make the PCF toggle in FullScreen mode (for both field type or dataset type)? It’s also a part of the blog series “My Checklist for a Dataset PCF using FluentUI“, since there are some details to take care when making Dataset PCFs.

How To render the PCF FullScreen?

Actually the possibility to render the PCF in FullScreen mode is offered by the sdk: context.mode.setFullScreen(boolean). Done. That easy 🙂

But … this function needs a parameter, telling if it should change the zoom mode to FullScreen mode (true) or back (false). First I’ve thought that I could keep track of the FullScreen state inside my component. But there is a problem: when you open the PCF in FullScreen mode, you get a “X” button on the top-right corner, allowing the user to close the FullScreen mode. It’s actually a nice feature, since you don’t have to care of implementing the close functionality.

The only problem is that you don’t get automatically a button to open the FullScreen-Mode. That one you need to make by yourself, and that’s where the problems started, because you need to know when to render that button and when not (or at least you need to know that the button you implemented needs to open or close the FullScreen mode).

How to keep track of the FullScreen mode

Since you cannot keep track of the FullScreen mode inside the PCF component state, you need to know when the state is changed. I did that examining the context.updatedProperties. This property if only available for Model-Driven Apps. Each time the FullScreen mode is changed, the updateView method is called. But the change of the FullScreen mode is not the only time the updateView is called. (In my other blog I explained when is the updateView called.) So I need to filter in updatedPropeties only the ones regarding the FullScreen mode. I’ve found that these are

fullscreen_open

fullscreen_close

(A few months ago, when I’ve inspected the updateProperties, was not that clear which is the right way to evaluate this. It happened that inside the updatedPropeties I’ve got both “fullscreen_open” and “fullscreen_close”, so back then I had to take the last one. I guess it was a bug, which is fixed now. Now I get only one of these two in updatedProperties).

Implementation (Custom Hook)

I tried not too have this kind of logic inside my index file. So I’ve made a react custom hook, in a separate file (useZoom.ts). It’s a small one, which only needs two parameter

  • setFullScreen – a callback which allows me to change the FullScreen mode. The function I get from the context: context.mode.setFullScreen.
  • updatedPropeties

Here is the whole code of my custom hook:

I have the isFullScreen state inside hook. The important part is the side effect : React.useEffect, which will be called each time the second parameter changes (in my case the updatedProperties ). The content is only examining if the updatedProperties are relevant, and calls the isFullScreen setter (setIsFullScreen).

I use this hook in my component by simply calling the useZoom hook; that’s it:

Now I can use the isFullScreen, and I am able to render the button only for subgrids and only if it’s not in FullScreen mode. My toogleFullScreen function knows now if it should open or close the FullScreen mode. This will trigger the updateView method, and then the custom hook will take care of the changes.

Maybe it’s a little oversized, but I like the idea that I can reuse this hook in my next implementations.

FullScreen mode for a Dataset PCF using FluentUI

Have a closer look to the FullScreen mode of my ColorfulOptionsetGrid Dataset PCF

  • Do you remember my other blog about Dataset height? Rendeder as a subgrid, I had to take care not to set the height. But when I change in FullMode, I don’t get the scrollbar I had on the form. I still detect in my parameters that it’s a subgrid, but in this case the height is set, so I need to teach my DetailsList to display “FullHeight, taking care to always display the header and the footer in the visible area, while the scrollbar is only scrolling the records. That part is still to come in another blog from this series. So basically I have:
if (isSubgrid===true && isFullScreen===false){
  //render the Zoom button
  //render as subgrid here (don't set the height)
}
else{
  //render Grid with css height:100%
}
  • I’ve also noticed that in FullMode I don’t get the features I’ve set in the manifest: display quick find input, display view selector and command bar. I must admit that I didn’t expect that. Specially the missing of “quick find” input has an impact on my PCF, since I rely on in: the user cannot search anymore. I think this aspect might be important for designing a Dataset PCF.

An easier way (discovered by hazard, but not that safe)

Actually there might be a trick, to implement to zoom in/out very simple: I just placed the button for toggle to FullScreen on the right-upper corner. On click on it, I called

context.mode.setFullScreen(true)

When the page is FullScreen, my button was still visible, but the “X” button covered my button (by coincidence), so I could close the screen without any other trouble. That doesn’t helped till the end (I needed to know my state, in order to implement the scrolling for my grid), but there might be simpler cases where it’s enough. At least as long as the css and the rendering doesn’t change, and the button is covered by the “X” button.

I wouldn’t like to rely on that, but maybe is good to know why it might work without keeping track of the state:

One thought on “Zoom In (FullScreen) PCFs

Add yours

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

Website Powered by WordPress.com.

Up ↑

<span>%d</span> bloggers like this: