Creating a navigation bar

The navigation bar is the area of an APEX application that is normally placed into the header of each page (unless the template is changed of course). As a standard, the Logout link is provided here, so users can quickly log out of the application from any page.

This recipe will show how a navigation bar can be customized. This will allow users to quickly reach certain pages in the application.

Getting ready

In this recipe we are going to see how you can create a quick link to a contact page. Before we can do that, we first need to have this page ready.

1. Create a new blank page. Name it Contact and assign page ID 999 to it.

2. Create a new HTML region on this page and enter the following text into it:

   For more information send an e-mail to [e-mail]

   For the second part of the recipe, we need an icon available. This can be any available icon as long as it measures 32 x 32 pixels. The Images directory of APEX offers some examples such as fndtip11.gif.

3. Go to Shared Components.

4. Click on Images.

5. Click on Create.

6. Select your application.

7. Select the image fndtip11.gif on your filesystem by using the Browse button.

8. Click on Upload.

   Furthermore, check your page template. In the Navigation Bar Entry section you should see at least the tags for image, alt, width, and height. For example:

   <a href="#LINK#"><img src="#IMAGE#" alt="#ALT#" height="#HEIGHT#" width="#WIDTH#" />#TEXT#</a>
   [9672_01_06A.txt]

9. To check the page template, go to a page and click on the Page Template link on the right-hand side of the page (in the Templates section). Scroll down to the Subtemplate section and check the Navigation Bar Entry textarea.

How to do it...

The navigation bar can be found in Shared Components. To reach it, navigate to Shared Components | Navigation Bar Entries.

As a default, there is already a logout entry available. Our new entry will be added here:

1. Click on the button Create.

2. Select From Scratch and click on Next.

3. Select Navigation to URL and click on Next.

4. In the Entry Label, enter Contact and leave the rest on default. Click on Next.

5. Enter 999 into Page and default the other fields. Click on Next.

6. Click on Create.

   As you can see, a new entry is created next to the Logout entry. This means we are done and can now test it by running the application:

   
   

   Instead of a link text it is also possible to use images. This can be helpful when developing, for example, a multi language application with a short list of languages. Instead of writing the full language name, we can use small icons depicting the available language.

   In this example, we will only show you how to create a navigation bar icon and reuse our Contact page for this. Later on in the book, we will show you the details of how to create a language switch.

7. Go to Shared Components | Navigation Bar Entries and click on the button Create.

8. Select From Scratch and click on Next.

9. Select Navigation to URL and click on Next.

   This time we need to enter some more information on this screen.

10. Alter the Sequence to 15.

11. In the Entry Label enter nothing.

12. In Icon Image Name, click on the button to the right of the field and select the icon fndtip11.gif.

    • Alternatively, you can enter #APP_IMAGES#fndtip11.gif into the field.

13. Enter Contact into Image ALT.

14. Enter 32 for both Image Height and Width:

    

15. Click on Next.

16. Enter 999 into Page and default the other fields. Click on Next.

17. Click on Create.

You will notice a new entry in the list of the navigation bar. When running the application, this will be shown with the selected icon.

There's more...

New in Application Express is the possibility to add a feedback link to the navigation bar. This will allow visitors of the application to quickly send feedback to the application developers or administrators.

1. Create a new navigation bar entry From Scratch.

2. Select Feedback and click on Next.

3. In the next screen, find the Tasks section to the far right and click on Create Feedback Page:

   

4. Set the page number to 102, leave everything else at default, and click on Create.

5. The focus will be returned to the navigation bar overview, so we have to repeat the first two steps.

6. Now select page 102 from the Feedback Page pull down list, enter 20 into the Display Sequence, and click on Create.

If you were to run the application now, no feedback link would be visible, because we have to allow the feedback option first.

So click on Edit Application Properties and find the option Allow Feedback. Set the pull down to Yes and click on Apply Changes. Now the application is ready to receive some feedback from its visitors:

See also

• Chapter 6, Creating Multilingual APEX Applications, will cover translating your application and offering quick language switching to the visitors.

• Chapter 12, Team Development, will show how feedback can be used to the advantage of the development team.