Announcements
Hi everyone
I'm trying to show or hide a tab based on whether or not a field contains data.
The basic principle is if a field called Type contains data then tab_16 should show. If the field called Type does not contain data then tab_16 should not show.
I know that I have to do this in Javascript, and I believe that I might have got part of the way. However, I know that the second part of the code is wrong, but my experience of Javascript is very minimal! Could anyone help me with this please?
Also, how do I ensure that tab_16 shows if Type changes from not containing data to containing data?
function hideOrShowSubgrids() {
var taskTab = Xrm.Page.ui.tabs.get('tab_16');
//Time out function to wait untill the component loads.
if (taskTab == null || taskTab == "undefined") {
setTimeout(function () { hideOrShowSubgrids(); }, 1000);
return;
}
//Set the tab as visible if the Field "Type" contains data.
if (fieldname == "Type") {
Xrm.Page.ui.tabs.get('tab_11').setVisible(true);
}
}
Many thanks
Jon
Hi Maulik Shah
Many thanks for sending me this solution.
I'm just about to go on my holidays, so I will try this once I'm back!
Best wishes
Jon
Hello Jonclay,
The Type field is located in the Contact entity. The form has a tab labeled Types of Contact. Tab should be visible when Type field contains data, and hidden when it doesn't.
To hide/show the tab in the form, follow the steps below.
Step 1: Create one JS file and write the following code.
'new_type' is the logical name of the field.
type_contact: This is the name of a tab that we want to hide or show.
function hideShowTab() { var type = Xrm.Page.getAttribute("new_type").getValue(); if (type != “”) { window.parent.Xrm.Page.ui.tabs.get("type_contact").setVisible(true); } else { window.parent.Xrm.Page.ui.tabs.get("type_contact").setVisible(false); } }
also, You can refer this blog to hide tab based field contain or not.
Thank you so much. I'll try this next week.
Hi Jon Clay ,
Please try below code. It will help to solve your problem
function showHideTab2(executionContext) {
try {
//Get the form contex
let formContext = executionContext.getFormContext();
let attributeValue = getValue(formContext, "atrribute");
if (attributeValue !== "") {
showHideTab(formContext, "tab_2", true);
}
else {
showHideTab(formContext, "tab_2", false);
}
} catch (e) {
openAlertDialog("Error from showHideTab2: " "e: " e ". e.mesage: " e.message);
}
}
function showHideTab(formContext, tabName, isVisible) {
try {
let tabObj = formContext.ui.tabs.get(tabName);
if (tabObj) {
tabObj.setVisible(isVisible);
}
}
catch (e) {
openAlertDialog("Error from showHideTab: " "e: " e ". e.mesage: " e.message);
}
}
function getValue(formContext, attribute) {
let value = "";
try {
if (this.getControl(formContext, attribute) !== "") {
value = formContext.getAttribute(attribute).getValue();
}
} catch (e) {
openAlertDialog("Error from getValue: " "e: " e ". e.mesage: " e.message);
}
return value;
}
function getControl(formContext, control) {
let controlValue = ""
try {
controlValue = formContext.getControl(control);
} catch (e) {
openAlertDialog("Error from getControl: " "e: " e ". e.mesage: " e.message);
}
return controlValue
}
function openAlertDialog(alertStrings) {
try {
Xrm.Navigation.openAlertDialog(alertStrings).then();
} catch (e) {
Xrm.Navigation.openAlertDialog("Error from openAlertDialog: " "e: " e ". e.mesage: " e.message).then();
}
}
Please find the below changes in your code
Note: Attach this event OnChange of Type field also, so if the user manually makes the Type field empty that time also tab_11 get to hide or show and while registering the script pass the executioncontext as first parameter as shown in below screenshot.
function hideOrShowSubgrids(executionContext) {
var formContext = executionContext.getFormContext();
var taskTab = formContext.ui.tabs.get('tab_16');
var type = formContext.getAttribute("Type").getValue();
//Time out function to wait untill the component loads.
if (taskTab == null || taskTab == "undefined") {
setTimeout(function () { hideOrShowSubgrids(); }, 1000);
return;
}
//Set the tab as visible if the Field "Type" contains data.
if (type != null && type != undefined && type != "") {
formContext.ui.tabs.get('tab_11').setVisible(true);
} else {
//hide data if Field "Type" does not contains data
formContext.ui.tabs.get('tab_11').setVisible(false);
}
}
Hope this helps.
Thanks!
André Arnaud de Cal... 291,359 Super User 2024 Season 2
Martin Dráb 230,370 Most Valuable Professional
nmaenpaa 101,156