Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / how to show/hide a tab...
Customer experience | Sales, Customer Insights,...
Answered

how to show/hide a tab using javascript

(0) ShareShare
ReportReport
Posted on by ydynamics 102

I know this has been asked a million times but none of the jscripts have worked for me. 

(I'm a beginner)

I want to hide a tab and all sections within it. This will be based on an option set where I have edited the 'yes' and 'no'. 

The tab is called: Threatproducts

The field is called: opportunityorthreat

The tab has four sections: do I need to also include hiding these when I write the code or will hiding the tab they're in suffice?

I want it to hide when the field (on a different tab) is set to either 'yes' or 'no'. Would these be set to 'true' or 'false' in the code?

  • FidelMartin Profile Picture
    FidelMartin 128 on at
    how to show/hide a tab using javascript

    Follow the below steps to hide/show the tab in the form.

    Step 1: First, we will create one JS file and write the code as below.

    new_type: Is a Logical name of field.

    type_contact: It’s a unique name of a tab which 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);
    }
    }

    ➢ So here we create a function hideShowTab, which we will call on loading of the form.

  • ydynamics Profile Picture
    ydynamics 102 on at
    RE: how to show/hide a tab using javascript

    Thanks Mehdi, I had it on onsave and it worked but would revert back on refresh.

    Onload has rectified that.

  • Verified answer
    meelamri Profile Picture
    meelamri 13,212 User Group Leader on at
    RE: how to show/hide a tab using javascript

    Please, don't forget to add your function to the onLoad Handler.

  • ydynamics Profile Picture
    ydynamics 102 on at
    RE: how to show/hide a tab using javascript

    Thank you so much that worked perfectly!

  • Verified answer
    meelamri Profile Picture
    meelamri 13,212 User Group Leader on at
    RE: how to show/hide a tab using javascript

    Hi, 

    Please use the code below: 

    function DisplayState(executionContext) {
    var formContext = executionContext.getFormContext();
    var opportunityOrThreat = formContext.getAttribute('py3_opportunityorthreat').getValue();
    var tabObj = formContext.ui.tabs.get("Threatcgproducts");
    if (opportunityOrThreat == 215500001) {
        tabObj.setVisible(true);
    }
    else if (opportunityOrThreat == 215500000) {
        tabObj.setVisible(false);
    }
}

    Also, you need to run this function on onChange Event and don't forget to pass the executionContext: 

    pastedimage1623925325540v3.png

  • ydynamics Profile Picture
    ydynamics 102 on at
    RE: how to show/hide a tab using javascript

    I have edited the code to this but still get an error: 

    function DisplayState() {

    var py3_opportunityorthreat = Xrm.Page.getAttribute("py3_opportunityorthreat").getValue();
    if (py3_opportunityorthreat == 215500000) {
    Xrm.Page.ui.tabs.get("tabThreatcgproducts").setDisplayState(true);
    Xrm.Page.ui.tabs.get("tabThreatcgproducts").setDisplayState(false);
    }
    else if (py3_opportunityorthreat == 215500001) {
    Xrm.Page.ui.tabs.get("tabThreatcgproducts").setDisplayState(true);
    Xrm.Page.ui.tabs.get("tabThreatcgproducts").setDisplayState(false);
    }
    }

  • ydynamics Profile Picture
    ydynamics 102 on at
    RE: how to show/hide a tab using javascript

    I thought vent was part of the jscript!

  • ydynamics Profile Picture
    ydynamics 102 on at
    RE: how to show/hide a tab using javascript

    Tab is called: Threatcgproducts

    Sections: (five in total)

    Instructions

    Threatcgproducts_section_2 [editable grid]

    Threatcgproducts_section_3 [field]

    Threatcgproducts_section_4 [editable grid]

    Threatcgproducts_section_5 [read only grid]

    Field schema name is: py3_opportunityorthreat

    I've notice an error I made: the two options in this field have values, they aren't yes or no (sorry about that!). 

    Hide if field value is: 215500000

    Show if field value is: 215500001

    I have replaced the true false in the code you wrote but I still got the same error.

    Thank you once again guys for taking the time out to help with this!

  • Charan Raju C R Profile Picture
    Charan Raju C R 7 Moderator on at
    RE: how to show/hide a tab using javascript

    Hi ydynamics,

    Looks like the field vent_py3_opportunityorthreat is not placed on the form you have registered onsave javascript function.

  • meelamri Profile Picture
    meelamri 13,212 User Group Leader on at
    RE: how to show/hide a tab using javascript

    All right, no worries. Let's start from the beginning...Share some screenshots explaining exactly what you want to achieve. Also, share the name of your tabs and sections

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

Daivat Vartak – Community Spotlight

We are honored to recognize Daivat Vartak as our March 2025 Community…

Announcing Our 2025 Season 1 Super Users!

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

Kudos to the February Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 293,278 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,998 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156 Moderator

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans