Version: 8.2

ButtonTogglePanel component

Level: beginner

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.

Example of a configuration object that sets up the functionality of the Toggle panel layout element
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*/,

Properties

name

Code of a Toggle panel layout element. Starts with the ButtonToggleGroup prefix.

for

Code of a Tab layout element for which a Toggle panel layout element is a parent element. Starts with the TabPanel prefix.

type

Type of a Freedom UI element. For Toggle panel layout element, crt.ButtonToggleGroup.

direction

Specifies the orientation and direction of the Toggle panel tabs’s main axis to which nested tabs align. By default, row.

Available values

row	The nested tabs align horizontally.
column	The nested tabs align vertically.

gap

Defines the column and row spacing between nested tabs.

Available values

none
small
medium
large

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 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

color

Notification mark color. By default, primary.

Available values

primary
accent
warn

offset

Diagonal padding from the corner for all nested tabs.

toggleViewMode

Configures the view mode for headings of nested tabs. By default, button. Available in Creatio 8.2.3 and later.

Parameters

button	Headings of nested tabs are displayed as buttons.
dropdown	Headings of nested tabs are displayed in the dropdown list.

size

Sets size of nested tabs. By default, default. Regardless of text length in nested tabs, their size is the same.

Available values

none
default
extra-small
small
medium
large
extra-large

iconSize

Sets size of nested tabs. By default, large. Requires the icon property.

Available values

none
default
extra-small
small
medium
large
extra-large

shape

Sets shape of nested tabs. By default, default.

Available values

default
rounded

contentAlign

Sets text align of nested tabs. By default, start.

Available values

start
center
end

layoutConfig

Configures width of tab area.

Parameters

minWidth	Minimum width of tab area.
maxWidth	Maximum width of tab area.

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 nested tab.

isToggleTabHeaderVisible

Flag that specifies whether to hide headings of nested tabs. By default, true.

Available values

true	Headings are shown.
false	Headings are hidden.

allowUntoggle

Flag that specifies 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.

allowToggleClose

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 button is displayed.
false	The button is hidden.

padding

Defines 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 in Creatio 8.2.3 and later.

Available values

none	Zero padding.
small	Small padding.
medium	Medium padding.
large	Large padding.

Properties​

Properties