12
Views
8
Comments
Solved
How to Navigate tab using  button Click

I m Using Navigation/Tab in the Reactive Module, I Want to change the active tab using the Button. For example,

as Shown in the Fig , if by default my active tab is Tab1 when I hit Button "Go to Tab2" it will change to Tab2 and when in the tab2, I hit button "Go to Tab3" I want  tab will change to Tab3. It is Possible to do that ? Below I m Pasting Image For reference.

Thank you.

mvp_badge
MVP
Rank: #75
Solution

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

RWALabTabWidgetDemo.oml

Rank: #88

Nice Benjith,


mvp_badge
MVP
Rank: #75

Thanks, Rahul!

Glad to help :)


Best regards,
Benjith Sam

Rank: #1103

hello Benjith sam,

thank you for your response. This is a simple way to achieve my  Requirement 


mvp_badge
MVP
Rank: #75

You're welcome, Akshay.

Glad to help you :)


Best regards,

Benjith Sam

Rank: #286
Solution

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 :)

TabsNavigationOnButton.oml

Rank: #1103
Hello Shweta Gedam, Thanks for your Quick response, and its working. Thank you
Rank: #441

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

Rank: #286
Solution

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 :)

TabsNavigationOnButton.oml

Rank: #1103
Hello Shweta Gedam, Thanks for your Quick response, and its working. Thank you
mvp_badge
MVP
Rank: #75
Solution

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

RWALabTabWidgetDemo.oml

Rank: #88

Nice Benjith,


mvp_badge
MVP
Rank: #75

Thanks, Rahul!

Glad to help :)


Best regards,
Benjith Sam

Rank: #1103

hello Benjith sam,

thank you for your response. This is a simple way to achieve my  Requirement 


mvp_badge
MVP
Rank: #75

You're welcome, Akshay.

Glad to help you :)


Best regards,

Benjith Sam