Toggle panel layout element
Toggle panel is a layout element to add a tab area to the page. Learn more: Toggle panel (user documentation).
View an example of a configuration object that sets up the functionality of the Toggle panel layout element below.
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"operation": "insert",
"name": "ButtonToggleGroup_3cvlvfm",
"values": {
"for": "TabPanel_orubldb",
"fitContent": true,
"type": "crt.ButtonToggleGroup",
"direction": "row",
"gap": "medium",
"size": "default",
"shape": "rounded",
"contentAlign": "center",
"allowUntoggle": false,
"selectedTab": {
"value": "TabContainer_5m9y2th"
},
"badgeConfig": {
"color": "primary",
"offset": -4
},
"toggleViewMode": "dropdown"
},
"parentName": "MainHeaderBottom",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "TabPanel_orubldb",
"values": {
"type": "crt.TabPanel",
"items": [],
"mode": "toggle",
"fitContent": true,
"styleType": "default",
"bodyBackgroundColor": "primary-contrast-500",
"layoutConfig": {
"minWidth": 368,
"maxWidth": 368
},
"selectedTabTitleColor": "auto",
"tabTitleColor": "auto",
"underlineSelectedTabColor": "auto",
"headerBackgroundColor": "auto",
"allowToggleClose": false,
"isToggleTabHeaderVisible": true,
},
"parentName": "CenterContainer",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "TabContainer_3ak7zwp",
"values": {
"type": "crt.TabContainer",
"tools": [],
"items": [],
"caption": "#ResourceString(TabContainer_3ak7zwp_caption)#",
"badge": {
"visible": true
},
"icon": "add-button-icon",
"iconSize": "large",
"padding": {
"left": "medium",
"right": "medium"
}
},
"parentName": "TabPanel_orubldb",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "FlexContainer_jz4z20b",
"values": {
"type": "crt.FlexContainer",
"direction": "row",
"alignItems": "center",
"items": []
},
"parentName": "TabContainer_3ak7zwp",
"propertyName": "tools",
"index": 0
},
{
"operation": "insert",
"name": "Label_n7fabhc",
"values": {
"type": "crt.Label",
"caption": "#ResourceString(Label_n7fabhc_caption)#",
"labelType": "headline-3",
"labelThickness": "default",
"labelEllipsis": false,
"labelColor": "#0D2E4E",
"labelBackgroundColor": "transparent",
"labelTextAlign": "start"
},
"parentName": "FlexContainer_jz4z20b",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "FlexContainer_luvg40x",
"values": {
"type": "crt.FlexContainer",
"items": [],
"direction": "column"
},
"parentName": "TabContainer_3ak7zwp",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "TabContainer_5m9y2th",
"values": {
"type": "crt.TabContainer",
"tools": [],
"items": [],
"caption": "#ResourceString(TabContainer_5m9y2th_caption)#"
},
"parentName": "TabPanel_orubldb",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "FlexContainer_oyfk06q",
"values": {
"type": "crt.FlexContainer",
"direction": "row",
"alignItems": "center",
"items": []
},
"parentName": "TabContainer_5m9y2th",
"propertyName": "tools",
"index": 0
},
{
"operation": "insert",
"name": "Label_lvjy5dp",
"values": {
"type": "crt.Label",
"caption": "#ResourceString(Label_lvjy5dp_caption)#",
"labelType": "headline-3",
"labelThickness": "default",
"labelEllipsis": false,
"labelColor": "#0D2E4E",
"labelBackgroundColor": "transparent",
"labelTextAlign": "start"
},
"parentName": "FlexContainer_oyfk06q",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "FlexContainer_rfyg035",
"values": {
"type": "crt.FlexContainer",
"items": [],
"direction": "column"
},
"parentName": "TabContainer_5m9y2th",
"propertyName": "items",
"index": 0
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
string name
Code of a Toggle panel layout element. Starts with the "ButtonToggleGroup" prefix.
string for
Code of a Tab layout element for which a Toggle panel layout element is a parent element. Starts with the "TabPanel" prefix.
string type
Type of a Freedom UI element. For Toggle panel layout element, "crt.ButtonToggleGroup."
string direction
Specifies the orientation and direction of the Toggle panel tabs’s main axis to which nested tabs align. By default, "row."
string gap
Define the column and row spacing between nested tabs.
BadgeConfig badgeConfig
Configure the notification mark properties.
Creatio displays the notification mark on the top right corner of the nested tab and lets you permanently display the notification mark or display the notification mark based on the attribute value. Instructions: Customize toggle panels.
Parameters
string toggleViewMode
Configure the view mode for headings of nested tabs. By default, "button."
Parameters
string size
Set size of nested tabs. By default, "default." Regardless of text length in nested tabs, their size is the same.
string iconSize
Set size of nested tabs. By default, "large." Requires the icon property.
string shape
Set shape of nested tabs. By default, "default."
string contentAlign
Set text align of nested tabs. By default, "start."
LayoutConfig layoutConfig
Configure width of tab area.
Parameters
number minWidth | Minimum width of tab area. |
number maxWidth | Maximum width of tab area. |
object selectedTab
Configure the out-of-the-box tab that opens on the page when the first section record is created. If you switch to a different tab in the toggle panel, Creatio saves it in the user profile and opens the previously open tab on the record page.
Parameters
value | The code of a nested tab. |
boolean isToggleTabHeaderVisible
Whether to hide headings of nested tabs. By default, "true."
Available values
true | Headings are shown. |
false | Headings are hidden. |
boolean allowUntoggle
Whether to close toggle panel clicking on nested tab. By default, "true." To forbid closing the toggle panel, set allowToggleClose property to "false."
Available values
true | Clicking on nested tab closes the toggle panel. |
false | Clicking on nested tab leaves the toggle panel open. |
boolean allowToggleClose
Whether to display or hide 
button that closes toggle panel. By default, "true." To forbid closing the toggle panel, set allowUntoggle property to "false."
Available values
true | The |
false | The |
object padding
Define the container padding settings. This setting can apply a single value to all sides or provide a specific value for each side. The property can accept numbers, strings, and the available values listed below.
Available values
none | Zero padding. |
small | Small padding. |
medium | Medium padding. |
large | Large padding. |
See also
Overview of Freedom UI Designer and its elements (user documentation)