Tab Layout

The tab layout widget is a container for other widgets. Like a tab panel, the tab layout is used to organize widgets on the screen. When the user changes tabs, one tab container becomes visible, and the other tab containers are hidden, making widgets inside the other tabs hidden. Tab panels help to simplify overly cluttered pages by dividing the content into easily understandable chunks, improving the overall user experience for your users.

The tab layout behaves like the tab panel widget except for a few differences.

Feature	Tab Panel	Tab Layout

Feature	Tab Panel	Tab Layout
Allow nested tab widgets	No	Yes
Widgets inside can use percent dimensions	No	Yes
Allow lazy-loading widgets¹	No	Yes
Tab Styles	Yes, as a property	Yes, via CSS
Charts load data only when tab is selected	Yes	No, unless "lazy load" is true

¹Lazy loading is available for tab layouts in Profound UI Version 6 Fix Pack 1.0. ²Charts in tab panels do not load until the tab becomes inactive, but other widgets load when the page loads.

Tab Layouts are available with Profound UI Version 6 FIx Pack 0.2.

Properties

lazy load

Lazy load lets the tab panel render and load widgets only after the user clicks on the tab containing them.

By default this property is false. When false, widgets inside tab layouts render and load at the same time the parent tab panel is rendered, even if the widgets are in inactive tabs. For large, complicated screens, rendering all at once can create a delay in displaying the screen.

When true, only widgets in the active tab are rendered when the tab layout is rendered.The other widgets have not been rendered, and they do not exist on the page until the user clicks the tab containing them.

If a user modifies data in a widget, switches to another tab, then submits the screen, the inactive tab's widget's data will be submitted to the back-end program. However, if the user never clicks a certain tab, then widgets in that tab will not send data to the back-end program.

Caution: when the widgets do not exist on screen, the widgets will not be found with getObj() or document.getElementById(), and they are not used to submit data to the server. Consequently, "onload" code should be written to expect when widgets are not yet available. Furthermore, if your screen requires data from widgets in inactive tabs to be sent to the back-end even if the user doesn't change them, then "lazy load" should not be used.

This property is available for the tab layout with Profound UI Version 6 Fix Pack 1.0.

onlazyload

See onlazyload

css class

The tabs and tab layout style must be set using CSS. By default, if "css class" is not set, the tab layout uses the "Simple" styling. To change the tab layout to use the "Glass" styling, set "css class" to "Glass".

Unlike tab panels, there is no "tab panel style" property for tab layouts. Tab layout styles must be implemented entirely via CSS. Currently the "Glass" and "Simple" styles are predefined in the profoundui.css stylesheet.

ontabclick

See ontabclick event (Tab Panel) for more. Widgets in the new tab are not made visible until after the ontabclick code runs.

Internet Explorer 8

The tab layout does not render correctly for users in Internet Explorer 8 out of the box, because it uses newer CSS features; e.g. "calc(100% - 24px)". IE8 does not support that CSS feature. Also, as of Version 6 Fix Pack 1.0, Profound UI no longer supports IE8 and IE9.

If you want to use the tab layout and must still support IE8, then you can workaround the problem by adding a rule to a custom style sheet:

.pui-tablayout-body { height: 100%; }

The custom style sheet should go into the /www/yourInstanceName/htdocs/profoundui/userdata/custom/css/ IFS directory. Replace "yourInstanceName" with your instance name, which is usually "profoundui".