Question about login create


First off, I have been searching the forum and reading the docs and have not been able to determine if what I am doing is correct or if I’m missing something in the docs etc so I figured I would post here in the hopes I might get some guidance.


Like a few others, I am wanting to have a default login screen. A simple ‘token’ determines if they have already logged in and if so it will show the main screen, otherwise it will prompt them to enter their credentials.


The workflow is fairly basic and I have seen a few posts on the topic but its still a little fuzzy and while I have gotten something to work it seem a bit clunky like I’m not doing it right.

Essentially my code is like this

var app  = new Framework7({
init: false,
root: '#app', // App root element
id: 'ConBop', // App bundle ID
name: 'Framework7', // App name
theme: 'auto', // Automatic theme detection
on: {
init: function () {
  console.log('App initialized');

pageInit: function () {


NOTE: This was based off another answer I saw on the forum for a similar issue

All is good here, we see that things are setup and on the ‘init’ call the create login that looks like this

function createLogin() {
  login_screen = app.loginScreen.create({ el: '.login-screen' });
// Close login screen;

Ok, so this calls the check login screen and then does a check, if there is a token, don’t show the login, however if their is a token show the login.

Again this works but where I feel things are clunky (for me anyhow) is that

  1. If I don’t set init:false when I define the app the ‘app’ variable will be undefined. Obviously this is because its not finished initializing however I am calling the ‘createLogin’ function via the ‘on: init’ property of the app declaration so my assumption would be that the on:init would mean it has been initialized?

  2. I understand the create login function can have an element that may be on a specific ‘page’ in this case the ‘index.html’ page however is their a way to route to a specific index page from the app.loginscreen.create? I didn’t see this option on the docs and I feel like this should be something that works however I did not see any working examples of this, instead only ways to use it as a ‘modal’ or a ‘button’ click page.

Again, I do have this working ‘as is’ but I wanted to just see if this is how I should be doing it or am I just missing something or not understanding etc.

Thanks for any help!

Well, there is no 100% right way of doing things. The “right” way is what is comfortable for you. If don’t feel comfortable then there is something wrong or can be changed :slight_smile:

You can just pass f7 instance to your createLogin function to be independant from init:false or init: true,

function createLogin(f7) {
  login_screen = f7.loginScreen.create({ el: '.login-screen' });;

var app = new Framework7({
  on: {
    init(f7) {

Didn’t really get what you mean here?

Hi nolimits4web,

Thanks for getting back to me!

I guess the being new to FW7 what is right and what is comfortable may not be the same :smiley: I’m ok with doing it the way I have it, I mean it does ‘work’ :slight_smile :slight_smile:

I tried passing the f7 to the create login but it not allowing me to do so on the init as how you have it, when I try and pass the

on: {

its throwing a syntax error

 Uncaught SyntaxError: missing ) after argument list

As for the last section, sorry, re-reading that it was not clear what I was getting at so I apologies. My main question was / is

When I create the login instance I do something like this

login_screen = app.loginScreen.create({ el: '.login-screen' });

That will target the ‘login-screen’ class and cause it to open up, but this is in context to the current page. In this case the ‘index.html’ page.

My question is, can this be routed to an actual ‘Login.html’ page or does the login page always have to be

  1. Inside the current page
  2. Created dynamically (as a string)

Again, thanks for getting back to me on this.