Set the active tab in tabs pattern for reactive web apps

Hi,

I am using the tab pattern in a reactive web app. In traditional web I could set the active tab with a variable. How can I do such a thing in reactive? 

In particular our customer has the option of shortcuts that are bound to buttons. With this shortcuts some data will be updated and we want to switch to the tab where more details for that update are shown. e.g. a new entry in a list.

Hi Philipp,

you have option in Rective web nevigation/Tab in outsystem UI

Here is a option starting tab you can assign integer variable in this.


Hope this will help you

Regards

Rahul Sahu

Hi Philipp,

We had the same problem.  StartingTab is probably not going to help you.  It only works to set the initial tab, you cannot use it to switch the tab afterwards.

You can switch the tab using javascript though.

We created a TabSwitcher component on our project to make this easier (see attachment).  It uses the javascript function.  Check the code if you want to know how it works.

You can put your Tabs component in the 'TabsPlaceholder' placeholder of the TabsSwitcher component.

The TabSwitcher takes the ActiveTab as an argument.  You can then change the ActiveTab input parameter for the TabSwitcher to switch tabs.

That should solve your problem.

We've also created a support case to solve this in the Tabs component itself by the way.  Seems to me like StartingTab should be renamed to ActiveTab and should have this ability built in.



Best regards,

Steven