Is there a way for PageControlNavigator to dynamically load a page?

Question

Hello everyone,

Step 1: create new app based on the "Navigation App" template,

Step 2: go to the default.html

Step 3: the "contenthost" PageControlNavigator loads the pages/home/home.html by default

My question is, is there anyway to determine the "data-win-options" here via JavaScript. Specifically, what I want is to load "pages/login/login.html" when no user data is found, otherwise, load "pages/home/home.html". I maybe able to navigate to another page, but I don't really want to add another layer (home.html) in-between.

Thanks

Answer 1

You can do it on the "app.onactivated" handler on default.js. Within that handler you can do something like:

args.setPromise(WinJS.UI.processAll().then(function () {
var url = null;
var appdata = Windows.Storage.ApplicationData;
var firstTimeFlag = !appdata.current.localSettings.values["userDataPresent"] ? true : appdata.current.localSettings.values["userDataPresent"];
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
 if (!firstTimeFlag)
   url = Application.navigator.home; //initial page on the data-win-options
 else{
   url = "/pages/login/login.html"; //login page

 }
} 
else {
  if (!firstTimeFlag)
   url = Application.navigator.home; //initial page
  else
   url = app.sessionState.lastUrl;

}

return WinJS.Navigation.navigate(url);
}));

Just remember to put the "userDataPresent" flag on true when you have stored it on the login page, something like:

appdata.current.localSettings.values["userDataPresent"] = true;

Answer 2

Hi designrapture,

Also, the "home" page is defined as "data-win-options" in html markup, the code for navigating to the "home" page (when the app is starting) is in the default.js (in the onactivated event handler). And Ealsur has provided you an example on how to customize the default workflow logic so that you can navigate to a different page depend on some local setting (or other storage values).

also, you can take a look at the chatper 03 of the following free ebook which detailedly explains how the navigation is implemented and how it works:

#Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (First Preview)
http://blogs.msdn.com/b/microsoft_press/archive/2012/06/04/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-first-preview.aspx

In addition, personally I'd prefer another approach to implement the login screen you want. You can just let the home page gets loaded, but add code logic in the "ready" event of the home page to determine if login screen need to show or not. If need to show login screen, you can just use js code to display a <div> element which masks the entire screen (like a fullscreen model dialog) and your login UI is also displayed on the <div> element. By using this approach, you're not actually adding a dedicated page and don't need to involve different navigation stack in your application (you just how the div screen when necessary at the time home page loaded).

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.