Technical Articles relating to Oracle Development Tools and Frameworks

Conveyor Visualization for Tabs in ADF

Duncan Mills

If you look carefully at the online demos for panelTabbed in you may notice that the tabs are sporting a slightly changed UI for situations where the number of tabs can't fit into the available horizontal space. 

Here's the situation with the default representation of a tab-set when it overflows. The chevron  on the right of the tab-set can be clicked to display a drop-down list of the remaining tabs. 

Basic tab visualization

In we now have an alternative visualization where the hidden tabs are available on a conveyor belt and the user can scroll along the belt rather than having to use the pull-down list.

Conveyor Tabs

Enabling this feature

This visualization is not controlled by any property on the component but rather is switched on through the skin being used in the application. As such, all tab-sets within the application will gain the visualization if it is switched on. 

To enable it you will need to create a custom skin, if you are not familiar with  process then there are plenty of articles and documentation out there to help you, or you can download the demo that I've created to go along with this article. Basically I've created a custom skin that extends the new Skyros skin that uses by default, and plugged that in to replace Skyros.

Within the skin file there is a single entry to make for panelTabbed (and a similar one for navigationPane):

 af|panelTabbed {

And that's it, as simple as that.  As I mentioned you can download a simple sample (DRM009) which shows this in action from the ADF EMG Demos Site

Join the discussion

Comments ( 2 )
  • guest Saturday, May 18, 2013

    Hi Duncan, I was looking for this since long. Thanks much for a nice tip.

    I have very similar requirement for navigation pane. We are using Jdev with Webcenter framework.


    Navigation pane is resulting the tabs. but when tabs becomes more I am seeing the above issue. Can we apply similar trip for naviagation pane too?



  • Duncan Sunday, May 19, 2013

    Yes this is available on navigationPane as well in - it will be the same -tr-layout-type:conveyor; setting in the nav panel skin section

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.