Select which page to load first

Taking the raw kitchen-sink project and making the following change to the end of the app.js file like this:

// Dom7
var $ = Dom7;

// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
  theme = document.location.search.split('theme=')[1].split('&')[0];
}

// Init App
var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  routes: routes,
  popup: {
    closeOnEscape: true,
  },
  sheet: {
    closeOnEscape: true,
  },
  popover: {
    closeOnEscape: true,
  },
  actions: {
    closeOnEscape: true,
  },
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  },
});

var startUrl = '/action-sheet/';
var wasLoggedIn = false;
var isLoggedIn = false; 
if (wasLoggedIn) startUrl = '/accordion/'; 
if (isLoggedIn) startUrl = '/'; 
//init view 
var mainView = app.views.create('.view-main', { 
  // specify which route to load on view init 
  url: startUrl
});

Does not work. If you set a breakpoint on the first if statement, when the debugger breaks the default page is already loaded. Setting the view like I did does not work and since (it certainly seems to me) I need to wait on app to be initialized before I use it, this this would be the correct way.

To make this to work:

var startUrl = '/action-sheet/';
var wasLoggedIn = false;
var isLoggedIn = false; 
if (wasLoggedIn) startUrl = '/accordion/'; 
if (isLoggedIn) startUrl = '/'; 
//init view 
var mainView = app.views.create('.view-main', { 
  // specify which route to load on view init 
  url: startUrl
});

as i stated above it is required to:

  • remove view-init class from main view in index.html
  • remove all data- attributes from main view in index.html
  • remove internal/inline/default page from main view in index.html

Here is a working git that is fully documented and works perfectly.

(Once you actually stop trying to use resolve, life gets a whole lot easier!)

Thanks for all your help! Now to get font-awesome to work! :wink:

1 Like

Will this open the index.html for a short while or will it take straight to the other html pages based on code logic?

@Karanveer_Singh I ended up going to the following method:

  // Index page
  {
    path: '/',
    name: 'home',
    on: {
      pageBeforeIn: () => {console.log("home page init - from routes"); }
    },
    redirect: function (route, resolve, reject) {
      if (appInfo.firstTime == true) 
      {
        // new user so welcome them
        console.log("rerouting to welcome screen");
        $$('.navbar').hide();
        $$('.toolbar-bottom').hide();
        appInfo.startPage = '/welcome/'; 
        resolve(appInfo.startPage);
      }
      else if(userInfo.state == false)
      {
        // not logged in but has been
        console.log("rerouting to signin/welcome back screen");
        $$('.navbar').hide();
        $$('.toolbar-bottom').hide();
        appInfo.startPage = '/signin/'; 
        resolve(appInfo.startPage);
      }
      else
      {
        // just doing normal stuff here
        console.log("rerouting to actual home page");
        StatusBar.show();
        $$('.navbar').show();
        $$('.toolbar-bottom').show();
        appInfo.startPage = '/home/'; 
        resolve(appInfo.startPage);
      }
    } 
  },

It never flashes the index.html page and always loads the appropriate page based on the conditions I test for.

1 Like

I tried it. But, it doesn’t log any of these lines. Neither pageBeforeIn nor inside redirect function, even if I put the console line before the logic. What could I be doing wrong?

You probably still have the home page in your index.html… you have to strip all that out.

Mine looks like this:

    <div id="main" class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">

so, i checked the latest documentation and made some changes here and there and it has worked. Need to implement the logic yet, but I think it should be doable now. This worked

If you’re using the git code, I never could get that to work correctly… I need to update the git code with the method I sent you a few posts back.

(and yes, I think that’s an F7 bug too (several actually) but I’m sure Vladimir will get too it.)

1 Like

@Karanveer_Singh The git code is updated. I changed the old method to the one I posted on March 9th AND I removed the transition as that too creates problems. All changes are in the routes.js. This is working in two code bases.

1 Like

yes, I have done that now. I am also using redirect function with empty div(view-main) in index.html. It’s working. Thanks!!!

1 Like

Awesome! Glad it works!