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


Hi Steven,

I am facing the same problem as Philipp is, and tried your 'TabSwitcher' solution.
Unfortunately it does not work for me.
I enclosed my TabControl in the TabSwitcher, and added an 'ActiveTab' variable to set the current tab. When changing the ActiveTab value nothing happens however. Initializjng the 'ActiveTab' to 2 for instance neither has success.

Is there something I might have missed?

Regards,
Rob.

Hi Rob,


Can you upload an .oml file where you have this problem?  Without seeing your code it's hard to know why it doesn't work.


Regards,

Steven

Steven Decock wrote:

Hi Rob,


Can you upload an .oml file where you have this problem?  Without seeing your code it's hard to know why it doesn't work.


Regards,

Steven


Hi Steven,

Sorry for my late reaction, but I managed to get it working:I create an event handler for the 'OnTabChange' event and assigned the 'ActiveTab' variable there. Then it worked for me.

Regards,
Rob

You don't need an extra web block for that. Simply use javascript document.getElementById("$b2").changeTab($parameters.newIndex). The $b2 is my id of the Navigation.Tab datablock. You can simply find when inspecting an element in chrome. The id does not change if you don't change the navigation tab.