Skip to main content

Notifications

Announcements

No record found.

Microsoft Dynamics CRM forum
Answered

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

Posted on by 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

  • 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

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