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 parentNextStepsTabContainer 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 correctCardButtonToggleGroup correctly references CardToggleTabPanel.

Package compiled and page hard-refreshed — full recompile done, not just save.

Questions

  1. Does "badge": { "visible": true } actually work on a tab that uses "iconPosition": "only-icon"? Could icon-only mode be suppressing the badge?
  2. Is there a known issue with "operation": "merge" not applying the badge object to an existing TabContainer? Does it require "operation": "insert"?
  3. Has anyone successfully implemented badgeConfig on 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 1

Like

0 comments
Show all comments