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:
- Creating and deploying PCF button control to the Dynamics CE/CDS/Dataverse environment
- Adding this PCF button control to the Canvas App
- 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
- Open the canvas app
- Select File -> Settings -> Advance Settings
- 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.
Mohammed Hameed Hussain 
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
LikeLiked by 1 person
Hi Daniel, It wouldn’t work with the play button. Make sure you publish the app and run from the CRM
LikeLiked by 1 person
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
LikeLiked by 1 person
Hi Hameed,
I used the same code as you. Unfortunately, I get the following error: “Scripts may close only the windows that were opened by them.”
Please note that I am using the latest version of the Framework. Thank you!
LikeLike
Hi Hameed,
For me as the function in javascript behind the button works with npm start locally. and in design mode of canvas app. But after publishing the app it shows the error “Error loading control”.
LikeLike
Hi Hameed,
I want to close the power app after submitting the SharePoint form. Is it possible to invoke this component button action in on sucess form property?
LikeLike