Active tab panel

[dpankowski]

I have a tab panel that I only want to display certain panels. I have the js below for the onload event that reads a hidden element to determine which panels to display . No matter what I put in the active tab property, it always has panel 0 as the active panel. If I delete the js, it works fine, but shows all of the panels.

var tablist = get(tabListId);
var tabtoShow;
var tabPanelObj = getObj("TabPanel1");


// Hide all tabs
for (i = 0; i < 7; i++){
tabPanelObj.hideTab(i);
}

// Display tabs
for (i = 0; i < 7; i++){
tabtoShow = tablist.charAt(i);
if (tabtoShow != " "){
tabPanelObj.showTab(tabtoShow);

}
}

[Emily]

Hi Dan,

We're sorry to hear that you're having problems with this. It may be helpful for us to see the screen that you're working with so that we can help come up with a solution. If possible, could you post a screen dump (Ctrl-F9) of the screen you're experiencing this problem with? To do this, just visit the screen and press Ctrl-F9. This will download a file that you can attach to this post. If you don't want to attach the file here, you can email us at support@profoundlogic.com with the screen dump and we can assist you through email as well.

Please let us know if you have any other questions.

Thanks!

[dpankowski]

Thanks I'll email that screen dump.
It's a work in progress, so some of the screens are bank.

[Kaylee Law]

Hello Dan,

Thank you for sending us your files. I did a little troubleshooting and I found out that the active tab was being lost when you set all the tabs to hidden, regardless if they were made visible again later. I edited your onload even to no longer hide all tabs and then reveal the ones you want, to instead just hide the tabs you do not want to see:

Code: Select all

var tablist = getObj('tabListId').pui.properties['value'];
var tabtoShow;
var tabPanelObj = getObj("TabPanel1");

// Hide tabs
for (i = 0; i < 7; i++){
	tabtoShow = tablist.charAt(i);
	if (tabtoShow == " "){
		tabPanelObj.hideTab(i);		
	}
}

I slightly changed the code to retrieve the value of the tabListId textbox and will parse the value one character at a time. For each character starting from the first, the code will hide the corresponding panel if the character is a space, but will leave the tab visible if the character is anything else. Because get() will strip whitespace, I needed to use a slightly different method to retrieve the value of the textbox so that it contains the extra whitespace. I also had to change the bound variable 'TABSTO0001' to no longer trim trailing spaces.

Using this onload event, and using the bound value of the active tab property of your tab panel, I was able to control the visibility of tabs as well as the active tab when the page loads. You can of course use a different method to determine which tabs to hide, as long as you do not hide all of the tabs first, then the active tab should correctly be shown when the page loads.

Could you try changing your onload even and see if corrects your issues? If you have any other questions or concerns please let us know!

[dpankowski]

Thanks that worked!

I have another question, how do you prevent field sets showing up in all the Tabs or just in specific tabs with all of the elements contained in the field set.

thanks

[DanD]

Hi Dan,

I may be able to assist with this one, if I'm understanding the question correctly.

Are you stating that there are cases where field sets, or other elements appear on multiple tabs, even though the property of "parent tab panel" and "parent tab" are properly set?

If so, try adding a Simple Container Layout to the tab panel whose content is "bleeding through" to another tab. If a field set is one of the elements that is affected, set the z-index of it to be higher than that of the new Simple Container Layout.

Hope this helps.
-Dan

[Scott Klement]

The field set widget was not designed to work with the tab panel widget. As a result, you cannot drop a field set widget into a tab panel -- the Visual Designer won't allow it. To see what I mean by this, try dragging a different widget (such as an output field, etc) into a tab panel and you'll see a little green message at the bottom of the panel that says that the element was added to the tab panel. When you drag a field set over a tab panel, it will not say that. The field set is merely "drawn on top of" the tab panel, it is not actually inside it.

The workaround to this problem is to put a simple container layout into the tab panel, and then put the field set into the simple container.

The z-index is not related to this problem at all. Tab panels work by making elements "visible" or "hidden", they do not work by drawing things on top of or behind other elements, therefore the z-index does not affect whether something bleeds through a tab panel.

[DanD]

Scott,

I only mentioned the z-index because it has been my experience that when a field set is placed on top of a simple container in a tab panel, during run time, there are occasions where the field set outline & text just won't appear - but the fields within the field set do.

Adjusting the z-index alleviated this problem.

[Scott Klement]

Ah, okay. That makes sense if you're having trouble seeing the outline from the field set.

[matt.denninghoff]

Our original field set widget won't work with the tab panel widget. But the new field set layout widget does. The field set layout widget is available with the latest version of Profound UI, 5.14.0. (It's found in Visual Designer in the "Layouts" section of the widgets toolbox.)