In this article, we will review how to embed Power Apps into PPM Express.
The Power Apps can be embedded into PPM Express pages from the Tenant Settings -> Extensions section or directly on the Project/Portfolio/Program/Idea/Business Challenge dashboard -> Embedded Content section.
We will review the example of the Tenant Setting -> Extensions section, but the process is the same for the Embedded Content dashboard section.
Embedding a Canvas app
To embed a Canvas app, perform the following:
1. Open the Tenant Setting -> Extensions and click New Extension.
2. Type in the name of the extension and select its type.
3. Select the size for the extension.
4. Provide the embedded URL for the Canvas app.
To create an embedded URL for the Canvas app, open Power Apps. Expand the menu for the Canvas app you want to embed and select Details -> Details.
5. Copy the Web link.
Copy the URL but not fully (we don't need any query string parameters in the URL), only till the tenantId.
6. Open the PPM Express Tenant Settings page again and paste the link into the URL section.
Add the following part to the original URL: source=iframe
7. Choose the location for the extension.
8. Add the description if necessary.
9. Click Create Extention.
The extension will appear at the selected location (Projects page -> Views in our example).
Embedding a Modal-Driven app
To embed a Modal-driven app, perform the following:
1. Open the Tenant Setting -> Extensions and click New Extension.
2. Type in the name of the extension and select its type.
3. Select the size for the extension.
4. Provide the embedded URL for the Modal-drive app.
To create the embedded URL for the Modal-driven app, open Power Apps. Expand the menu for the app you want to embed and select Share -> Add to Teams.
5. There is no need to add the app to Teams. We need to get the embedded URL. To do this, click Download app.
6. In the downloaded zip folder, open the JSON file using the Notepad++ app or a similar one.
In the opened file, search for the staticTabs -> websiteUrl. (If you opened the file with Notepad ++, you can make the search easier by using the Plugins -> JSON Viewer or JSON tools -> Pretty Print).
7. Copy the URL but not fully (we don't need any query string parameters in the URL), only till the source.
8. Open PPM Express Tenant Settings -> Extensions. Paste the copied URL and add the source=iframe part to this URL.
9. Select the Extension Location. Type in the description if needed.
10. Click Create Extension.
The extension will appear at the selected location (Programs page -> Views in our example).
