Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Microsoft Dynamics CRM forum / Hiding a tab based on ...
Microsoft Dynamics CRM forum
Answered

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

(0) ShareShare
ReportReport
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

Categories:
Administration and Setup
  • JonClay Profile Picture
    JonClay 202 on at
    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 Profile Picture
    CRMJetty 3,508 on at
    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 Profile Picture
    Abdul Wahab 12,070 Moderator on at
    RE: Hiding a tab based on whether a field Contains Data or not

    Hi Jon Clay,

    sure, You are welcome.

  • JonClay Profile Picture
    JonClay 202 on at
    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 Profile Picture
    Abdul Wahab 12,070 Moderator on at
    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 Profile Picture
    Inogic 24,031 on at
    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. 

    script.jpg

    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!

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Anton Venter – Community Spotlight

Kudos to our October Community Star of the month!

Announcing Our 2024 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Dynamics 365 Community Newsletter - September 2024

Check out the latest community news

more Community News

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 290,564 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 228,651 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,148

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans