Tabs with Oracle Apex Application Express 3.1.2.00.02

Prerequisites This document helps to understand tabs better and points out how one could use Oracle’s Apex to create tabbed navigation. This document does not:

- show how to use the wizard to create a application with tabs; - show how to change from one lay-out to another; - go into details on how Oracle Apex works.

To start this ‘tutorial’ you should have a basic understanding of Oracle Apex so you know how to get a two tabbed lay-out for your pages. All other knowledge helps. All you need is a running instance (workspace) of Oracle Apex without any pages or predefined tabs, tab sets or any of that.(if they exist, delete all)

The start To create a tabs we need a page structure. So here we go. Create all these pages (figure 2) though the pages wizard. Make sure you select not to use tabs (Figure 1). This will help to get a better understanding of tabs. (plus wizard doesn’t work properly) The pages in our tabbed navigation will be structured in the following manner: Home

- welcome - news

Products

- products - cheese

Service

- services Contact

- information - route

Figure 1 no tabs

Figure 2 Created pages

Tab #1 To start ‘tabbing’ first we will define what is what. After using Apex I have discovered that definitions used in apex aren’t used consistently. To start we need to create a Tab Set. Only 1 Tab Set is defined for the whole application. This tab set holds all the parents and their children. Usage of multiple tab sets as I define here is beyond the scope op this tutorial.

Figure 3 The start of tab #1

We already know the structure of our application so we can start with Standard Tab Set ‘Home’ and we will be adding two children to this Standard Tab Set; ‘welcome’ and ‘news’ In Apex to go to the tabs section (shared components) and start by clicking on the bottom bar where you would add a Standard Tab(figure 3) The following screen will ask you to fill in a Tab Set name. This actually isn’t the tab set we have explained above. What we need to enter here is the name of the Standard Tab Set, for us this is ´Home´. Standard Tab Sets are sets of standard tabs. Our Standard Tab Set ´Home´ will contain two Standard Tabs ´welcome´, and ´news´. Fill T_HOME as the Standard Tab Set (figure 4) and click next.

Figure 4 Our first Standard Tab Set On the next screen (figure 5) we will actually create the one and only Tab Set that our application will use. It is most important that you get this right. The label New Parent Tab Set is actually misleading. Is suggests that you name the first ‘Parent’ Standard tab set ‘Home’. Actually we are naming what one could call the main navigation area of an application. So here we enter MAIN_MENU. The next field (New Parent Tab Text) is the name that will display on the Parent of the Standard Tab set we have created in the step before this. Here we fill in ‘Home’ . The two terms: New Parent Tab Set and New Parent Tab Text seem to be related but what we are actually doing here is defining the name of the Tab Set that holds all the parents and their children and we are setting the label for the first Parent Tab. Quite confusing but click next.

Figure 5 The confusing part At this stage we get to set the label of the first Standard Tab (the lowest level) Here we enter ‘welcome’ (figure 6) Look at the screenshot (figure 6) and note that the new Tab Set is set to T_HOME. This means that the ‘welcome’ Standard Tab belongs to this Standard Tab Set, but actually the term Tab Set is used. Quite confusing, but click next.

Figure 6 The First Standard Tab

The next step is to select the page that will be requested after having clicked the ‘welcome’ Standard Tab. Here we select page 1 (figure 7) which in our case is the Home page. Click next.

Figure 7 Set the action After this we ignore all the other settings click next, next, next and create tab to get to the main tabs screen.(figure 8)

Figure 8 Our Tab Set, Standard Tab Set and Standard Tab

To see the (right)tabs in the page lay-out we need to set the Standard Tab Set for a page. For our Home page this was automatically done. But if that is not the case the next section will explain how a Standard Tab Set is set for a certain page. We will show it for the Home page. Under Page Rendering, click the ‘ Edit Page Attributes’ button. (red Circle figure 9) and set the Standard Tab Set for our page(Figure 10). Click Apply changes.

Figure 9 Setting s Standard Tab Set for a Page – step 1 Notice that over to the far right (red X figure 9) that under tabs we have no business right now. This area will display the Standard tabs and the Tab Set that will be set for this page.

Figure 10 setting a Standard Tab Set for a Page - step 2

After having set the Standard Tab Set for the Home page we will look at the settings in the Tab region of the page settings over to the right under Shared components, Tabs (Figure 11)

Figure 11 Tab settings for the Home page Here we can see that our Tab Set MAIN_MENU and our Standard Tab Set T_HOME are showing. Again this is very confusing because they are both referred at as Tab Set. What we are actually seeing is that for this page ‘Home’ the Tab Set is MAIN_MENU and the Standard Tab Set showing is T_HOME Now lets take a look at our application, launch the Home page by clicking on the traffic light in the top right corner (Figure 11) Here (figure 12) we see our Tab Set containing our first Parent Tab/Standard Tab Set ‘Home’ and it’s first Standard Tab child ‘welcome’ Now lets add the next child

‘news’ to the T_HOME Standard Tab Set.

Figure 12 Our first look at the tabs

Go back to shared components, tabs to add the next Standard Tab(figure 13) Click on the ‘Add’ link next to the other Standard Tab ‘Welcome’

Figure 13 Add the next Standard Tab On the next screen (figure 14) enter ‘news and click next.

Figure 14 setting the Standard tab label

Select the page that will be requested after clicking on the Standard Tab. In our application this is page ‘News’ nr. 3. (Figure 15) Click next, next, next and create tab.

Figure 15 Set the action for A Standard Tab After having added the new Standard tab our Standard Tab Set T_HOME has two Standard Tab children ‘welcome’ and ‘news’. Launch the Home page to see the result. (Figure 16) Here we can see the Tab Set MAIN_MENU having one Standard Tab Set T_HOME having two children Standard Tabs ‘welcome’ and ‘news’ One would now assume that the process for adding more Standard tab sets and standard children is quite straight forward and as described above. But actually it is not. To add another Standard Tab Set (parent with children) to our Tab Set MAIN_MENU we will have to do the following. We can go back to shared components, tabs to add another, as apex calls it Parent Tab. This is actually true, first we must add a parent tab to put our children under. Actually we are

Figure 16 Two Standard tab children

prepping Standard Tab Set nr 2. There are other ways to do so but we will keep to the most ‘logical’ way of setting up our tabbed navigation. Click ‘add’ next to Home(Figure 17).

Figure 17 Adding our Second Parent Tab In the next screen(Figure 18) we will create the next Standard Tab Set ‘Products’ to which we will add the children ‘products’ and ‘cheese’ As we manually created the name for our first Standard Tab Set T_HOME, here apex does it for us. Under water the Standard Tab Set T_PRODUCTS will be created. So actually this step does two things: setting the label and creating the Standard Tab Set. Do I need to say ‘confusing’….Click next.

Figure 18 The Second Standard Tab Set

Figure 19 Set action for Standard Tab Set 2 parent Tab In the next screen(Figure 19) we will set the page that the Parent Tab ‘Products’ will link to. In our case the page Products nr 5. Click next and create tab to come back to the tabs screen (Figure 20)

Figure 20 The Second Standard Tab Set Products Now we will add the first Standard Tab child to the T_PRODUCTS Standard Tab Set we have just created. Again the T_PRODUCTS Standard Tab Set was automatically created whilst labelling and creating The parent Tab ‘Products’ Make sure That the Parent

Tab/Standard tab Set ‘Products’ is selected. Notice the text above the red line that indicates the selected parent. Click add in the Standard Tab bar to add the first Standard Tab child also named ‘products’.

Figure 21 The first Standard Tab child to our second Standard Tab Set T_PRODUCTS Here(Figure 21) we can see the proof of the naming convention used when creating a new parent Tab ‘Products’ discussed earlier. In this step where we are adding a child Standard Tab we can see we are doing it for the Standard Tab Set T_PRODUCTS. Click next and select the page to which we want to navigate (Figure 22) In our application this is page nr 5 products. Click next, next , next, create tab to go back to the tabs screen (Figure 23)

Figure 22 setting the action for Standard Tab products

Figure 23 A closer look at the Tabs screen We can see that our Standard Tab is added to the Standard Tab bar. In the red square we can see some useful information: the Parent Tab that is selected, one could also say: The Standard Tab Set (T_PRODUCTS) that is selected, the selected Standard Tab that is selected ‘products’ and the page that the Standard Tab is ‘Current’ for. Looking at the visual aspect of this page. All of this is clear. The parent Tab Products is selected because it is green. The Standard Tab is showing and page 5 products as well. No we will take a closer look at some of the settings from our Standard Tabs and Standard Tab Sets. Click on utilization (Figure 24 red arrow nr 1) to see the settings for our Standard Tabs in this application. Just to be clear the Standard Tabs are the of the lowest level.

Figure 24 bugs in the Standard Tabs

Here (Figure 24) we can see our Standard Tabs (lowest level) and their settings. We will walk thought them to see what this screen and the settings actually mean. Because of the mixing of the terms Tab Set, Standard Tab Set and Parent Tab and parent Tab Set within Apex it is important you get this part right. Also we will fix a ‘minor’ Bug. (which is very trivial to getting it right) We will first look at the columns in the table: Tab Set: This should actually say Standard Tab Set. Here we can see our self defined T_HOME Standard Tab Set and the automatically generated Standard Tab Set T_PRODUCTS this column list to what Standard Tab set our Standard Tabs belong. Page reference: This field list the amount of pages that refer to this particular Standard Tab Set. Why isn’t there a number for T_NEWS? (Figure 24) we can’t say. Tab Name: It is not clear as to what this means. Here Apex seems to use the same naming as for the name of the Standard Tab set to which the Standard Tabs belong. Confusing. In this Column you can click to get to the page where you can edit settings for a certain Standard Tab. We will show this page later in this tutorial. Tab page: This is the page that the tab links to. Parent Tab Set: Here we see the Parent Tab Set to which the Standard Tabs belong. This is most confusing because the Standard Tabs belong to Standard Tab Sets and Standard Tab Sets to A Tab Set. Pointed out in the beginning of this tutorial we only have one Tab Set in our Application MAIN_MENU. To display the hierarchy and naming we have been using: Tab Set

- Standard Tab Set o Standard Tab

Because Apex is so inconsistent as to label all those kinds of layers try to get them right yourself. This tutorial should help to point out what is used where and where to fill in what value. We think Apex uses Parent Tab Set here to make clear a Standard Tab is grandchild to the MAIN MENU Tab Set. But actually this is only making it harder to understand what is going on here because a Standard Tab is a child of a Standard Tab Set. Which is named Parent Tab within Apex… So to be correct they should not have used the term Parent Tab Set for the MAIN_MENU Tab Set. No lets take a look at the ‘null’ problem in the Standard Tab settings(Figure 25) This is actually a bug because we have added the ‘products’ Standard Tab with the wizard.

Figure 25 The 'null' bug To fix this problem we need to know what we are doing here, and what we are fixing. As you see from the other entries and our created understanding as to what Apex means we need to set the Tab Set (Our one and only MAIN_MENU) to which ‘products’ is a grand child to. Click on T_PRODUCTS in the column Tab Name. And set the Parent Tab Set to MAIN_MENU (Figure 26) Click Apply changes. You will be returned to the main tab screen.

Figure 26 Setting the grand parent of a Standard Tab

Now lets take a look at the Parent Tab Settings (what we have been calling Standard Tab Sets) Click on Manage parent Tabs (Figure 27 red Arrow nr 2)

Figure 27 get ready to manage Standard Tab Sets (red arrow nr 2) We see (Figure 28) a similar table as the one under Utilization when looking at the Standard Tab Set settings

Figure 28 Manageing Standard Tab Sets Lets take a closer look at the columns in the table to see what they mean:

Tab Set: Here we can see what the parents of our Standard Tab Sets are. In this case Apex names it the way we have. The Tab Set is our one and only Tab Set that holds all the Standard Tab Sets and their children named MAIN_MENU. Parent Tab: Here we see the name of our Parent tab. Actually this is the label on the parent Tab in our Standard Tab Set. Standard Tab Set: Here we can see our self defined T_HOME Standard Tab Set and the automatically generated Standard Tab Set T_PRODUCTS and their children (Standard Tabs) Again it seems that here the naming that we and apex are using is similar. Sequence: This is the order in which the Standard Tabs are displayed. Standard Tab: Here we see what Standard Tabs are children to the Standard Tab Sets here also apex uses terms and hierarchy we have set out for you: Tab Set

- Standard Tab Set o Standard Tab

A fully created tabbed navigation then all of a sudden makes sense (Figure 29)

Figure 29 The created stucture Here we have added all other tabs as suggested in our structure of pages. Go ahead an also try and create al the Standard Tab Sets and Standard Tab Children. Good luck.