Hide a Table when a particular Form Step is selected

Hi All, I’ve designed my main app screen with the open record taking up two thirds of the width of the screen, from the left, with a number of joined tables appearing down the right side of the screen.

My main record utilises Steps (tabs) and this is a great way to unclutter the screen but I wondered if it’s possible with CSS to hide tables based on what step/tab is selected?

@Chem would you be able to confirm please?

@GREDDIE are you discussing the use of these tabs or Form Component Steps?

Hi @Chem , these Steps on a Form component…

I have a number of tables I display on the right and it would be great to display only those relating to the current tab / “step”.

Graham.

Hi @GREDDIE, got it! There may be a more elegant way to do this, but this is working for me.

Working demo
https://tutorials.tadabase.io/multi-step-form#!/show-components-based-on-step

Video instructions

JavaScript

var FORM_COMPONENT_ID = 'component_9';
var TABLE_1_ID = 'component_6';
var TABLE_2_ID = 'component_7';
var TABLE_3_ID = 'component_8';
var TABLE_4_ID = 'component_ID';

TB.render(FORM_COMPONENT_ID, function(data) {
    TB.hideComponent(TABLE_2_ID);
    TB.hideComponent(TABLE_3_ID);
    
    data.ele.find('.form-navigation-page').each(function (index) {
        new MutationObserver(function (mutations, observer) {
            mutations.forEach(function (mutation) {
                if ($(mutation.target).hasClass('active')) {
                    TB.hideComponent(TABLE_1_ID);
                    TB.hideComponent(TABLE_2_ID);
                    TB.hideComponent(TABLE_3_ID);
                    
                    
                    
                    if(index === 0){
                        TB.showComponent(TABLE_1_ID);
                    } else if (index === 1){
                        TB.showComponent(TABLE_2_ID);
                    } else if(index === 2) {
                        TB.showComponent(TABLE_3_ID);

                    } else if(index === 3){
                        TB.showComponent(TABLE_4_ID);
                    }
                }
            });
        }).observe(this, {
            attributes: true,
            attributeFilter: ['class']
        });
    });
});
3 Likes

Hey @Chem this looks very promising thank you ! I’ll implement tomorrow morning and post some feedback ! I really appreciate you taking the time, thank you…

1 Like

@Chem it works perfectly thank you soooo much ! :slight_smile:

In my opinion, this really takes the form’s “Steps” to the next level and makes this function more like a wizard - superb! :star: :star: :star: :star: :star:

Mini-tip for anyone else especially if you have a lot of tables / tabs, as in my case I actually had 9 tables and 5 tabs so I copied a full list of all the tables into each “if” section and simply remarked out the ones I wanted to hide. I found this simple but very useful, so I could easily toggle and change configuration as I was building it out…

Graham.

1 Like