Unanswered

Error when invoking the openPopup() method from the PopupService

(0) Share

Report

Posted on by 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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (8)

Answers (1)

sgpchenchang on at

Like (0)

Report

Hi,

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

Was this reply helpful? Yes No
JoCas 34 on at

Like (0)

Report

Hi!

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

Was this reply helpful? Yes No
sgpchenchang on at

Like (0)

Report

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

Was this reply helpful? Yes No
JoCas 34 on at

Like (0)

Report

Hi sgpchenchang,

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

Thanks!

CanvasModal.zip

Was this reply helpful? Yes No
Verified answer

jolake on at

Like (0)

Report

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

Was this reply helpful? Yes No
JoCas 34 on at

Like (0)

Report

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

Was this reply helpful? Yes No
PradeepPednekar Microsoft Employee on at

Like (0)

Report

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

Was this reply helpful? Yes No
Ndewitt 136 on at

Like (0)

Report
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;

Was this reply helpful? Yes No