Friday, November 16, 2012

Mutli Level ( N level ) Tabs in Oracle APEX 4.1 or 4.2






Click Here for demo



 Here is the Multi Level Jquery Tabs in Oracle APEX .

1.Its is Easy to implement .

2.Enhances Look and Feel of the Application .

3.Light Weight.



Steps to be followed :-

1)Create a Application with one level tab , add 4-5 pages

Note the tab Labels should not contain spaces  , in case u want to add spaces use  


2) Create a list entry in the application shared components exactly matching the strings used as the label in the tabs .

Example :- Tabs :- Home , Tab1 ,Tab2 ,Tab3 ,Tab4 points to pages 1,2,3,4,5 correspondingly .

Now create the Sub menu entries like i used in this application

Home > Home child

Tab 1 > Child 1 > Grand Child 1 > Great Grand Child 2 .  soo ooon . 


You need to create the List entry for exactly same with same Label , In case you are including the   in the label , you need to reuse that too here .


 Ex:-  My Home .


3)  Download the Jquery Plugin from the APEX plugin site and upload it into your appliation .

4) Create the Page Zero , Create the Plugin Region with Region Template as
 ( Blank Region or No template ).

Specify the Source as


Note as this is the only list entry i have in my application , I took liberty to  use this query else you need to filter it depending on your List Name as an application can contain N Lists . 



5) Now its time to Edit the theme which you have chosen for you application .
       a) Theme can be either Div based.
       b)It can be List based .

You can get to know what is your theme category by clicking on the One Level Template link on any page of your application   .

Got the Standard Attributes Region .




Now change the Code to the corresponding  Values


Once done Just Run the Application and just Try to click or hover on the main tabs  , you will observe the Jquery Menus on the Tabs as follows .





 

Do let me know your comments if this helps you out :)   Happy Learning :) :) :) :)



18 comments:

  1. Hello Nandini,

    Where or how did you create the Sub menu entries?

    "Now create the Sub menu entries like i used in this application
    Home > Home child
    Tab 1 > Child 1 > Grand Child 1 > Great Grand Child 2 . soo ooon "

    Thanks
    FJ

    ReplyDelete
    Replies
    1. You need to create a List in Shared Components

      Delete
    2. 2) Create a list entry in the application shared components exactly matching the strings used as the label in the tabs .

      Example :- Tabs :- Home , Tab1 ,Tab2 ,Tab3 ,Tab4 points to pages 1,2,3,4,5 correspondingly .

      Now create the Sub menu entries like i used in this application

      Home > Home child

      Tab 1 > Child 1 > Grand Child 1 > Great Grand Child 2 . soo ooon .


      You need to create the List entry for exactly same with same Label , In case you are including the   in the label , you need to reuse that too here .

      Delete
  2. Hi,

    What is the plugin called and what site?

    Thanks for this..excited to give it a try.

    ReplyDelete
    Replies
    1. jquery.menu Is the Plugin name :) Happy Learning

      Delete
  3. Hi Nandini,

    Can you please give the site from where jquery.menu plug-in will able to download.

    Thanks in advance...... :)

    --Lalit

    ReplyDelete
  4. Hi All,

    I got the link from where you can download jquery Menu plug-in

    http://www.apex-plugin.com/oracle-apex-plugins/region-plugin/jquery-menu_82.html

    Thanks,
    Lalit

    ReplyDelete
  5. Can we do it without that Pulgin???

    ReplyDelete
    Replies
    1. You can do it without plugin too . But that would be very tough and complex as that would require changing the core Theme and creating the whole logic from scratch . Plugin is preferred.

      Delete
  6. Hi Nandini,

    I have implemented succesfully this plugin but I do have an issue.

    I have 6 parent tabs. All of them with some child tabs. The issue is that I can't navigate in all the childtabs, I can only navigate on the child tabs of the parent tab that I am right now... For Example: I click the parent tab 1 and it shows me the page that it's associated, then I click again that parent tab and I can see its childtabs. The issue is when I want to click the parent tab 2, being on the page associated to parent tab 1 (It does not show me its child tabs) So Like I said, I click it and it load the page that it's associated to that tab and in that moment I can see its child tabs... Am I Clear? I hope you can help me. Thanks.

    ReplyDelete
    Replies
    1. Hi Bernardo,

      Can you share me the application on cloud instance , such that ic an look into this issue.

      Regards,
      Nandini Thakur

      Delete
    2. Hi Nandini,

      Thank you for answer :)

      I preferred to record a video with the issue that I'm facing. See here: https://www.dropbox.com/s/tl4g3qoydenyd7l/tabs%20issue.avi

      Thanks, Bernardo.

      Delete
    3. Hi Nandini, did you see the video?

      Delete
    4. Hi Bernardo ,

      I didnt get the chance to look @ it , if u can share the screen shots or apex link i may help you . As i m gng thru hectic schedule so will not be abel to open that link .

      Regards,
      Nandini Thakur

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. If I put screenshot you wont see what I want you to see. Is there any possibility to give me developer credentials to see how all was made??

      Another thing that I want to do ... it's to hover the mouse on the parent tab and it shows me the childs parents without clicking it, How can I do that? Thank you Bernardo... I can give you my email if you want to give the user and password to see how all was made. I will really appreciate it. tsunix@gmail.com

      Delete
    2. Hi Bernardo ,

      Kindly! mail me on thakurdurgeshnandini@gmail.com , Kindly! specify which version of Oracle APEX are you using and whats the applicaiton template you are using .

      Regards,
      Nandini Thakur

      Delete
  8. Nandini,
    How can you make the selection based on hover and not click?

    thank you.
    Scott

    ReplyDelete