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.