All Collections
Use-case guides
Displaying data
Showing a list of users and their tasks
Showing a list of users and their tasks

Use case 6 of a 9 part use case series. In this article, you'll learn how to show a list of tasks with their corresponding user.

Updated over a week ago

Before we start

Before we start, we will need some data. We’ve prepared the following tasks to show you how this works:

A list of tasks

There is a belongs to relation between the tasks data model and web user data model.

This means a task can be assigned to only one web user. The other way around, a web user can have multiple tasks assigned to him/her.

Create a datalist of web users

When you drag a data list component on the page, you will see something like this:

Data list component

A data list can be attached to a data model just like the data container and data table we saw in the cases before this one. Every component dragged in the data list will be repeated for every record found in the data model the data list refers to.

We select the data list and take a look at its options:

Data list component options

For this use case we will select the web user model but without filter, because we want to see all web users.

Data list options

Now that we have selected our model, we still need to drag in some components to show the data. But you can press play, just to see what this will have as result:

Alright, so we already know there are 2 web users by looking at the pagination. We know that fetching the records succeeded. So now we will drag a component in the datalist to show the email address.

Drag a text component inside the list and select it:

Text component

The options are shown on the left:

Options within a text component

In this content option we can select the email address property from our webuser data model:

Adding variables to the text component

The content option will now show this:

Adding a model variable to the text component

And on our page, we will see this:

Data list component with a model variable shown within the page

See that we show that whatever you drag in the data list, will be repeated for every record found in the data model.

Now when we press plat we will see this:

You probably guessed that already, but it is nice to see that it works!

Alright, now to show another list, we have to drag another data list inside our data list.

It will look like this:

This is just for demo purposes only, so we don’t worry about styling here.

Alright, when we select our new data list we will select the tasks model. This is needed because at the time of writing we don’t allow the direct selecting of relations yet.

So selecting our model will look like this:

Selecting a model for a data list

Remember, a datalist doesn’t show data itself, so here we will drag a new text component.

In the content option we will select the title of the task:

Text component options

You will notice that now we don’t only see the tasks data model, but also the webuser data model because in the context of this text component, both models can be found.

For a better view of what is what, we can set the alignment of this list of tasks to the right:

Text component options with a model variable

Now when press play, our page looks like this:

Okay, almost there. But you see a total list of tasks for every webuser found. This is not what we want, we want to see the tasks per user.

We go back to our datalist based on the tasks model and create a filter.

The data list shows these options:

Data list component options

And we press Create filter.

Here we will select the web user email on the left-hand side:

Creating filter on a data model

We keep the comparator equals.

Now on the right-hand side, we get something interesting. We want to filter on the email address of that record. We press the purple x button and select webuser and the email address property.

After doing that your filter looks like this:

Selecting a placeholder rows in options

Now press Apply and then press play to see the result:

Now, this looks a little strange of course with all this pagination, so let’s remove the pagination from the data list which shows the tasks.

We select the data list to see its options. We use this setup for now:

So we NEVER show the pagination.

We will show max of 50 rows per page, in this case, more than sufficient, because you have seen our data (we only have 17 tasks in total)

And we will show 5 placeholder rows. This is for the builder side only, else you would see 50 repeated items per row, which is not that pleasant to edit.

Alright, now when we press play you will see this:

A list of users and tasks in the front end

Next up, show a list of users and tasks with a certain status.

➝ Next article: Showing a list of tasks belonging to a user with a certain status

Did this answer your question?