Hi,
I'm using Tabs widgets and one of the requirement is to disable a certain tab.
Let say I have to disabled tab 4 until all information from tab 3 were completed. I tried using this code
SyntaxEditor Code Snippet
"$('.Tabs__tab').tabs( {disabled: [1]} ); "
But it's not working.
Hope somebody can help me on this.
Thanks,
Ruby
Hi Ruby Jimenez,
Try to have a look on NavigationBar ,think it will work better in this situation.
Let me know if you need more clarification.
Regards,
Manikandan K
ManiKandan Kaliamoorthy wrote:
I have to replace the Tab with Navigation Bar? Or should I put the NavBar within the tab?
Ruby Jimenez wrote:
I have replace the Tab with Navigation Bar. I'll just update the CSS for the active bar to behave like tab.
Thanks for this suggestion.
Hi Ruby,
While I see you've started using the Navigation Bar as suggested. Based on your flow of not allowing the user to move on until a step is completed, the wizard pattern is what is really meant for this flow:
https://silkui.outsystems.com/Patterns_Web.aspx#Web_Featured_Wizard
The navigation bar 'could' be changed and used for this, but it is not really what it is meant for. The wizard is built specifically for the flow described.
Hope this helps,
Justin
I have the same situation, I want to disable tabs 2, 3, 4... until Tab 1 is saved.
Unfortunately using Navigation Bar or Wizzard Bar is not an option as this implies creating a Webscreen for each option on the Bar, while Tab all the content goes onto one Webscreen, therefore the other Navigation Bar & Wizzard uses considerable more Application Objects, and therefore you quickly run out of AOs on your license, and we need to go sparingly.
Is there any way to disable tabs please?
I have the same situation Is there any way to disable tabs please?
Hi
Try this it will disable your tabs except active tab;
$(function(){
$(".tabs-header-item[tabindex='-1']").attr("disabled",true);
})
Hi, i have a question to ask.
I am using Navigation/TabsHeaderItem in my outsystem. There are 3 tab that i build.
For example, first tab is A, second tab is B & the third tab is C.
If i click the A tab, how i want to disable the other 2 tabs?
Hi Lynnn,
It is difficult to achieve using Tabs, it is easier to use Wizzard, you can change the wizzard to act very much like a tab. The advantage of the wizzard is that you can add a link to the wizzard text to add an action when clicked.
One can also have all the pages of the Wizzard on one screen like with a Tab.
I attach here an example. All the pages are in webblocks and then inserted on the main screen.
The Wizzard shall need a variable (I created an array of booleans) to indicate whether the tab(wizzard page) is active or not.
On "Tab A" page I added 2 buttons to illustrate how you can enable and disable the wizzard links.
You also have to keep track of which is the active tab (wizzard page) manually, and on each wizzard content indicate which is active, next or past.
You can further style the Wizzard using CSS if you want it to look more like tabs.
I hope this helps.