setting title bold on a tab in a tab container

[rdeardorff@spi-ind.com]

Using the AI generated script to turn the title bold when I click into the tab

if (getAppVar("setActiveTab") === "2") {
// Get the Tabpanel container for the SOEditScreen widget
var tabPanelContainer = getWidget("SOEditScreen");
var tabPanel = tabPanelContainer.down("#uicomponent");

// Assuming the tab index is zero-based and we want the second tab (index 1)
var tab = tabPanel.getComponent(1);

// Remove any existing <b> tags from the title to avoid nested bold tags
var originalTitle = tab.title.replace(/<\/?b>/g, "");

// Set the title to bold HTML
tab.setTitle("<b>" + originalTitle + "</b>");
}
success();

it doesn't seem to work.

I use buttons to navigate from tab to tab. In this case navigating from tab 1 to tab 2 did not set the title to bold.

image.png
thoughts/suggestions?

[sean.lanktree]

This would be accomplished much easier via some custom CSS.

.widget-util-tcontainer .x-tab-active .x-tab-inner{
  font-weight:600;
}

[Johnny Major]

Are you trying to bold the title when the tab is active, so only one tab has a bolded title at a time?

[rdeardorff@spi-ind.com]

correct, I just want that one tab to stand out when it becomes active. Particularly when it is adjacent to those tabs that are disabled because they have no data in them

[Johnny Major]

Sean's suggestion is the quickest way to accomplish this. If you're not using a custom style sheet for all your applications, or if you just want this application to have bolded tab titles when active, then you could do this in a scrip.

const createStyleSheet = function(cssText, id) {
    // Create a style element
    const styleElement = document.createElement('style');
    
    // Set the ID if provided
    if (id) {
        styleElement.id = id;
    }
    
    // Set the CSS text content
    styleElement.textContent = cssText;
    
    // Append the style element to the head
    document.head.appendChild(styleElement);
}


createStyleSheet(
    '.widget-util-tcontainer .x-tab-active .x-tab-inner { font-weight: 600; }',
    'custom-style'
);
success();

You could also accomplish this using link widget properties on the tab container. Use an app variable to track the current active tab (which is 1-based) and app variables for all the tab titles. Then, create an expression for each app variable linked to a tab's title. The expression would check if the active tab is itself; if so, it returns bolded text; otherwise, it returns just the text.

Example app variable expression for the first tab's title:

const baseTitle = 'Orders';
if (appVar.currentActiveTab === 1) {
    return `<b>${baseTitle}</b>`;
}
return baseTitle;

[rdeardorff@spi-ind.com]

thank you, that last option is what I am looking for...perfect!