Hide or highlight Tabs based the value of a field when the form is loaded

Forms SharePoint Online
1

Hello I'm new here and wondered if you could help me with my first project. I have 4 tabs I would like to highlight the tab that relates to the value in a field when the form is loaded for example. If the field Reason for Change = Salary highlight tab Change of Role in Blue. Alternatively hide the other tabs and show only the relevant tab Change of role. Hope you can help.

2

Dear @Heathaze,
Took a bit more time than expected, but you can find an example here - TabJavaScript

Here's the code that I've used, adjusted for SharePoint:


fd.spRendered(function () {
    //highlight when tab switches
    fd.container('Tabs1').$watch('currentTab', function() { 
        highligth_or_hide_tabs(fd.field('Highlight').value);
    }) ;
    
    //highlight when dropdown changes
    fd.field('Highlight').$on('change', function(value) {
        console.log(fd.container('Tabs1').tabs);
        highligth_or_hide_tabs(value);
    });
    
    //highlight on opening
    highligth_or_hide_tabs(fd.field('Highlight').value);
});

function highligth_or_hide_tabs(value){
    if(value == 'Hide tabs 1 & 2'){
        //disabled tabs are hidden with CSS
        fd.container('Tabs1').tabs[0].disabled = true;
        fd.container('Tabs1').tabs[1].disabled = true;
        
        //set current tab to enabled one
        fd.container('Tabs1').setTab(2);
    }
    else{
        fd.container('Tabs1').tabs[0].disabled = false;
        fd.container('Tabs1').tabs[1].disabled = false;
        setTimeout(function(){
            var tabs = fd.container('Tabs1').$el;
            var tab1 = $(tabs).find('.nav-tabs .nav-item')[0];
            var tab1_link = $(tab1).find('.nav-link');
            var tab2 = $(tabs).find('.nav-tabs .nav-item')[1];
            var tab2_link = $(tab2).find('.nav-link');
            var tab3 = $(tabs).find('.nav-tabs .nav-item')[2];
            var tab3_link = $(tab3).find('.nav-link');
            //reset the previous highlight
            $(tab1_link).removeClass('highlight');
            $(tab2_link).removeClass('highlight');
            $(tab3_link).removeClass('highlight');
            if(value == 'Tab 1'){
                $(tab1_link).addClass('highlight');
            }
            else if(value == 'Tab 2'){
                $(tab2_link).addClass('highlight');
            }
            else if(value == 'Tab 3'){
                $(tab3_link).addClass('highlight');
            }
        }, 100)
        
    }
}
1 Like
3

Thank you this is great, I have got it to work to an extent, do you have the css for the formatting I can't seem to replicate your demo. Your help is appreciated.

4

Dear @Heathaze,
Yes, of course, forgot to include :sweat_smile: Here it is:

.tabset .disabled{
    display: none; /* hide disabled tabs */
}

.fd-form .nav-tabs .nav-link.highlight{
    background: crimson;
    color: white;
}

.fd-form .nav-tabs .nav-link.active.highlight{
    background: gold;
    color: white;
}
5

You have been very helpful thank you again.

1 Like