Tuesday, 27 July 2010

Two Level Tabs - APEX

As many new developers in APEX find it confusing to use two level tabs in their applications, I have created a detailed example concerning this issue.

Click on the icon "Application Builder"

Then Click on the "Create" button to create a new page.


Select "Create Application" and click next.


Then for "name" enter tabs and choose to create your application from scratch. The application id can be any number and the schema will be your own DBs schema. This is irrelevant to this example. Then click next.


For page type select "Blank" and click on the "add page" button to add this page. Then click next.


Select two level tabs


For "Copy Shared Components From Another Application" select NO and click next.


Your authentication scheme can be any of the 3 options. This is up to you. For this example, I am not using any authentication so I have chosen "No authentication". After choosing the scheme you want click next.


Then choose any theme you want for your application. I have chosen "Theme 3". Click next.


Then click the "Create" button to create your first page.


If you go to your application's page you will see what is in the image below

Click on the "Create Page" button to create another page. Select "Blank Page" and click next.


For Page Number add 2 and click next

For "page name" add and click next.


The next part is about tabs. For "Would you like to use tabs for this new page" select NO. You will do this later. Click next



Finally click "finish" to create your page


Follow the exact same steps to create another 3 pages.
Page 2 (page name-->Page 2, page number-->2)
Page 3 (page name-->Page 3, page number-->3) and
Page 4 (page name-->Page 4, page number-->4)

In your Application page you will see the following image. Click on "Shared Components"


And from there click on "Tabs" on Navigation.


What you will see is the following image:


Click on the edit image of the parent tab on the top (Page 1). Change Label to "Parent 1" and click apply changes.


Then click on the edit icon of the child tab on the left (Page 1)


Change Tab Label to "Child 1(a)". Then in the "Current For Pages" section in "tab also current for pages" add 1.


Finally, in "Parent Tab Set" section select main (if not selected by default). Click Apply Changes.


Then click on "Add" in child tabs to add another child tab.


For "Tab Label" enter --child 2 (a)--


For "Tab Current For Page" enter 2.


For Sequence enter 20


For "Condition Type" choose -No Display Option-


Finally, click on the "Create Tab" button.


Then click on the edit icon on the child tab that you just created (child 2 (a))


In section "Current for Pages" for "Tab also current for Pages" add 2


For "Parent Tab Set" select "main" and click on "Apply Changes"


Then click on the "Add" link in the parent tab bar to add a new parent tab.


For "Parent Tab Label" enter -Parent 2- and click next



For Page enter 3 and click next


For Sequence enter 20 and for "Condition Type" select -No Condition- and click "Create Parent Tab"


Now what you see is the image below


Click on the "Add" link on the left to add a child tab for this new Parent Tab "Parent 2"
For Tab Label enter "child 1 (b)" and click next.


For "Tab Current For Page" enter 3 and click next


For Sequence enter 10 and click next.


For "Condition Type" select -No Condition- and click next


Finally, click on the "Create Tab" button.


Then click on the edit icon in the child tab that you just created (Child 1 (b)).


In section "Current for pages" in "Tab also current for pages" enter 3


For "Parent Tab Set" select "main" and click on the button "apply changes"


What you now see is the following image. Click on the "Add" link on the left to add another
child tab.


For Tab Label enter "child 2 (b)" and click next.


For "Tab Current For Page" enter 4 and click next


For sequence enter 20 and click next


For "Condition Type" select -No Condition- and click next

Finally, click the "create tab" button


What you see now is the image below. Click on the edit icon for child tab (child 2 (b))


In "current for pages" section in "tab also current for pages" enter 4


For "Parent Tab Set" select main and click "Apply Changes"


At this point you have created your two level tabs.


Go to your application's page and click "Run Application" (or click on the run icon at the top on the right)


Below you can see 2 screenshots with the two level tabs pages.





In the same way you can add as many tabs as you wish. If you want more than one pages to be
under the same parent and child tab then on the section "Tab also current for pages" add page numbers seperated with a comma (4,5,6,7 etc).


6 comments:

  1. THANK YOU!!! So far, this is the only demonstration of the two level tabs feature that has made any sense!

    ReplyDelete
  2. No problem! Glad you found it useful.

    ReplyDelete
  3. This made things very clear! Wonderful! Thanks :-)

    ReplyDelete
  4. Really Helpful Tutorial.

    P.S - It should read Two and not Tow.. :)

    ReplyDelete
  5. Hello, sorry for question. I am new on APEX.
    There is a way to add more than 2 levels_

    ReplyDelete
    Replies
    1. Hello, sorry for the late answer. Just follow the same methodology.

      Delete