207
Views
8
Comments
Solved
[OutSystems UI] Unable to switch tabs.
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hi,

Switched from deprecated navigation tabs to new tabs.

I was using Javascript to switch tabs with the following reference.

https://www.outsystems.com/forums/discussion/60384/set-the-active-tab-in-tabs-pattern-for-reactive-web-apps/

However, it does not work in the new tabs with an error.

Is there a solution?

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Yusuke Suzuki

You're using a custom JavaScript node instead of the client action built for that purpose - SetActiveTab. With this, it works as expected.

Cheers,
GM

TabsSample_OK.oml
UserImage.jpg
Yusuke Suzuki

Hi, Gonçalo 

I tried to run the module you gave me. However, the header is working, but the content is not.

Is there a solution?

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Yusuke Suzuki 

You need to be using the latest version (2.11.0 ) since it contains the fix for that (release note with code ROU-3650).
I'm using this version and it works like a charm.

2025-09-25 14-38-22
Lokesh Kumar Yadav

Hi Yusuke,

I suggest you another approach for switch tabs you have to use wizard widget .This widget is used for navigation tabs

Try this

if you want to go with javascript  please mention the error which type of error you facing

UserImage.jpg
Yusuke Suzuki

Hi, Lokesh 

I would like to use Javascript.

The error is "document.getElementById(...).changeTab is not a function "

Thank You 

2025-09-25 14-38-22
Lokesh Kumar Yadav

Hi Yusuke,

Please provide me oml 


UserImage.jpg
Yusuke Suzuki

Hi, Lokesh 

Since the original application cannot be uploaded, we will send you a module that reproduces the phenomenon.

TabsSample.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Yusuke Suzuki

You're using a custom JavaScript node instead of the client action built for that purpose - SetActiveTab. With this, it works as expected.

Cheers,
GM

TabsSample_OK.oml
UserImage.jpg
Yusuke Suzuki

Hi, Gonçalo 

I tried to run the module you gave me. However, the header is working, but the content is not.

Is there a solution?

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Yusuke Suzuki 

You need to be using the latest version (2.11.0 ) since it contains the fix for that (release note with code ROU-3650).
I'm using this version and it works like a charm.

2023-10-21 19-42-11
Tousif Khan
Champion

Hello 
Since Tabs Are Updated here is the new documentation you can refer 

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Mobile_and_Reactive_Patterns/Navigation/Tabs

Step by step approach is available

I hope this will help

Best Regards

Tousif Khan

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.