CODEWITHSUNDEEP
oracle-apex
tonyf
tonyf

Reputation: 35587

How to disable 1 to N tabs in Oracle ApEx?

I am using Oracle ApEx 4.1.1. I currently have 6 tabs, i.e. Tab1, Tab2 etc..

When the user first lands on the start page of my app, i.e. Tab1 in this case, all other Tabs, Tab2, Tab3 etc are also presented to the user.

At the moment, a user can click onto any of these Tabs but no data would be presented to the user as the driving screen is actually from Tab1. So basically, when a user clicks on a link on Tab1, all information relating to that ID, retrieves all info for all the other tabs. So everything is in context with Tab1.

Now in ApEx, is there a way of disabling the actual tabs (from the tabs sets), that would be prevent the user from clicking on these tabs until a record is actually selected from Tab1, which would then enable of the remaining tabs from Tab2 to Tab6?

Further to this, when the user lands back on Tab1 again, I would then like to clear all data from Tab2 to Tab6 and once again disable these tabs.

Upvotes: 0

Views: 3313

Answers (1)

Tom
Tom

Reputation: 7028

I'd actually just adjust the display conditions on the tabs. Use an application item or use the page item from page 1 you refer to from pages 2-6. Page 1 will have to be submitted when you click such a link, so the tabs will be rendered.
As for clearing, you could set a before-header computation to always set the item to NULL.

Ok, so the above would probably be the fastest and least hassle, but from your comment below i better understood your question.

Example mark-up for Theme 21

<ul id="tabs">
  <li class="first-non-current">
    <a href="javascript:apex.submit('T_TAB_1');" class="tab_link"><span></span>Tab 1</a>
  </li>
  <li class="non-current">
    <a href="javascript:apex.submit('T_TAB_2');" class="tab_link"><span></span>Tab 2</a>
  </li>
  <li class="current">
    <a href="javascript:apex.submit('T_TAB_3');" class="tab_link"><span></span>Tab 3</a>
  </li>
  <li class="non-current">
    <a href="javascript:apex.submit('T_TAB_4');" class="tab_link"><span></span>Tab 4</a>
  </li>
  <li class="last"><span></span></li>
</ul>

So when you're on page 1 which is Tab 1, you could alter how tab 2 and tab 3 look and behave, based on the class of the LI elements. Use javascript to disable the default behaviour of the a-tags on the non-current tabs, and use css to change the look and feel (which i'm not going to broach here: too much, and very specific to one theme. Spy the css through firebug, or look at the theme css in the images folder!)

Upvotes: 1

Related Questions