Content Freeze
As of July 25th, 2023, there is a content freeze on this page.
Note: a newer, layout-based Tab Panel Layout is available. We recommend using the more powerful, less error-prone Tab Panel Layout over Tab Panels. Tab Panel Layouts can be styled using CSS rules.
To create a custom tab panel widget, a tab panel style must first be added to the pui.widgets.tabStyles
associative array. Each entry in pui.widgets.tabStyles
is an object with name/value pairs; the following are possible names:
Property Name | Possible Values | Description | Requirement(s) |
---|---|---|---|
useImages | true/false | Determines if images are provided and used in the drawing of a tab panel. | The following images are needed in the IFS Directory location /www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name :
|
hiImages | true/false | Determines if highlight images are provided and used when the cursor hovers over a tab. | The following images are needed in the IFS Directory location /www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name :
|
imageFileExtension |
| Specifies image file extension used for Tab Panel images. | Optional |
height | Any valid pixel value | Determines the tab height in pixels. | Digits Only |
defaultBackColor | Any valid color name or hex value | Sets the default background color of the active tab. |
|
hiColor | Any valid color name or hex value | Sets the highlight color of non-selected tabs when cursor hovers over. |
|
leftWidth | Any valid pixel value | Sets the width of the left side image. | Digits Only Should match width of provided image.
|
rightWidth | Any valid pixel value | Sets the width of the right side image. | Digits Only Should match width of provided image.
|
selColor | Any valid color name or hex value | Determines color of active tab. |
|
selBold | true/false | Determines if active tab header is also bold. | useImages needs to be set to true |
borderColor | Any valid color name or hex value | Sets the color of the Border. |
|
leftMargin | Any valid pixel value | Sets the width of the left side margin of the tabs in pixels. | Digits Only
|
hiUnderline | true/false | Determines if highlighted, inactive tab header is also underlined. | Optional |
separated | true/false | Determines if there is a separation gab between the tabs. | useImages needs to be set to true |
backBar | true/false | Determines if the area behind the tabs, the Back Bar, is visible or transparent. | Optional If set to true, it is required for either backBarColor to be set to a valid color value or an image named |
backBarColor | Any valid color name or hex value | Sets the color of the Back Bar. | backBar needs to be set to true |
borderSize |
| Sets the tab panel's border size in pixels. | Digits Only |
defaultTabColor |
| Sets the background color of inactive tabs. |
ProfoundUI Version 5, Fix Pack 13.0 and later. |
JavaScript Syntax for Adding a Tab Panel Style
pui.widgets.tabStyles["tab panel style name"] = { property1: value1, property2: value2, etc. }
The "tab panel style name" will then appear as an option in the Visual Designer under the "tab panel style" property.
After adding a new tab style, the next step is to add an entry into the Widgets Toolbox by using the pui.toolbox.add() API. For more details about this API, refer to the Widgets Development API section of the documentation. You should create a tab panel proxy image and a tab panel icon image before using the API. The "defaults" configuration option should assign the "tab panel style" property to the new tab panel style name.
All JavaScript code should be saved into an external file that is placed in the /www/profoundui/htdocs/profoundui/userdata/custom/widgets IFS directory.
Example: JavaScript Code to Create a Custom Tab Panel
// Add a new tab panel style pui.widgets.tabStyles["Custom Tab Panel"] = { useImages: false, height: 15, defaultBackColor: "#FAE5AF", hiColor: "#666699" } // Now, add an entry to the Widgets Toolbox pui.toolbox.add({ category: "Custom Widgets", widget: "tab panel", text: "Custom Tab Panel", icon: "/profoundui/proddata/images/tabs/Custom/icon.png", proxyHeight: 202, proxyWidth: 302, proxyHTML: '<img src="/profoundui/proddata/images/tabs/Custom/proxy.png" style="height: 202px; width: 302px;">', defaults: { "tab panel style": "Custom Tab Panel" } });