Power Platform Community Forum Thread Details

Hello everyone,

I am working on a model-driven app and I have a requirement to show/hide specific tabs based on the viewId parameter in the referrer URL. I have written a JavaScript function that fetches the viewId and hides or shows the corresponding tab accordingly.

function tabVisibilityControl(executionContext) {
 console.log("Script started!");

 var formContext = executionContext.getFormContext();

 // Get the viewId from referrer URL
 var urlString = document.referrer;
 var url = new URL(urlString);
 var viewId = url.searchParams.get("viewid");

 // Configuration mapping viewId to tab names
 const config = {
 "7cd3ad3e-23e0-4bab-9470-6baf46a5f9b0": "tab_0",
 "46ac8c12-2ce6-ee11-a203-6045bd71ec9a": "tab_1",
 "73bd2f05-7ee6-ee11-a203-6045bd71ec9a": "tab_3",
 "abb63b2d-7ee6-ee11-a203-6045bd71ec9a": "tab_4",
 "e9929e57-7ee6-ee11-a203-6045bd71ec9a": "tab_5",
 "b9ea787f-7ee6-ee11-a203-6045bd71ec9a": "tab_6"
 };

 // Check if viewId exists in the configuration and hide/show tabs accordingly
 if (viewId && config.hasOwnProperty(viewId)) {
 showTab(config[viewId]);
 } else {
 console.warn("ViewId not found in the configuration.");
 hideTabs(); // Hide all tabs if viewId not found
 }

 /*
 Function to show the appropriate tab and hide others
 @Param {string} visibleTabName - The name of the tab to make visible
 */
 function showTab(visibleTabName) {
 var tabs = formContext.ui.tabs.get();
 tabs.forEach(function (tab) {
 var tabName = tab.getName();
 var tabElement = document.querySelector("[data-id='" + tabName + "']");
 if (tabElement) {
 if (tabName === visibleTabName) {
 tabElement.classList.remove("hidden-tab");
 tab.setVisible(true);
 } else {
 tabElement.classList.add("hidden-tab");
 tab.setVisible(false);
 }
 }
 });
 }

 /*
 Function to hide all tabs
 */
 function hideTabs() {
 var tabs = formContext.ui.tabs.get();
 tabs.forEach(function (tab) {
 var tabName = tab.getName();
 var tabElement = document.querySelector("[data-id='" + tabName + "']");
 if (tabElement) {
 tabElement.classList.add("hidden-tab");
 tab.setVisible(false);
 }
 });
 }
}

When the form loads, all tabs are briefly visible before the script runs and hides them. This causes an undesirable flash of all tabs, which negatively impacts the user experience.

Is there a way to hide all tabs before the form fully loads and then show the appropriate tab after my script runs? How can I prevent the initial flash of all tabs on form load?

Any suggestions or best practices for handling this scenario in model-driven apps would be greatly appreciated!

Thank you in advance for your help!

Categories:

Building Power Apps