Customer Engagement & Dynamics CRM Forum

Expand all | Collapse all

Hiding/Showing Form Tabs with Jscript

  • 1.  Hiding/Showing Form Tabs with Jscript

    GOLD CONTRIBUTOR
    Posted 20 days ago
    Hello All,

    I have been attempting to find a sample Jscript of some kind that would help me learn, and accomplish the goal of showing/hiding tabs in the Form. However, I have found a sample;
    I found it surfing this CRM in fact which is great, only problem I have is now I need to figure out how to set up an "If/Then" statement of sorts to basically state that;

    If this field value = this, then show specific tab and hide all others. If this field value = that, then show this other specific tab, and hide all others.

    Basically, I will need to 'nest' an if statement about 5 times, as there are 5 tabs total, 1 of which will actually be shown depending on a particular field value. The field will always have a value, as I am making it required to be filled out in the quick create entitlement form. Still working on getting that value to the main form when it's finally created but, that's down the road.

    I was wondering if there were any Jscript wizards out there that would be able to help with this request please? I'm not very Jscript savvy, although I do understand the concept, I'm just not well versed in the structure of how to build the code quite yet. I also understand that this will need to go on my Form, using the OnLoad function, other than that though I can't say I have much direction on how to get the If/Then statement going. I appreciate any help.

    Thank you,





    ------------------------------
    Nicholas Arbour
    TEKLYNX
    Whitefish Bay WI
    ------------------------------


  • 2.  RE: Hiding/Showing Form Tabs with Jscript

    SILVER CONTRIBUTOR
    Posted 19 days ago
    Hi Nicholas,

    You have the right function to use.

    When you write your code, make sure to set all tabs hidden. Then start your condition.

    Then, put the event in the field onchange. In the form, double click the field and select Events tab, you should be be able to see onChange. On form load will not change any of your tab visibility if you want to base it on a field value change.

    Hope this gives you enough idea.

    ------------------------------
    Lyrio Amurao
    Tala Dynamics
    North York
    ------------------------------



  • 3.  RE: Hiding/Showing Form Tabs with Jscript

    GOLD CONTRIBUTOR
    Posted 19 days ago
    Hello Lyrio,

    Thanks for that information, that helps greatly actually. I realize the code would be much longer if I had things not hidden, as I would need to essentially toggle them on/off to get the right one. But you mention OnChange, so when the field changes it takes place. Is there any reason why OnLoad would not work? Could you elaborate? Additionally, if you happen to know where I can find a sample of this Jscript I provided above used in an If/Then statement? I can usually reverse engineer how the structure of the code is built and test it until I get it right but, I honestly don't know how to begin building it, or whether or not I'll need to create classes/containers for my functions? (not sure if I'm using that terminology properly)

    Either way, I appreciate the heads up on the OnChange function and the starting hidden state of the Tabs.

    Thank you,

    ------------------------------
    Nicholas Arbour
    TEKLYNX
    Whitefish Bay WI
    ------------------------------



  • 4.  RE: Hiding/Showing Form Tabs with Jscript

    SILVER CONTRIBUTOR
    Posted 19 days ago
    Hi Nicholas,

    OnFormLoad will work but only when you load the form. When you change the field value just as how you described it, the js function will be called unless you load the form again.

    On OnChange event, every time you change the field value, it will call the js function and hide/show the appropriate tabs.

    In your case, you can have the same script applied to both form load and onchange events.

    Sample code for you. You can start with this and improve it as you go:
    function ToggleTab(executionContext) {
    _formContext = executionContext.getFormContext();

    var value = _formContext.getAttribute("field").getValue();
    _formContext.ui.tabs.get("tabName1").setVisible(false);
    _formContext.ui.tabs.get("tabName2").setVisible(false);
    _formContext.ui.tabs.get("tabName3").setVisible(false);

    if (value === 1)
    _formContext.ui.tabs.get("tabName1").setVisible(true);
    else if (value === 2)
    _formContext.ui.tabs.get("tabName2").setVisible(true);
    else if (value === 3)
    _formContext.ui.tabs.get("tabName3").setVisible(true);
    }

    ------------------------------
    Lyrio Amurao
    North York
    ------------------------------



If you've found this thread useful, dive deeper into User Group community content by role