Skip to content

How to Add Navigation Options to your App

Jump to bottom
Imaobong Eyoma edited this page Jun 12, 2015 · 2 revisions

This tutorial will teach you how to create a navigation bar for your application. The navigation bar will look like this:

See a bigger version of this image

In order to add navigation to the sample application, we need to create a new nav.html file inside sample folder.

Example: C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\sample\nav.html

The sample application nav.html looks like this:

<div data-role="navbar">
	<ul>
            <li  qf-users = 'Administrator'><a href="forms.html" rel="external">Students</a></li>
            <li  qf-users = 'Administrator'><a href="reports.html" rel="external" >Reports</a></li>
	    <li  qf-users = 'Administrator'><a href="users/index.html" rel="external">Team Members</a></li>        
	</ul>
</div><!-- /navbar -->

NOTE : In the above nav.html, we have added qf-user="Administrator". This is what admin will see when logs in to the application. The admin account will see 3 tabs

Students Reports Team Members

You can also set qf-users="User1" or qf-users="User2" to create tabs that only user1 and user2 accounts will see, respectively. (Capitalize User1 and User2). If you want to customize the nav bar so that more than one type of account sees the tab, you can seperate the accounts by commas, such as qf-users="Administrator,User1". If you want everyone to be able to see the tab, don't include qf-users at all. So the html would simply be:

<li><a href="forms.html" rel="external">Students</a></li>

This navigation file is used for the application. Also, we have different navigation html files defining the various linked pages respectively.

For example, under the users folder, we have previously created another nav.html (tutorial Create a Login/Team members for your App, step 7) which looks like this:

<div data-role="navbar">
	<ul>
            <li  qf-users = 'Administrator'><a href="../forms.html" rel="external">Students</a></li>
            <li  qf-users = 'Administrator'><a href="../reports.html" rel="external">Report</a></li>
	    <li  qf-users = 'Administrator'><a href="index.html" rel="external">Team Members</a></li>
	</ul>
</div><!-- /navbar -->

NOTE : In the above nav.html, we have added qf-user as Administrator. This is what admin will see when he logs into the application. The admin will see 3 tabs

Students Reports Team Members

When comparing the above two nav.html files, we see that links to the tabs are different and hence we can add them according to what page we want them to navigate to.

  • Now you can test your application.

  • In our next tutorial [Create a Form](How\ to\ Create\ a\ Form ), a student registration form will be created. This form will be accessed when you click on New Registration form button.

Clone this wiki locally