Element Details: Tabs
 Back


Available in: Logi Info Source code name: Tabs

Tabs displays information in a series of tabbed panels.

The contents of all tabs are rendered, but only the "top" selected tab content is visible. Clicking on another tab shows the contents of that selected tab.

When a page with tabs is submitted (posted, like with Action.Report), the ID of the currrently selected Tab is sent as a request form variable with the name being the ID of the Tabs element. (like @Request.myTabs~ = myTab1).

The Tabs element has a DefaultTab attribute. When used, it should be the ID of a Tab. Or it can be a request token, like @Request.myTabs~.

There can be multiple Tabs elements on the same page, but they all will have the same tab and border colors.



ATTRIBUTES

Click attribute Name to drill down for more information.

NamePossible ValuesDescription
ActiveTabBackgroundColor
UserDefined
The background color of the tab currently selected.
BorderColor
UserDefined
Sets the color of border lines. Enter a color by name, decimal RGB value, or hex RGB value. Prefix hex values with the pound sign, like #112233.
DefaultTab
UserDefined
The ID of the TabPanel that is selected when the report is initially displayed. When a page with tabs is submitted (posted, like with Action.Report), the ID of the currrently selected Tab is sent as a request form variable with the name being the ID of the Tabs element. (like @Request.myTabs~ = myTab1). So you can keep the current tab when refreshing a report by setting DefaultTab to something like "@Request.myTabs~".
Height
UserDefined
The height of the element. For some elements, leave the height blank to automatically size the element to the height of the content.
HeightScale
px
%
The width scale of the element. Value can be "px" for pixels, or "%" for percentage of the available height. Leave this value blank to have the frame automatically adjust to the size of its contents.
ID
UserDefined
(Required) The ID attribute is a pervasive attribute that uniquely identifies an element within a definition file. The ID needs to be a unique value within the definition.
InactiveTabBackgroundColor
UserDefined
The background color of the tabs not currently selected.
SecurityRightID
UserDefined
When entered, access to this element can be controlled with Logi security. Supply the ID of a right defined in the applications settings’ Security element. Only users that have a right in the SecurityRightID will be able to see the element. Note that when rights come from RightFromRole elements under Security/UserRights, and this element's SecurityRightID does NOT match any of the Right IDs defined in the Settings definition, then the user DOES have access. But when Right IDs are instead derived from RightsFromDataLayer or RightsFromRoles elements, and the user DOES NOT have a matching Right, then the user DOES NOT have access. You can enter multiple right IDs, separated by commas. In this case, the user sees the element if he has any one of the Rights.
TabbingStyle
Static
RefreshPage
Ajax
TabbingStyle provides some control over how hidden tabs are shown when they are clicked. When "Static", all tabs are rendered. When the user clicks a hidden tab, the tab's contents are already at the browser and the selected tab is displayed. When "Ajax", tabs that are initially hidden are not built and processed by the server until the user clicks on them. When the user clicks a hidden tab, an AJAX request is sent to the server to get the tab's contents. This can help reduce the time to render a Tabs element when there are many TabPanels, especially if those tabs contain DataLayers. Once a TabPanel has been rendered, if it is then hidden by the user then re-selected, the panel is simply redisplayed without again going back to the server. When "RefreshPage", tabs that are initially hidden are not built and processed by the server until the user clicks on them. When the user clicks a hidden tab, the page is re-submitted, this time showing the hidden tab with refreshed contents. This can help reduce the time to render a Tabs element when there are many TabPanels, especially if those tabs contain DataLayers. The default is "Static".
TabLocation
top
right
left
bottom
The location of the tabs that user can click to switch between tab panels. The default is "top".
Width
UserDefined
The width of the element.
WidthScale
px
%
The width scale of the element. Value can be "px" for pixels, or "%" for percentage of the available width.



PARENT ELEMENTS

Click element to drill down for more information.

Body
Column Cell
Division
Fieldset Box
HTML Tag
Panel Content
Popup Panel
Rectangle
Report Footer
Report Header
Responsive Column


CHILD ELEMENTS

Click element to drill down for more information.

Tab Panel


 Back to top


 Chart Debug