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…