How do I use tabs?

If you have one tabs and several items on each tab, you can use master page. Place the tabs in master page, and create several pages (which use the master page) for the items (one page one item). When clicking the tab, just do the page switching.

But if you have several tabs, seems you have to “put each item into a conditional branch on the tab switch and toggle all the visible states of the elements”. In this case, I will recommand to pack each tabs (and its items) into a group, that will make the page cleaner).

Hello, I am having some problems with this. I’m trying to run a simulation as well where the page has two tabs, and each tab has different elements to show. The conditional branching doesn’t seem to work for me because I’m not exactly sure what expression to write. I tried using “[Tab_Name.selectedindex]”, but didn’t have much luck.

Also, if I want different elements to show up on each tab, how do I place them exactly? So for example, if I want a text label on one tab to be replaced by another text label on the next tab, do I just place them on top of each other in editor? Not sure I understand how this works…

I basically need to build something similar to this:

http://www.foreui.com/demos/demo5/

Can you help please?

Hi Shishir,

Your understanding is correct. You can place them on top of each other and show / hide them according to the “[Tab_Name.selectedindex]”.

If you have two tabs only, you can use the conditional branching:

If you have more tabs, you can use the switch branching:

If the content to show / hide is complex, it is better to place the tabs element in master page, and create several pages (all use the master page) for the content for each tab. When clicking the tab, you just swich to the correct page. JustinM shared a good example yesterday: http://www.foreui.net/node/38

Thank you Xavier, the Antivirus example link was really what I needed to understand tab usage.

Xavier,

I’ve been looking into tab usage today and i’ve downloaded the antivirus example to find out more. I understand both methods of using tabs, i.e. defining behaviour on controls to show/hide them based on selected tab, and master/pages.

I can’t help but find both methods extremely clunky to use. Why don’t tabs have individual content automatically? Why doesn’t selecting a different tab at design time automatically create a unique canvass for that tab? I can’t at this time imagine a scenario in which you wouldn’t want individual content on each tab, so having to define all that behaviour manually for every tab control is very time consuming.

Could this be another V3 enhancement maybe?

Fraser.

Hi Fraser, this thread is pretty old. Actually the situation has been changed a lot now. The Tabs element can work as container today and you can just RIGHT drag or Ctrl+drag other elements into its tab. The content for each tab will be show/hide automatically.

The container concept is described here: http://www.foreui.com/doc/html/contai…

Thanks Xavier,

I saw that article earlier but was having some trouble.

What i’d done was add a window element to my plot, then placed a tab element inside that. If I then right-clicked and dragged an element, say a group box, over the tab control it was the container area of the window element that was being shown to me (highlighted in blue), not the container area of the tab control. This is despite the tab control being layered on top.

Am I doing something wrong?