Close Canvas App window using PCF button

Canvas Apps can be launched from within the Dynamics CE using a ribbon button and calling a javascript funtion to open the Canvas App in a new window using window.open.

However, once a Canvas app window is launched, you can’t close the window. Microsoft provides Exit() and Exit(true) functions. Exit() navigates away from the current page and redirects to the list of canvas apps, while Exit(true) signs out the user and navigates to the login page. In either case, the window should be closed manually by the user.

I found a way to close this window using PCF button embedded within a canvas app. This a two step process:

  1. Creating and deploying PCF button control to the Dynamics CE/CDS/Dataverse environment
  2. Adding this PCF button control to the Canvas App
  1. Creating and deploying the PCF button control to the Dynamics CE environment:

You can follow this blog to create and deploy the PCF button control with one additional changes. In the submitClicked(event:Event) handler, add the following code

2. Adding the PCF button control to the Canvas App

To enable PCF control to be used within the Canvas App, you need to:

  • Enable power apps component framework for canvas app in the power platform admin center
  • Enable Components in Preview Features of the Canvas App settings

Enable power apps component framework for canvas app in the power platform admin center

  • Go to admin.powerplatform.microsoft.com
  • Select the Environment where you want to embed the PCF control
  • Click Settings -> Product -> Features
  • Enable the Power Apps component framework for canvas apps

The next step is to Enable Components in Preview Features of the Canvas App settings

  1. Open the canvas app
  2. Select File -> Settings -> Advance Settings
  3. Under Preview Features -> Enable Components

Now that the PCF control components is enabled for your CDS/Dataverse environment and the Canvas App, let’s embed this control in your Canvas App.

  • Go to the canvas App
  • Select the Insert tab -> Custom -> Import component
  • You will notice two tabs, Canvas and Code. Select the “Code” tab
  • Select your PCF control (this is visible only if your pcf control is deployed to this CDS environment, see step 1 – creating and deploying the pcf control) from the list, and click on Import
  • Importing this component will enable the Code components section in your Insert tab in the left navigation and display your PCF control
  • Drag this control across to your Canvas App
  • Save and Publish

Test this out by opening the canvas app from the ribbon button. Now, clicking on this button should close the Canvas App.

3 thoughts on “Close Canvas App window using PCF button

  1. Hey Hameed,

    Hope to find you well.

    I just tried tom implement what you describe here, but it is not working for me.

    I tested the PCF on the sandbox environemtn (npm start) and it was working fine, if I test the button when I hit “Play” on the canvas app, it works fine BUT if I call the Canvas app (with url) the button does nothing….

    Do you have any tip for me?

    Thank you in advance,
    Daniel Serrano

    Liked by 1 person

      1. Hi Hameed, thank you for the reply.

        The App is published in the Crm. I a have button with JS code calling the canvas app by the canvas URL (app ID), and the PCF does not work

        Liked by 1 person

Leave a Reply to Hameed Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s