Mobile Apps: FW7 Login Screen and Other Pages

Wappler General How To
#1

I have nearly completed my mobile app using Bootstrap and it works great. But I’d feel more comfortable of it getting approved on the App Stores if it was in FW7. So I spent the last three days going over FW7 docs and trying to build something.

To get started I really need to know two things:

1: How to build a login page. Heck, I can’t even build a login form let alone a page.
2: How to create other pages and link using routing to make a single page app.

I think if I can get help with these two things I can be well on my way. But right now, I’m stuck.

I’ve tried copying and pasting code from the docs site and it either doesn’t work (looks different for example) or breaks the Wappler App structure.

There just is no documentation for using FW7 in Wappler. It seems that FW7 in App Connect is different than in the FW7 docs.

Can someone point me in the right direction to get me started? Much appreciated in advance.

https://framework7.io/docs/login-screen.html

#2

Actually it is very easy:

  1. Make a new content page
  2. Link it to the main page by setting the “Head Page” property to point the the main page
  3. In the Page Content region add a Server Connect Form for the login
  4. As Action of the Server Connect Form choose your Login Server Connect Action from the Server Connect API site.
  5. Make sure on the other Server Connect API Site when defining the login action with the Security Provider to enter the value of 1 as remember field - as we want always to remember the login.
  6. On the login page within the form, add a List
  7. In the list add the login input controls like user name and password and a login button
  8. Add a dynamic action click on the button to submit the login form
  9. On the “unauthorized” dynamic event of the Server Connect form - add action show alert from the App Root. Enter text like “Invalid Username or Password”
  10. On the “success” dynamic event of the same Server Connect Form, add action from the View to go back to index. If your index have some server connect actions that are dependent on the logged in user, you might want to reload them here.

So that is about it :slight_smile:

Maybe @teodor can make more detailed docs about this.

I will also see if we can add a predefined login page to choose from, so you don’t have to make it all by yourself. But just add it.

#3

Thanks George, I will start another new fresh project and give this a shot. How do I link to the login page?

#4

Just as any other link to content pages, make sure it is in the routing manager and then just link to it. Use tge routing manager icon to pick up on any links

#5

Alright, I will try again. In about a half dozen test sites I have never gotten a route/link to work in FW7.

#6

I finally have a login form. However it doesn’t work. I have filed a bug report.