How to display a Power Apps | Canvas app in full screen without the title bar?

Recently, I was asked to open a PowerApps | Canvas app without the title bar at the top of the screen. After some research, I found an answer from matthew devaney that proposed to add the “&hidenavbar=true” parameters to the URL of the application. This works perfectly and allows us to hide the title bar.

Today, I’m going to present a method that will allow us to achieve the same need without asking the users to add the parameter to their URL.

The solution is to use a Model Driven App as a container for the PowerApps application. Yes, this is possible thanks to the new Custom Page component + the use of a setting to hide the navigation bar in our Model Driven App.

Details steps

First, we will need to create a model driven application using make.powerapps.com

Then, we will add a Custom Page to the application. The goal is to be able to display the Custom Page on the home page of the MDA application.

My Custom Page contains a single screen where it displays “Hello, World!

Note:


The best part is that you can convert your Power Apps | Canvas to Custom Pages. This way, you won’t have to recreate your Power Apps from scratch.

For more details about converting existing Power Apps to Custom Pages, please refer to the following blog: https://kkit365.wordpress.com/2021/08/02/how-to-make-a-powerapp-into-a-page-preview/

GOOD JOB KARAN !!

After publishing all the Customizations, the model driven app will look like this:

Now, we will apply the setting “HideNavbar” on our MDA to hide the navigation bar. This will allow the Custom Page to be displayed in Full Screen mode. For this, open the MDA application and open the console and run the code below. Of course, you have to replace the name of the MDA for this to work correctly.

fetch(window.origin + "/api/data/v9.1/SaveSettingValue()", {
    method: "POST",
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ AppUniqueName: "mea_CustomApp", SettingName: "HideNavbar", Value: "true" })
})

After publishing the custumizations. The MDA application will display the Custom Page in full-screen mode:



Hope it helps…

4 thoughts on “How to display a Power Apps | Canvas app in full screen without the title bar?

  1. Very interesting Medhi. Can you navigate to a form or a view from a canvas page while using this method. If yes, does the left navigation menu still remain hidden? I think it could be very cool if we hide it and create the illusion of a self contained app.

    Liked by 1 person

Leave a 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