How to show document tab for model-driven forms

Hello Readers,

Today, we're going to discuss a unique, yet straightforward technique that lets you automatically add the Documents tab to any form in your model-driven app. You'll be able to achieve this with the simple addition of a JavaScript function to your web resources and hooking it up to the forms OnLoad event and nothing more.

Getting Started

Before we dive in, it's essential to ensure that you have the necessary permissions to add or modify JavaScript in your Power Apps environment.

Adding the JavaScript to Web Resources

First, navigate to the web resources section in your Power Apps environment. Here, you will add the JavaScript function that we're discussing. This function will simulate visiting the Documents tab, then swiftly switch back to the main tab, all in a fraction of a second. The transition is so quick that your end-user won't even notice it, yet it enables the Documents tab to be visible and accessible on form load.

Here's the JavaScript function you need to add:

function showDocumentsTab(executionContext) {
  var frmCtx = executionContext.getFormContext();
  frmCtx.ui.navigation.items.get("navSPDocuments")?.setFocus();
  frmCtx.ui.tabs.get(0)?.setFocus();
}

Adding the Function to the Form's OnLoad Event

Once you've added the JavaScript function to your web resources, the next step is to link this function to the form's OnLoad event. To do this, go to your form customization settings and add the function showDocumentsTab to the OnLoad event.

What Does This Function Do?

When your form loads, it triggers the showDocumentsTab function. This function then simulates a quick visit to the Documents tab before promptly returning to the main tab. As a result, the Documents tab becomes accessible and visible to your end users.

This technique offers a streamlined user experience, providing users with easy access to the Documents tab without any noticeable transition or extra steps.

Wrapping Up

And that's it! With a little bit of JavaScript and a couple of clicks, you can improve the usability of your model-driven forms by ensuring the Documents tab is displayed when the form loads. It's a simple yet powerful trick that enhances user experience.

Remember, always test any changes in a controlled environment before applying them to your production apps. Stay tuned for more tips and tricks to enhance your Power Apps journey.

Happy PowerApp-ing!