Tab Layout
- Matt Denninghoff
- Jessica Tomkins
- Megan Bond
- Emily Seage
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 |
|---|---|---|
Allow nested tab widgets | No | Yes |
Widgets inside can use percent dimensions | No | Yes |
Allow lazy-loading widgets1 | 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 |
1Lazy loading is available for tab layouts in Profound UI Version 6 Fix Pack 1.0. 2Charts 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".