How to work with Navigation App Template in Windows Store App with JavaScript

Recently I was attending a user group event and one young developer came to me with question, could you help me in finding out how to work with Navigation App Template in Windows Store App? So in this post I am trying to explain step by step working with Navigation App Template.

Very first start with creating a new project and select Navigation App from project template.

Image may be NSFW.
Clik here to view.

If you navigate to solution explorer you will find that there is one folder pages. Ideally all pages of the application should be (not must be) in this folder. By default there is one page called home page is there .

Image may be NSFW.
Clik here to view.

Let us stop at this point to explore default.html. In default.html you will find there is a PageControlNavigator. This control will host all the pages. Essentially Navigation Application Template follows singe page navigation mechanism. You will notice in data-win-option that there is home parameter and it is set to a page.

Image may be NSFW.
Clik here to view.

In this case home page or first page to be loaded in PageControlNavigator is home.html. Let us go ahead and design home.html. We will change title of the page and put a button. On touch of the button user will be navigated to another page.

Image may be NSFW.
Clik here to view.

Let us go ahead and run the application. You will get home.html loaded as home page with the title and button. You will notice that template has taken care of margin.

Image may be NSFW.
Clik here to view.

Let us say you want to navigate to Page2.html on click or touch of button. For that very first task you need to do is to add Page2.html in the project. For that right click on the pages folder and add a new subfolder called page2. Then right click on the newly added subfolder page2 and add a new item. Choose Page Control to add as new item.

Image may be NSFW.
Clik here to view.

After adding new page control solution explorer should look like following image. In the pages folder you can see that there is one more subfolder page2 with page2 page control.

Image may be NSFW.
Clik here to view.

Now we need to write code to navigate to page2.html on the click event of the button. Open home.js and type this code to navigate. You can navigate from one page to another page using WinJS.Navigation.navigate function. This function takes two parameters. First parameter is address of the page to navigate and second parameter is data to be passed while navigating.

element.querySelector("#btnnavigate").onclick = function (args) {
 WinJS.Navigation.navigate("/pages/page2/page2.html",
 { data: "data to other page" }
 );
 };

At this point you should able to navigate to page2 from home page. You can find that template has taken care of back button and margin in page2.

Image may be NSFW.
Clik here to view.

Above we are passing “data” while navigating. Now we need to write some code on page2.js to consume data being passed. Let us replace the title of the page2 with the data being passed. We will write this code in ready function of page2.js.

ready: function (element, options) {
 // TODO: Initialize the page here.
 var datapassedhere = options.data;
 element.querySelector(".pagetitle").innerText = datapassedhere;

Now on running application you will see page2 title has been replaced with the data being passed from home page.

Image may be NSFW.
Clik here to view.

In this way you can work with Navigation App template. I hope you find this post useful. Thanks for reading.