cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
JoCas
Helper I
Helper I

Error when invoking the openPopup() method from the PopupService

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 Robot Very Happy
 
1 ACCEPTED SOLUTION

Accepted Solutions

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

View solution in original post

8 REPLIES 8
sgpchenchang
Power Apps
Power Apps

Hi,

 

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

Hi!

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

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).

Hi sgpchenchang,

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

Thanks!

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

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

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: {}
        }

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;

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Power Platform Call June 2022 768x460.png

Power Platform Community Call

Join us for the next call on June 15, 2022 at 8am PDT.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Kudoed Authors
Users online (3,080)