Hi Toan,

In Mendix, you can retrieve the active tab index from a TabContainer using a Nanoflow and a JavaScript action. First, assign a custom CSS class (e.g., my-tab-container) to the TabContainer widget under the Styling in the properties section. Next, create a JavaScript Action named GetActiveTabIndex with an Integer return type, and use JavaScript to find the active tab. The script should query the TabContainer using document.querySelector and check for the active tab using classList.contains("active"). If no active tab is found, return -1. After creating the JavaScript action, set up a Nanoflow (e.g., RetrieveActiveTabIndex) to call the JavaScript function and store the result in a variable or page parameter. Finally, trigger the Nanoflow when needed, such as on button click, On Change event, or using a Microflow Timer widget. This approach allows dynamic retrieval of the active tab index, which can be used for various application logic.

Dummy code:

export async function GetActiveTabIndex() {
    const tabContainer = document.querySelector(".my-tab-container .mx-tabcontainer-tabs");
    if (tabContainer) {
        const tabs = Array.from(tabContainer.children);
        return tabs.findIndex(tab => tab.classList.contains("active"));
    }
    return -1; // Return -1 if no active tab is found
}

Hope it helps!