Power Platform Community Forum Thread Details

Hi Devs,

I am trying to open a web resource in the main Power model driven Apps tab on an image click inside a PCF dataset control. The image is wrapped in anchor tag having onclick event handler. I have set the openInNewWindow option to false and tried setting height and width elements to 0 in an openWebresourceOptions parameter of context.navigation.openWebResource method, but still it gets opened in a new tab.

Everytime it opens it in a new tab or window, however I need to open it in the main power model driven apps window.

Here you go with the method that runs on the click of an anchor and opens the web resource.

    // Method to open the web resource
    private openWebResource(context: ComponentFramework.Context<IInputs>): void {
        // https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/navigation/openwebresource
        // Web Resource name`
        const webResourceName = "new.html";
        // OpenWebResourceOptions
        const openWebresourceOptions = { openInNewWindow: false };
        // Open the web resource using context.navigation.openWebResource
        context.navigation.openWebResource(webResourceName, openWebresourceOptions);
    }

Categories:

Power Apps Pro Dev & ISV

Hi Khadim Ali,

Opening a web resource directly in the main tab of a model-driven app using context.navigation.openWebResource may not work as expected due to platform constraints. Using Web Resource Controls, Custom Pages, or a Modal Dialog is a more reliable approach to display the resource within the app. The recommended method is to transition to Custom Pages for modern, seamless integration.

If embedding isn’t required, you can use a modal dialog to display the web resource instead of opening it in a new tab: Use navigateTo with Modal Dialog: context.navigation.navigateTo({
pageType: "webresource",
webresourceName: "new.html",
}, {
target: 2, // Opens in a modal dialog
height: { value: 70, unit: "%" },
width: { value: 50, unit: "%" },
});