Select which page to load first

My app has three states:

  1. New install
  2. Installed but logged out
  3. Installed, logged in and ready to use - this is most common.

When the app starts up I can tell if it’s a new install because “things” will be missing in which case I need to display a “Welcome” page that lets the user start the onboarding process by displaying "./pages/onboarding.html/.

If those “things” are present but the logged in token is missing then I need to show a “Welcome Back” page that lets the user go over to the login page by displaying “./pages/welcome-back.html/”.

Otherwise I do nothing and just let the normal index/home page get displayed.

I will know which page I need before the onDeviceReady event has completed.

So my questions is this: How do I load in alternate pages BEFORE the index page is displayed? (We don’t want the home page displayed and then a screen change to a “welcome” page.)

I don’t know if this is the right way. But I did it like this:

function loadApp (resolve) {
  switch (condition) {
    case 'something':
      const vueComponentSS = () => import('./views/login/LoginSS.vue')
      vueComponentSS().then((vc) => {
        resolve({ component: vc.default })
      })
      break
  }
}
// your async route
async async (routeTo, routeFrom, resolve, reject) {
        loadApp(resolve)
  }

Its a portion of my code. So it has parts missing. But it just to give you an idea on how I made it.

Since I’m not using vue, a lot of that is lost on me. I figure there must be a way because @nolimits4web seems to have thought of most everything else! LOL

I’ve noticed on the kitchensink demo that the routes.js has the following that never displays:

    on: {
      pageBeforeIn: () => {console.log("home page init"); }
    }

I was thinking I would pickup the pageinit event and redirect from there but the “home” page is already displayed (without the icons) when I get the event so I need to trap some event way prior to this.

I use Vue. But don’t mind that. Its just an async route component.

routes = [
  {
    path: '/foo/',
    async(routeTo, routeFrom, resolve, reject) {
      if (userIsLoggedIn) {
        resolve({ url: 'secured.html' })
      } else {
        resolve({ url: 'login.html' })
      }
    }
  }
]

https://framework7.io/docs/routes.html#async-route

If you also load the initial home page from somewhere -> it is not in your index.html file and when home page route has url, component, componentUrl or templateUrl you can just send different main view’s url:

<!-- empty main view in your index.html and without "view-init" class -->
<div class="view view-main"></div>

In your routes

var routes = [
  {
    path: '/',
    url: './home.html',
  },
  {
    path: '/onboarding/',
    url: './onboarding.html',
  },
  {
    path: '/welcomeback/',
    url: './welcomeback.html',
  },
]

In your main app.js where you init main view

var startUrl = '/onboarding/';
if (wasLoggedIn) startUrl = '/welcomeback/';
if (isLoggedIn) startUrl = '/';

//init view
var mainView = app.views.create('.view-main', {
  // specify which route to load on view init
  url: startUrl
});
1 Like

I’m trying both methods. I’m trying @pvtallulah’s first because his is a “set it and forget it” process. If the user logs out, we take them to the login screen (they may have multiple accounts). If they try to navigate away, their only option is a swipe-right and that takes them back to the home page and this will catch that and redirect them to the welcome-back.html.

BUT I can’t get it to work!

Inside my routes.js I added the async()

  {
    path: '/',
    url: './index.html',
    name: 'home',
    on: {
      // this console.log function ONLY gets called when returning to '/' from another page and not ever during app init
      pageBeforeIn: () => {console.log("home page init"); }
    },
    async(routeTo, routeFrom, resolve, reject) {
      // this causes a break only when the routes.js file is loaded
      // debugger;
      // this never gets displayed - not even when returning to '/' from another page
      console.log("rerouting");  // the rerouting message never gets displayed.
      if (!bFirstTime)
      {
        resolve({ url: './pages/onboarding.html' })
      }
      else if(!bLoggedIn)
      {
        resolve({ url: './pages/welcome-back.html' })
      }
    }    
  },

When I say it doesn’t work, I mean I get nothing. As noted in the code, I tried setting a break point or even adding the ‘debugger;’ statement before the first if() inside the async call but it never breaks. The only break that happens in when routes.js is loaded. The console.log function never displays anything either… pretty strong indications the async function isn’t getting called

Heck, I even tried “async: function(…){}” instead of “async(…)” just incase the docs were broken but still nada (no errors either);

I think that this

url: './index.html'

Should also be resolved. So remove it from the route.
So:

  {
    path: '/',
    name: 'home',
    on: {
      // this console.log function ONLY gets called when returning to '/' from another page and not ever during app init
      pageBeforeIn: () => {console.log("home page init"); }
    },
    async(routeTo, routeFrom, resolve, reject) {
      // this causes a break only when the routes.js file is loaded
      // debugger;
      // this never gets displayed - not even when returning to '/' from another page
      console.log("rerouting");  // the rerouting message never gets displayed.
      if (!bFirstTime)
      {
        resolve({ url: './pages/onboarding.html' })
      }
      else if(!bLoggedIn)
      {
        resolve({ url: './pages/welcome-back.html' })
      } else {
        resolve({ url: './index.html' })
      }
    }    
  },

Apply you logic to show index.html

Yep. That worked… partly. It didn’t work on startup / reload (in chrome) but when I navigated away from the home page and then back, async was indeed called and worked as expected.

I’m suspecting this make take a combination of both methods.

Ok. Will try to make a fiddle when I’m at my PC.

i made this simple jsfiddle, change it to your needs.

1 Like

I think the problem with this working when the app starts is that the “home” page is already displayed when the framework7 code is loaded (it’s loaded at the bottom in kitchen sink). It seems as though the async() code simply never gets called on startup but it seems to work fine when returning home from any other page.

I tried loading the framework7 code first but that was a bust… so now I’ll try to implement @nolimits4web’s method as well.

I added the code that @nolimits4web suggested and that didn’t work as I still get the same home screen. I cut kitchen-sink (core) back to just a few relevant pages and posted the project on github with all the files I’m including (jquery and a few dummy files I’ve written). Hopefully one of you can tell me what I’m doing wrong.

I will try to take a look tonight and see if I can help you.

@pvtallulah thanks for that but, at this point, I’m suspecting a bug.

At the end of the .view .view-main there’s a ‘data-url=’ and what ever is in that string is what gets loaded first no matter what startURL or async() is specified. If you remove data-url from the div then absolutely nothing gets loaded.

Here’s what I know:

  1. async() only gets called when navigating BACK to the home page, it doesn’t get called before the page is loaded.
  2. startURL get’s ignored in the app init
  3. data-url=’’ attached to view-main takes precedence
  4. you can’t use page:mounted to intercept and then load a new page via
    app.views.main.router.navigate(’/onboarding/’); parts of the home page are already visible anyway
  5. before app instance is initialized with Framework7 you can override the routes[0].url with the desired url and get the correct page loaded and after that page is loaded restore routes[0].url with its original value but that breaks any link navigation to href=’/’ but you can navigate to any other page and then back to ‘/’ as that appears to be handed by the async() code.

Unless, there’s a bug in my code, which I admit is a real possibility, this functionality as you and Vladimir outlined early on, is broken.

Please post whole related HTML and JavaScript code: your initial views layout, your app and views init

about 5 posts back on Dec 20 at 5:59p I provided a link to a git that has everything (I figured that would be easier).

You have both async and url on your route, only one at a time can be used, no sense to use both

There is no such url app parameter

It is not supported because there is no sense to load something just load then something different. There is route’s beforeEnter hooks for this case to prevent page loadings

You have both async and url on your route, only one at a time can be used, no sense to use both

Doesn’t matter. Doesn’t work either way.

There is no such url app parameter

StartPage/StartURL is a variable as you suggested. Variable gets ignored as does hard coding a path or url

It is not supported because there is no sense to load something just load then something different. There is route’s beforeEnter hooks for this case to prevent page loadings

If async only gets called when returning to ‘/’ and not before ‘/’ is loaded then there needs to be some mechanism to override this on the first pass.

I spent a lot of time trying to figure this out, I’ve tried all I can find to try and tried your and @pvtallulah’s suggestions. I’ve read the docs and scanned the forums. If it doesn’t work then please tell me. If it does work then please show me how to make it work.

just test your code,
the only thing i did was comment the url line on route

{
    path: '/',
    // url: './pages/home.html',
}

then, every time async is called, at ferst load, going back also.
i dont understand your problem.
i test it on chrome