You’re offline. This is a read only version of the page.
8
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.
Share
Reportfunction 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!
Hi @priya_
perhaps you can try the opposite, hide all tabs by default and then only show the ones you are interested.
something like this
All responses (
Answers (
function showTabOnLoad(executionContext) {
var formContext = executionContext.getFormContext();
// Get the tab you want to show
var tab = formContext.ui.tabs.get("tab_1");
// Check if the tab exists and show it
if (tab) {
tab.setVisible(true);
}
}
//rest of the code
If my response resolved your issue, please feel free to mark it as the solution by clicking accept it as a solution.
If you liked my solution, please give it a thumbs up.
This helps others find the answer more easily.
Connect with me: LinkedIn
#1
WarrenBelz
146,635
Most Valuable Professional
#2
RandyHayes
76,287
Super User 2024 Season 1
#3
Pstork1
65,997
Most Valuable Professional
