Dynamic Data in Tabs

At a glance

The community members are discussing how to use dynamic data in tabs. One community member suggests binding unique strings to the "value" of each tab trigger and tab content, such as "Collection Item".tabTitle. Another community member asks if it's possible to set up dynamic tabs where the user can set the number of tabs in a CMS, and the community members discuss different approaches to this, including creating multiple tab triggers and tab contents and setting "show" to false if there is no data.

The community members also discuss the need to always show the "value" prop, and one community member suggests setting a default value in the tabs. However, another community member reports that when they set a value for the tab content, the tab disappears in the preview. The community members continue to troubleshoot this issue, with one suggesting setting another value for the trigger as well, and another suggesting setting the tab to be active on startup.

vvoytado

Hello, is it possible to use dynamic data in tabs? I am trying to add collection in tabs list and tabs, but I am not really sure how it needs to be structured and if the component is ready for it? thank you

11 comments

BBogdan

Hey, you need to bind unique strings to "value" of each tab trigger and tab content. Could be something like "Collection Item".tabTitle

vvoytado

sounds like the number of the tabs is static in this case. Can I set it up to be dynamic

use collection in tabs list with tab trigger inside
and collection in tabs with tab content

Because user sets the number of tabs in cms. I am trying it but so far it makes items from collection in tabs list as one tab.

Only way that comes to my mind is creating many tab triggers and tab contents and setting show to false if there is no data.

BBogdan

Attachment

BBogdan

We need to always show value prop

vvoytado

Oh great thank you very much! 🙂 It was not obvious for me at first, but I am glad it works. There might be a automatic value if none is set based on the index but I am not sure it is good solution just an idea! (I though it will work that way)

BBogdan

It is automatic when tabs are static. When tabs are iterated with collection need to bind dynamic value caz no way to predict index in this case.

aalex FR

I'd like to ask a question on the same topic, this seems to be the only thread on it.

I need to make dynamic tabs, but I'm stuck and don't understand how to organise the structure correctly
I can make a collection and put an instance of tabs in it, but then I just get a lot of instances of the tab element on the page, and adding one Value to them doesn't unite them into one
You can try to place collections inside the tab element, but since the Tabs List element can only be in the root of tabs - you have to create two collections, one inside the Tabs List, the second for Tab Content.
But when I assign Tab Content - Value - the same as the trigger in Tabs List - Tab Content just disappears and I don't see it in the editor anymore.
I can't figure out where I'm doing it wrong.

Attachments

BBogdan

Now set default value in Tabs and try to click on triggerd in preview

aalex FR

Yes I have set Default value=0 in tabs

but when I set Value value for tabs content - the tab just disappears, in the preview when clicked they don't appear either.

Attachments

aalex FR

It seems to work when I set another value also for the trigger

but now a question, on startup no tab is active unless clicked in preview

how do I set it to active?

Attachment

aalex FR

And this is what I need to install instead Default value=0 in tabt.

Thanks a lot, I think I've got it!

Add a reply

Join the Webstudio community

Dynamic Data in Tabs