Hello Akshay Deshpande,

By default, you just need to care about the order the items. Meaning that the order of the HeaderItems will have to match to the order of the ContentItems.

You don't need to care about anything else. If you test it, you'll see that the content will switch. 

Imagine that the content inside some TAB is too long. If you want (for any reason) to switch tabs with a button inside a specific content (but at the bottom of the page) you can try this approach:

1. Give a name to the Element in the Title of the specific Header. Like this:

Add the logic that you want. And add the following javascript to the action that will do the switch:

Cheers, 

Rúben

Hi Akshay,

You can also make it working just with some conditions and changing CSS in Extended Class property of TabsHeaderItem and TabsContentItem

I have added a working OML here for your reference

You can also checkout the link of the demo pasted below:

https://shweta-gedam.outsystemscloud.com/TabsNavigationOnButton/TabsNavigations?_ts=637456173065250665

Let me know if it works for you, Thanks :)

Hi Akshay,

The OutSystemsUI module already does have a pre-defined client action available called TabsGoTo, for the mentioned use-case. Refer to the TabsGoTo client action from the OutSystemsUI module as shown below 

See this sample app | TabWidgetDemo

Refer to the attached .oml file

Hope this helps you!

Kind regards,

Benjith Sam