Introduction to PCF Popups

Help UKRAINE

! Your action matters! Donate to support Ukrainian Army! Donate to charity funds! Organize/join street protests in your city to support Ukraine and condemn Russian aggression! Expose and report Russian disinformation! #StandWithUkraine

I like what PowerApps Component Framework allows you to do - possibility is almost limitless. However, as it is in preview not all features are documented or have a proper example. In this article, you will find an example of how to work with Popup possibilities of PCF.

Popup is a very useful feature - it allows you to manipulate with modal window easily. Let’s see how it can be done with PCF.

First of all, you need to retrieve PopupService. It allows you to manage your popups. To retrieve you can use getPopupService method from context.factory (see code below).

this._popUpService = context.factory.getPopupService();

Now we can use the createPopup method from PopupSerice to create a new popup. As a parameter, we need to pass Popup object to it (you can find interface for it here - ComponentFramework.FactoryApi.Popup.Popup). We will need several options from it:

closeOnOutsideClick - a boolean property that indicates whether popup close on an outside mouse click;
content - html content of the popup;
name - unique name of the popup;
type - can be one of two options: 1 - if Root popup, 2 if Nested.

Looks pretty clear right? Well unfortunately if you try to use object just with these parameters for creating popup it will fail with “Cannot read property ‘display’ of undefined” error. After some investigation I found an answer in PowerApps forum - one of the PowerApps team replied that we need to use popupStyle property inside Popup object and it should be an empty object. Because PCF is still in preview, not all features are documented and they will add it soon as possible. However, if you just try to add a popupStyle property to your Popup object you will get an error because in Popup interface definition there is no popupStyle property. To fix this let’s create our own interface that will extend the existing one with this property:

interface PopupDev extends ComponentFramework.FactoryApi.Popup.Popup {
    popupStyle: object;
}

Great. Now we can use our own PopupDev interface instead of default Popup one.

Now when we know how to create popup let’s build a simple control with a button that will open our popup.

Our control will have two private members: _container - html div element that will contain our control and _popUpService - which will hold our PopUpService.

private _container: HTMLDivElement;
private _popUpService: ComponentFramework.FactoryApi.Popup.PopupService;

In the init method create a div element which will be our container:

this._container = document.createElement('div');

Then create a button to show our popup:

let popUpButton = document.createElement('button');
popUpButton.innerHTML = "Show Popup";
popUpButton.onclick = () => this.buttonClick();

this._container.appendChild(popUpButton);

We will define buttonClick later - all it will do is open our popup.

Now let’s create popup content itself - in this example, it will be a simple ‘Hello World!’ text inside of the small div with white background.

let popUpContent = document.createElement('div');
popUpContent.innerHTML = 'Hello World!';
popUpContent.style.width = "200px";
popUpContent.style.height = "200px";
popUpContent.style.backgroundColor = "white";

Next, we need to define our Popup object.

let popUpOptions: PopupDev = {
    closeOnOutsideClick: true,
    content: popUpContent,
    name: 'dwcPopup', // unique popup name
    type: 1, // Root popup
    popupStyle: {}
};

PopupDev is an interface that we defined earlier.

After we define Popup object we need to get PopupService and create Popup itself.

this._popUpService = context.factory.getPopupService();
this._popUpService.createPopup(popUpOptions);

Great. The final line in our init method will be adding our _container to PCF container.

container.appendChild(this._container);

Now let’s write our buttonClick function.

private buttonClick(){
    this._popUpService.openPopup('dwcPopup');
}

Done. Now you can run your code and test that popup is working as expected (see demo below).

Sample Popup

You can find full code in my Sample PCF Popup repository on GitHub.

Introduction to PCF Popups

Working with Popup

Recent post