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

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. 

Hi,

I am new to Outsystems.

I did not understand the solution.

Kindly share a sample code for the same with working tab switch.

Thanks in Advance.

Another solution is to work with the element's attribute and simulate a click on the TabsHeaderItem. More for error cases where the changeTab action is not available.

Example: 

Solution:

The ParentElementID (input parameter) is from the Tabs (You need to name the element):

Script: document.querySelector('#' + $parameters.ParentElementID + ' button[data-tab="' + $parameters.ActiveTab + '"]').click();

NOTE

I tested OutSystemsUI SetActiveTab widget. But this widget just makes the TabsHeaderItem active. Does not change the Content of Tabs

@Pedro Antunes Here.:)

Hello Yini.

I could see in debugging that the problem is that you are passing an ID (Text) to the Data-Tab. This value must be an integer. You must pass a number (INT) of the TAB you want to activate 

I send the OML with the resolution and comments. Take a look. I also added some actions to test things out. 

Hope you can figure out the problem and solve it. 

Best regards.

Pedro Antunes

you can use $actions.SetActiveTab(WidgetId,TabsNumber); from outsystems in javascript and pass the main id and which tab you want to be active when you run the javascript.

Ex:
$actions.SetActiveTab($parameters.ParentElementID,2); 

Best regards,
Hugo Montenegro