Full-Screen Embedding of Canvas App in Power Pages

Displaying Canvas Apps in Power Pages: A Comprehensive Guide

The blog post dissects the process of integrating a canvas app in full screen mode into Power Pages. This practice was apparently linked to a couple of requirements in a recent project.

The author, Francesco Musso, reminds readers of the stipulation that Canvas apps can only be utilized by licensed users, negating any unintended advice of making canvas apps accessible to external users.

The first step in this process involves finding the correct URL format for embedding, which was discovered from an invaluable page. The URL format requires replacing the placeholder [AppID] with the genuine ID of the canvas application (excluding the square brackets).

Francesco proceeded by embedding the canvas application with an iFrame into a new page, inputting the URL of the canvas app into the Embed URL field before proceeding with the Visual Studio Code for modifications.

The reason for his usage of an iframe through the design canvas was his intention to exclude any default HTML elements and fine-tune the iframe's dimensions.

Initially, specific dimensions are allocated to the iframe, although users can modify this to suit their requirements. Width was set to 100% and height to 768px, with an actual example of the iframe code being provided, including width, height, and class (excluding the app ID).

Francesco also introduced a class of 'canvas-app-embed', a customizable feature designated for styling/scripting. The employed height is flexible, permitting expansion to the full length of the window when the page loads.

A sequence of files is displayed when VC opens, including a CSS file for the page's styling, a JS file for scripting/interactivity, and an HTML file for markup. When the CSS file is selected, it enables hiding the header and footer of the Power Pages website.

Upon completing these steps, the changes were synced from VS code back to the Power Pages session, and the result previewed.

All in all, the author provides a systematic and instructive guide making the process of embedding a full-screen Canvas app into Power Pages not only comprehensible but a cinch!

General Overview

The process of integrating a full-screen Canvas app to Power Pages is evidently practical and methodical. Requirements such as having licensed users and the appropriate URL format factor in heavily into successfully accomplishing this. Employment of various tools, careful editing as well as a user-friendly approach spice up this intricate process, paving the path for future technological advances in this arena.

Read the full article Embed a Canvas App in full screen mode, in Power Pages

Learn about Embed a Canvas App in full screen mode, in Power Pages

One of the intriguing features in the world of digitized operations is embedding a Canvas App in full screen mode. The application allows the full presentation of a canvas app into special pages, referred to here as Power Pages.

Before delving into the process, it's important to remind users that this unique application is only permissible to licensed users. This is not a "backdoor" into making canvas apps accessible externally; an assurance is given that everything being discussed is on the up and up.

The process begins with obtaining a unique URL format that is crucial for embedding. This is a pre-configured URL for the application that looks like this:

https://apps.powerapps.com/play/[AppID]?source=website

You only need to replace [AppID] with the ID of your canvas app. Note, the square brackets [] should not be included.

Next, canvas apps can be embedded using an iframe. Follow these steps:

• Create a New Page
• Select iFrame option from the menu
• Typed in the URL for your canvas app in the Embed URL field and click OK.

An alternative way to embed the app is by using code. This is preferred for those who want to avoid the default HTML that surrounds the app like divs etc. Developers may also want to tweak the iframe’s dimensions to fit their specifications. Ideal dimensions may be a Width of 100% and a height of 768px.

• The above iframe can include width, height and a class; though these are not mandatory. An example of iframe code is as follows:

<iframe frameborder="0" width="100%" height="768px" src="https://apps.powerapps.com/play/YOUR APP ID HERE?source=website" class="canvas-app-embed"></iframe>

Also, a class of canvas-app-embed can be added, which can be named as desired. Its only purpose is to aid in styling or scripting.

Once these configurations are done, save them (Ctrl + S) then select the HTML file and save again. Delete all but the iframe and edit the style tag so the width is 100% and height is 768px. Once again, save your changes. Finally, select the CSS file and edit it by following these examples:

.navbar-static-top.navbar-inverse {
display: none;
}