Dynamic category tab within resoruce based on single select TV

[maciej_ww]

Hello all!

I’m developing a project and trying to create a very abstract section. What I mean is that the user will be able to choose a value from tv singe select and the associated tab on the left will appear - please see below:

I called it “dynamic tab”. I will have more than 2 tabs in the future but will have more and it would be very useful to be able to control it this way.

Have anybody done something like that or similar, or maybe there is a better solution?

Thanks GUYZ!

[jako]

The ToggleTVSet extra could be an option, but it does not create an extra tab.

[maciej_ww]

Hi Jako,

Thanks for your reply. i have seen this plugin however we don’t want to depend on external modules… Would be great to have own solution in case the plugin gets depreciated or broken in the next modx versions.

[jako]

I don’t think that it is possible without external code. You can write that on your own for sure.

[maciej_ww]

Thanks, @jako, yeah that should be no problem, do you have any idea how to add this type of functionality or maybe do you know where I should start?

[jako]

You can fork the ToggleTVSet repository and modify the JavaScript to your needs. There is an ExtJS method to add new tabs to existing tab group.

[maciej_ww]

Thanks, jako!

I have looked into the code and I’m a bit confused, never had to use ext.js…
In my head i got idea that i catch single select tv and in my “change or select” event listener i check if the value is equal to category tab if yes then hide the others…

Below its my code how to get to tv name (fbColType) settings however it does not work…

MODx.on('ready', function() {
    // Assuming 'mySingleSelectTV' is the name of your single select TV
    var singleSelectTV = MODx.load({
        xtype: 'modx-combo',
        name: 'fbColType',
        hiddenName: 'fbColType',

        renderTo: Ext.getBody(),
        triggerAction: 'all',
        allowBlank: true,
        listeners: {
            'change': function(combo, newValue, oldValue) {
                console.log(oldValue)
      }
        }
    });
});

Do you have any idea how is it suppose to be done or can you point me into right documentation?

thanks!

[jako]

The combo has to get values, otherwise you can’t change it. Please look how ToggleTVSet is bound to a dropdown TV and put your code there.

[maciej_ww]

Well, i had a look on the source code from your plugin, however could not work out how to get to my tv. I don’t want to change my tv values or anything like that, all i need is to able to grab my single single select TV (fbColType) and attach a listener (select) to that. Could you please show example or point me into ToggleTVSet how to achieve that?

Also could you confirm if i can do it without creating custom template variable type? What i mean is this Custom Template Variables - Extending MODX | MODX Documentation.

Sorry to be a pain…