Monday, November 2, 2015

Easy tab regions in Apex 5

In Apex 4, if you wanted to implement tabbed regions, you had to use jQuery UI Tabs or some other third-party component.

With Apex 5 and the Universal Theme, tabs come built-in and setting it all up is extremely easy.



To add tabs, just add a Static Content region to the page, and change its template from "Standard" to "Tabs Container".


Then add Sub Regions to the region. In the component tree, any sub regions you add will appear under the "Tabs" node which has a folder icon.



Add as many sub regions as desired. For best results, set the template of these sub regions to "Blank With Attributes". Add content and items to these sub regions.

You can also set some template options for the tab container region, such as "Remember active tab" (between page views) and to set the visual style of the tabs.



That's it! Happy tabbing! :-)


2 comments:

Vlad said...

I created modal blank page and added region (template - tabs container) with subregions.

When I open this page I see unpleasant flicker

Any ideas how to fix it?



Example app (click Page) demo/demo

https://apex.oracle.com/pls/apex/f?p=23195:1:103288031164791:::::

Morten Braten said...

@Vlad: I see what you mean. Maybe it's because of slightly slow page loading on apex.oracle.com? Have you tried it on a "local" installation of Apex?

- Morten