Hiding a tab based on whether a field Contains Data or not

(0) Share

Report

Posted on by JonClay

202

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

All responses (6)

Answers (1)

JonClay 202 on at

Like (0)

Report

RE: Hiding a tab based on whether a field Contains Data or not

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
Verified answer

CRMJetty 3,508 on at

Like (0)

Report
RE: Hiding a tab based on whether a field Contains Data or not

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.
Suggested answer

Abdul Wahab 12,070 Super User 2024 Season 1 on at

Like (0)

Report

RE: Hiding a tab based on whether a field Contains Data or not

Hi Jon Clay,

sure, You are welcome.
JonClay 202 on at

Like (0)

Report

RE: Hiding a tab based on whether a field Contains Data or not

Thank you so much. I'll try this next week.
Suggested answer

Abdul Wahab 12,070 Super User 2024 Season 1 on at

Like (0)

Report
RE: Hiding a tab based on whether a field Contains Data or not

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(); } }
Inogic 24,102 on at

Like (0)

Report

RE: Hiding a tab based on whether a field Contains Data or not

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!