ButtonTogglePanel component
ButtonTogglePanel is a component that lets you set up a Toggle panel layout element on an app page.
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
}
},
"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": false
},
"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"
},
"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*/,
Properties
name: String
Code of a Toggle panel layout element. Starts with the ButtonToggleGroup prefix.
for: String
Code of a Tab layout element for which a Toggle panel layout element is a parent element. Starts with the TabPanel prefix.
type: String
Type of a Freedom UI element. For Toggle panel layout element, crt.ButtonToggleGroup.
direction: BaseDirectionOptions
Specifies the orientation and direction of the Toggle panel tabs’s main axis to which child tabs align. By default, row.
gap: SizeEnum or number
Defines the column and row spacing between child tabs.
badgeConfig: BadgeConfig
Configures the notification mark properties. Available in Creatio 8.2.1 and later.
Creatio displays the notification mark on the top right corner of the child tab and lets you permanently display the notification mark or display the notification mark based on the attribute value. Instructions: Customize toggle panels.
Parameters
size: SizeEnum
Sets size of child tabs. By default, default. Regardless of text length in child tabs, their size is the same.
iconSize: SizeEnum
Sets size of child tabs. By default, large. Requires the icon property.
shape: BaseComponentShape
Sets shape of child tabs. By default, default.
contentAlign: ButtonContentAlign
Sets text align of child tabs. By default, start.
layoutConfig: LayoutConfig
Configures width of tab area.
Parameters
minWidth | Minimum width of tab area. |
maxWidth | Maximum width of tab area. |
selectedTab: SelectedTab
Configures 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 child tab. |
isToggleTabHeaderVisible: Boolean
Flag that specifies whether to hide headings of child tabs. By default, false.
Available values
true | Headings are hidden. |
false | Headings are shown. |
allowUntoggle: Boolean
Flag that specifies whether to close toggle panel clicking on child tab. By default, true. To forbid closing the toggle panel, set allowToggleClose property to false.
Available values
true | Clicking on child tab closes the toggle panel. |
false | Clicking on child tab leaves the toggle panel open. |
allowToggleClose: Boolean
Flag that specifies 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 |