Error when invoking the openPopup() method from the PopupService

[JoCas]

I wanted to have a look at the PopupService exposed by the Component Framework. I'm thinking it will be something like of a modal appears whenever the openPopup is invoke which is in my case on a click of a button.
Here's a snippet of my code:

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)

    {

        this.button = document.createElement("button");

        this.button.innerText = "Open Canvas";

        this.button.addEventListener("click", this.buttonClicked.bind(this))

        container.appendChild(this.button);

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

        this.popUpId = "canvasPopUpContainerId";

        this.popUpName = "canvasPopUpContainer";

        let appId = context.parameters.canvasAppId.raw;

        let recordId = context.parameters.recordId.raw;

        let popUpOptions: ComponentFramework.FactoryApi.Popup.Popup = {

            closeOnOutsideClick: true,

            content: this.createCanvasContent(appId, recordId),

            name: this.popUpName,

            type: 1

        }

        this.popUpService.createPopup(popUpOptions)   

    }

    public buttonClicked(event: MouseEvent): any{

        this.popUpService.openPopup(this.popUpName);

    }

Am I doing this right? What's the right way of doing this? Thank's for anyone who can give an idea 

[sgpchenchang]

Hi,

Does this issue occur in the test harness or on CDS itself? Thanks.

[JoCas]

Hi!

It occurs on both harness and cds.
It throws the error Uncaught TypeError: Cannot read property 'display' of undefined

[sgpchenchang]

Hi JoCas,

If you don't mind, can you please share a zip of the pcf project with me? We will try to investigate into this issue. Thanks! (I don't need the solution zip, just the pcf project).

[JoCas]

Hi sgpchenchang,

Tried to create a much simpler project, but the error still persist.
Attached is the project zip file

Thanks!

[jolake · Accepted solution]

Hi JoCas,

Apologies for the confusion around this.

Your issue should be fixed if you update your code to look like this:

  let popUpOptions: ComponentFramework.FactoryApi.Popup.Popup = {

            closeOnOutsideClick: true,

            content: this.createCanvasContent(appId, recordId),

            name: this.popUpName,

            type: 1,

            popupStyle: {}

        }

We will be updating our documentation to include this property, as it is required for the popup support in preview.

Hope this helps

[JoCas]

Thanks Jolake! It worked! I added popupStyle as one of the properties of Popup in ComponentFramework ts definition as it won't compile.

[pradeeppednekar]

Please share me the ControlManifest.Input and index.ts files which are working as expected.We are getting issue when we are adding the 

let popUpOptions: ComponentFramework.FactoryApi.Popup.Popup = {

            closeOnOutsideClick: true,

            content: this.createCanvasContent(appId, recordId),

            name: this.popUpName,

            type: 1,

            popupStyle: {}

        }

[NickDewitt]

If you want typescript to compile it, you can write it as follows:

const popup = {
    name: "testPopup", 
    type: 1, 
    content: popupContent, 
    popupStyle: {} 
} as ComponentFramework.FactoryApi.Popup.Popup;