All Collections
Use-case guides
Displaying data
Showing a list of your own tasks
Showing a list of your own tasks

Use case 9 of a 9 part use case series. In this article, you'll learn how to show a list of tasks that are yours.

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.

Also, we need to have an authentication profile and a login page, so that we can follow the login flow to verify the web user.

Let’s assume those preparations have been met for now.

Use a data container with an authentication profile

Drag a data container on the page. This time we choose another option in the modal, the logged-in user:

Configuring a data container: adding an authentication profile

And we select our authentication profile here.

Select the data container after it has been dropped on your page. You should see the authentication profile option in the list of options. It looks like this.

'Webuser' authentication profile

This is the authentication you just chose in the modal that popped up.

Add data

For showing data, we will use a data table. Remember, a data container does not show any data itself. That needs to be done with other components inside it.

Now we will use a data table for showing several properties of our tasks model based on the current web user. That is you because you logged in.

Ok, here we go!

We drag a data table on our data container and a modal pops up.

Configuring a data table

We already see our webuser model here, because this data table is in the context of our data container which has the webuser model attached to it.

But we choose our tasks model because inside this table we want to see data that belongs to our data model Tasks.

After selecting our Tasks model, we choose which properties we want to see in our table. Each property will be in its column.

Configuring a data table: adding columns

We added Webuser-> email to verify we only see the tasks assigned to the logged-in user. That is not something that is needed.

When pressing save, the data table is created.

Data table is created

Now for the important part, because when pressing save, all tasks will be listed.

Alright, just press play and see what happens, you will see something like this:

Data table in the front end view

And remember, you need to be logged in as a webuser!

Here we see all tasks for all our webusers, which is not what we want. We only want to see the tasks of the logged-in web user.

So we go back to our data table and select it. Then look for the filter option in the list of options. It should look like this:

Data table options

We will create a filter where we say, give me tasks where the webuser ID equals the ID of the current webuser.

So when we press Create filter, we will add a filter row like this:

Creating a filter to the selected data model

On the right side, we see our webuser model. In there, we can select the ID property:

After selecting, press Apply and then the Save button. The filter is now saved.

When pressing the play button, we now see that the list of tasks is filtered based on our current webuser.

List of tasks in the front end

Now we can play around with this table. We know we have the right data. But we can for example order it by the Planned property, to see which tasks need to be finished first.

We select our data table and look for the Order by option in the list of options:

Data table options

We use the Planned property and set the ordering to ASC, which is the default. Small numbers first, large numbers later.

Data table options

Now when we press play, we will see this:

A list of tasks in the front end

Now we see all tasks ordered by the Planned property. But now we only want to see the tasks that are either in Todo or In process. Let’s assume Testing is handled by someone else for now, and Done is done. So we don’t have to think about that.

We go back to our data table and select the filter option. It should look like this:

Data table options

When we press the Update filter button, we see the modal with the current filter:

Creating a filter to the selected data model

Now what we need to add is an OR filter based on the status Todo OR In progress.

We can’t do that by adding 2 filter rows, because then the OR would also count for the webuser ID.

But what we need here is web user ID equals logged in web user ID AND Task status is either Todo OR In progress.

So we add a new filter group and add those 2 extra filter rows in there. And we use the OR operator for that group.

It should look like this:

Creating a filter to the selected data model

We save this filter and press play again. We should see a table like this:

Data table with tasks in the front end

Ok, now we’d like to see all our tasks on one page. So we will change the default 5 per page option to 25 for now. Just for demo purposes.

We select our data table and look for the rows per page option in the list of options:

Choosing rows per page

And change that drop down to 25.

Choosing rows per page

Now when we press play we should see a table like this:

Data table in the front end

Now we see that we have work to do, so this is the end of this use case. Good luck with building your own tasks overview!

Did this answer your question?