Create Home page
Last updated
Last updated
The home page is the first screen a user sees after they log in or if they're already logged in. In this tutorial this will be a simple page that displayed the currently logged in Name, Email and a button to logout.
User Interface
The home page contains the following elements
Title for the Welcome text
Paragraph text to display the currently logged in user Name
Another paragraph text to display the text Logged in as <email_address>
Button for logging out
The Name text is bound to the app variable currentUser.Name
The "Log in as ..." is the following formula
Whenever this page is mounted we want to retrieve the currently logged in user's information from our backend. We will use the User data resource that we created for retrieving a user from our database. Then we will save the response from the call to our currentUser app variable so that we can reference it on any page in the app.
The logic for the page is as shown below. For the Get record action
The Get record action is defined as follows. In the Resource name we select the User data resource. For the Authorization we use the following formula
And the for the id we select the app variable authUser.id
We then store the returned user into the currentUser app variable.
Finally we add the logic to the Logout button. When the logout button is clicked we first delete the persistedUser object from storage, then call our our logout endpoint, and finally return to the initial view (i.e. login screen).
We can simply delete the persistedUser object from storage without calling the logout endpoint and the app will still work the same. But technically the token will still be valid even if it has been deleted from the device. Calling the logout endpoint informs our backend that the user's login session has ended.
Here I could have connected the Return to initial view.
The End
