Badge not showing on Toggle Panel tab (ButtonToggleGroup) — Freedom UI 8.x
I'm trying to display a notification badge dot on a specific tab inside a crt.ButtonToggleGroup toggle panel. Despite following the Academy docs and trying multiple configurations, the badge never appears on the tab button.
I also tried "badge": { "value": "1" } first (which is wrong per docs), then switched to "badge": { "visible": true } as documented, but neither shows any badge. The tab itself renders correctly with the icon, caption, and visibility working fine — only the badge dot is missing.
What I've already ruled out
Correct parent — NextStepsTabContainer is a direct child of CardToggleTabPanel, not the regular tabs panel.
Active tab is not selected — tested by opening a different tab first so NextStepsTabContainer is not active.
for reference is correct — CardButtonToggleGroup correctly references CardToggleTabPanel.
Package compiled and page hard-refreshed — full recompile done, not just save.
Questions
- Does
"badge": { "visible": true }actually work on a tab that uses"iconPosition": "only-icon"? Could icon-only mode be suppressing the badge? - Is there a known issue with
"operation": "merge"not applying thebadgeobject to an existingTabContainer? Does it require"operation": "insert"? - Has anyone successfully implemented
badgeConfigon an OOB (out-of-box) toggle panel by customising the existing schema? A working example would be hugely helpful.
Platform version: Creatio 8.x (Freedom UI) · Docs referenced: Toggle panel customization, ButtonTogglePanel reference
What I've tried:
My current viewConfigDiff setup:
{
"operation": "merge",
"name": "CardButtonToggleGroup",
"values": {
"type": "crt.ButtonToggleGroup",
"for": "CardToggleTabPanel",
"badgeConfig": {
"color": "accent",
"offset": -4
}
}
},
{
"operation": "merge",
"name": "CardToggleTabPanel",
"values": {
"type": "crt.TabPanel",
"mode": "toggle",
"styleType": "default",
"bodyBackgroundColor": "primary-contrast-500",
"selectedTabTitleColor": "auto",
"tabTitleColor": "auto",
"underlineSelectedTabColor": "auto",
"headerBackgroundColor": "auto",
"allowToggleClose": false,
"isToggleTabHeaderVisible": true
}
},
{
"operation": "merge",
"name": "NextStepsTabContainer",
"values": {
"type": "crt.TabContainer",
"caption": "#ResourceString(NextStepsTabContainer_caption)#",
"badge": {
"visible": true
},
"icon": "task-tab-icon",
"iconSize": "large",
"visible": true
}
}
Like