Skip to main content

I’ve been searching for an answer on this, but cannot find it. So I thought I ask. I want to disable a Tab Panel within a TabSet. If so how? Thanks.

When you say disable,  do you mean set component so it is read only?  Or do you mean “gray out” the tab and its related components?    Or do you mean hide completely? 

The hide completely is available using conditional rendering. 

The other two items would require some custom javascript that read values and conditionally adjusted the display on the page: 

  • In the first case you would need to  manipulate the fieldeditor.mode property to “read-only”   (see this forum post  https://community.skuid.com/t/edit-mode-button )
  • In the second case would need to add a new dom element that applied the gray overlay,  and maybe adjust the css of the tab so it looked greyed out. 


Hi Rob,
I mean the last case, Hide/unhide Completely.

Here is what I am trying to do: (I actually accomplished it but I don’t think its efficient, since I resorted to some trickery).

Here is the popup as it comes up:
f28d0d556f81f437e840883d16c6b2a329cf2b57.png
When you click on the “add Related Person” a new tab appears:
e846a15ec89b727c29597f4987b4bc0c557e1133.png

Here is the trickery:

When the popup loads I call this script:
d68d327bce430a1e838fe70779c9081a4986f27c.png

Then when the user clicks on the button the following is called:


So as you can see, I have two buttons and two tabSets that I hide and show using jQuery.

I tried to just hide the Tab, using jQuery as well but was not successful.

What do you suggest?






What do I suggest?  -  I suggest you use whatever works, and it looks like your solution is functional. 

The action framework might allow this to happen with out code.   The button you added could modify the value of a field  (Say from False to True) using the “udpate field on row” action type.   And the tab could be conditionally rendered so that it only showed if the field value is True. 

The downside of this approach is that you need to have a field on your object to control this - rather than using a UI only solution as I believe you have coded…


Hi @Rob_Hatch, I don’t think the posted links are available now. I have the same requirement to disable the tabset and pages. What are the possible solutions? I tried component action to set the component to read-only mode, but it doesn’t work properly.


Reply