How to Add JavaScript Web Resource to Run on All Views in Model-Driven Power Apps?

[priya_]

Hello everyone,

I'm working on a model-driven Power App where I need to hide the top navigation bar across all views and forms. I've created a JavaScript web resource that hides the top navigation bar, but I'm struggling to get this script to run on all views within the application.

Here is the JavaScript code I’ve created:

function hideTopNavBar() {    
    try {
        var topBar = parent.document.getElementById("topBar");
        if (topBar) {
            topBar.style.display = "none";
            console.log("Top navigation bar hidden successfully.");
        } else {
            console.error("Element with id 'topBar' not found.");
        }
    } catch (error) {
        console.error("Error accessing parent document:", error);
    }
}

I've successfully added this script to run on forms by including it in the Form Properties under the onLoad event. However, I'm having trouble figuring out how to get this script to run on all views as well.

I've tried using Ribbon Workbench to add a JavaScript action to the view's ribbon, but I'm not sure if I'm doing it correctly or if there is a better approach.

Could someone guide me on the best way to ensure this JavaScript runs on all views? Specifically, how do I properly add a JavaScript web resource to views using Ribbon Workbench or any other method available in Power Apps?

Thank you for your help!

[Giraldoj]

Hi @priya_ 

Unfortunately there is no way to add JavaScript to the views directly, currently you can only add JS to forms.

Your only option is to hide all the button using the ribbon workbench or the command bar designer
https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/use-command-designer

If my response resolved your issue, please feel free to mark it as the solution by clicking "Accept as solution." This helps others find the answer more easily. If you found the content helpful in any other way, a "Thumbs Up" would be greatly appreciated. Thank you!

[priya_]

I want to hide the top nav bar not the command. The attached screenshot show the top nav bar that I want to hide.

[a33ik]

@priya_ Just for your information, there is no supported way to hide that bar. I would not recommend using the code you mentioned.

[priya_]

I would not recommend using the code you mentioned -  why so?

[a33ik]

The reason is - your code contains DOM injections that are not considered as a supported customization and since Microsoft doesn't recommend unsupported customizations I try to follow what they say and recommend you not using it.