How to show my user's data

Building a page is a combination of applying structure, making it look good and showing the correct data. That last past is done through our Data API, but not all data is the same. In this article, we'll show you how you can show a user's data.

Jip Volkers

Published: 19-10-2020

Last updated: 19-10-2020

The me-model allows us to hide or show user specific data or enable the user to use functionalities only possible when he or she is logged in. In this tutorial we will dive deeper into how and where you can use the me-model in your own application.

The me-model can be recognized by the user icon with an arrow when you click on variables and it can be used as one!

For this example, we're going to show the user's name when they log in!

Data model

Betty generates the User model automatically, this model is used for users within the Back Office of your application. This is why in order for the me-model to work you’ll need to create a webuser model, this model contains the data of the users that visit and login on your web page.

When a user registers himself this is where their account data will go to. A webuser model usually contains properties such as a name, email address and a password, just like in the example below.

 

Authentication profile

First, in order to work with the me-model we need to make sure the user is authenticated and logged in. To do this you’ll first need to create an authentication profile for the webuser. An authentication profile lets you define which model(s) you want to use as a webuser in the front end; how you'd like to call these web users and where unauthenticated users should be redirected to when they're trying to access a page which requires authentication. 

The welcome message should only be displayed when a user successfully logs in. This is why we need authentication, check out this link for more information regarding authentication profiles.

 

Login

Second, we need to give the user the option to actually log in, or else the authentication profile won’t do us any good. Building a login flow isn’t rocket science, but deserves an article on its own. If you want to learn how to create a login flow on your own make sure to check out this link.

 

That was the preparation part, let's display some data! 

Page

As said before, let’s use the me-model in the following case: create a welcome message when our user successfully logs in!

 

Add a DataContainer onto your canvas and set your authentication profile.

 

The next component that comes in handy is the Conditional component. This component will show something when a condition is met or hide it when not. So when our user is logged, in we can show the text ‘Welcome, Sam!’ for example. Drag a Conditional component onto the DataContainer. We can use the me-model to check if a user is logged in by checking if the user’s ID is bigger than 0. If that’s the case than a user is logged in and when not he’s not!

 

Now let's show the user's name! The Conditional component from before doesn't show anything, so let's use a Text component for that. Drag it onto your Conditional so it lands in it. This should also be visible in the Component Tree. Here we can write the welcome message for our user.

 

Once the user is logged in, the end result should look similar to this:

 

 

These are just two simple examples of how to include an authenticated user's data. We understand there are countless other ways of using this features, but the principle stays the same. This feature is still being further developed, so over time there will be additional options. We'll add them in due time.

For now, enjoy building!

×

Not sure where to start?

Click here to register and start learning
Register