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?
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']
});
});
});
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…
@Chem it works perfectly thank you soooo much ! 
In my opinion, this really takes the form’s “Steps” to the next level and makes this function more like a wizard - superb! 
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.
This is amazing. Thanks so much for figuring this out Chem. As @GREDDIE said this takes forms to a whole new level.
I was playing with iframes to include tables and other resources in the form itself but was running into issues because formatting, CORS, etc. I switched to seeing if I could do something like this then found this post and was able to fully execute what I wanted.
