The solution uses APEX 4 built-in jQuery libraries.

The idea is to create a “containing region”, that is a region that will contain the sub-regions.

Those sub-regions then will appear as a tab on your page.

Create a template for the containing region

Go to “Shared Components” – “Templates”, filter on Region Type templates:

Press the create button

choose Region

choose “From Scratch”

Give the template a meaningful name. In my example I use “jQuery Tabs”
Choose “Custom 1” for the template class
Press the “Create button”
Editing the template
You now have the “jQuery Tabs” template in your list.
Open it by clicking on the name:


We must place some code in the “Definition” section:

<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
<div style="clear:both;"></div>
</div>
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>

Go to the “Sub Regions” section, this consists of three items:

  1. Header Template
    <ul style="height: auto;">#ENTRIES#</ul>
  2. Header Entry Template
    <li><a href="##REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION_TITLE#</a></li>
  3. Template
    <div id="#REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION#</div>

The template is now ready. Save the template.

Next step is creating a Containing Region on the page
Go to the page:

Create a HTML-region:

The Title doesn’t really differ that much, it’s only for you reference.
Choose the correct Region Template (“jQuery Tabs”)
Leave the rest as defaulted.


leave the presented HTML region source empty. Remember we’re going to use this region only as a container for sub regions
Open the region we just created:
Go to the “Header and Footer” section and place this code in the footer:

<script type="text/javascript">
 apex.jQuery(function() {
 apex.jQuery("##REGION_STATIC_ID#").tabs();
 });
</script>

Now open each region that should be transferred into a tab and change the parent region (within the section “User Interface”) to the newly created container-region (“jQueryTabs”)


Repeat this step for each tab you need.
Ready.. Good luck!

19 thoughts on “Tabs within APEX (using jQuery)

    • Matt,

      To be honest I took this code somewhere and honestly could not remember where it came from.
      I’m quite sure I didn’t use the forum you mention, so probably someone else used Patrick’s code in his example.
      I took this example from an existing application.

      This blog is also intented for a single point of information for our members. Thank you four your link..

      I have to start reading those forums more often 🙂

      Reply
  1. Thanx Richard,

    After implementing the Tabs i encountered the problem that the height of the tab-region was not overlapping the heights of the sub-regions.
    I added an extra div in the region-template with “clear:both”. Now its working perfectly!

    Template defintion:

    <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
    #BODY##SUB_REGION_HEADERS##SUB_REGIONS#
    <div style="clear:both;"></div>< </div>
    <link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
    <script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>
    </div>

    Reply
    • I altered the code in my blog to represent the code you propose.
      I did take out the extra however 🙂

      thanks brother!

      Reply
  2. Very interesting. One question: why do you put the Javascript code in the region footer and not build it into the template? It seems to work just as well if you put it at the bottom of the template definition, and makes using the template even simpler.

    Reply
  3. hi
    i tried the same but throwing an error
    ORA-01422: exact fetch returns more than requested number of rows ORA-06512: at “APEX_040200.WWV_FLOW_PAGE”, line 421 ORA-06502: PL/SQL: numeric or value error: character to number conversion error
    theme is blue responsive

    Reply
    • Hi hemu,
      I have this exact same error. Once I get the error, none of my other Pages will run. I can edit and create new pages etc. but no luck running them. I have tried various themes to no avail. As soon as I add tabs, I get this error.
      Any solutions from anyone?
      Thanks already

      Reply
    • I have done further testing and it seems that putting the tabs in place sets the error off but even getting rid of the tabs entirely does not solve the issue. The only solution I have found so far is creating a new Application and creating the tabs as you go along. This will require planning but ultimately is possible. Editing the tabs will throw it all upside down again though.

      I am using Chrome and Windows 7

      Reply
  4. Nice aproach, my only problem is that when I im the third tab or other than tab 1, when I press the > to get next record, the displays goes to tab 1…is there a way to maintain the tab Im viewing when I try to get another record?

    Reply
    • Hi Francisco!

      I try write without Dynamic action. And this code do it.

      apex.jQuery(function() {
      apex.jQuery(“##REGION_STATIC_ID#”).tabs({
      show: function (event, ui) {
      var a = new htmldb_Get(null,&APP_ID.,’APPLICATION_PROCESS=DUMMY’,&APP_PAGE_ID.);
      a.add(“P_X”,$(this).tabs(“option”, “selected”));
      r=a.get();
      apex.item( “P_X” ).setValue($(this).tabs(“option”, “selected”));
      },
      selected: apex.item(“P_X”).getValue()
      });
      });

      Variable P_X Store tabs position.

      Reply
    • Alexandra,

      I’m quite sure it has to do with your custom theme.
      Are you sure you incorporated all necessary libraries (jQuery, jQuery UI etc.)?

      Reply

Leave a Reply