Golden-layout: Switching active tabs programatically

[Sedawa]

Hi folks, I'm struggling a bit to figure out just how to use some of the functionality in GL.

I want to be able to switch between tabs in a stack programatically - I understand that for this I'd want to use setActiveContentItem( contentItem ) as shown here.

My problem is that I can't find any examples around for how to actually implement that. I've tried swapping out contentItem with the desired tab's componentName to no avail.

I'm currently trying to reverse engineer the code referenced here but am not having much luck.

How is this used? And is it possible for the documentation on this or other functions to be expanded a bit?

Cheers!

[ButchMonkey]

You need to call it on the stack using the lm.items.Component as the tab you want to set.

You could use a function such as getItemsById to get the item if you need

[Sedawa]

Thanks for the reply ButchMonkey!

I pinged a friend (@Methrend) for some help and we got the tab switching working. For anyone else who stumbles across this thread hunting for code examples (like I was), here's what we've got:

The tabs we want to switch between have id: 'testTabA' and id: 'testTabB',.

The function to switch them is as follows:

// Grab the stack component so we can check current active
    var tempStack = myLayout.root.getItemsById('testStack')[0];
    var tempTab = null; // to be used later
    var curTab = null; // as above

// Check what the current tab is
    curTab = tempStack.getActiveContentItem();
    if (curTab.config.id == 'testTabA') {
        // we want to switch to TabB
        tempTab = myLayout.root.getItemsById('testTabB')[0];
    } else {
        // we want TabA
        tempTab = myLayout.root.getItemsById('testTabA')[0];
    }
// Do the actual swap bit
    tempStack.setActiveContentItem(tempTab);

[malled]

You do not need to get the stack beforehand.
Use tab.header.parent to get the stack:

var contentItem = this.layout.root.getItemsById(identifier)[0];
contentItem.tab.header.parent.setActiveContentItem(contentItem);

[SoroTrestal]

Sadly this does not work, in my stack the tabs get highlighted but it never shows the actual content of the tab.

On the creation of the tab I perform a search for the stacks with content children:

var lst = me.state.gLayout._getAllContentItems().filter(x => x.isStack && x.contentItems.length > 1)

for testing I search for a hardcoded tab:

var map = lst[0].getItemsById('map_panel')
lst[0].header.setActiveContentItem(map)

I receive no errors, the tabs gets highlighted though.

What might I be missing?

Thanks and regards

[burakaksoy]

for (var i = 0; i < myLayout._getAllContentItems().length; i++) {
    // console.log(myLayout._getAllContentItems()[i].componentName);
    if (myLayout._getAllContentItems()[i].componentName == component_name) {
        var contentItem = myLayout._getAllContentItems()[i];
        // contentItem.tab.header.parent.setActiveContentItem(contentItem);
        contentItem.parent.setActiveContentItem(contentItem);
        // contentItem.parent.header.parent.setActiveContentItem(contentItem);

    }
}

If you want to make the tab active based on the component name this code above worked for me.