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.

Before we start

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

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:

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.

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.

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.

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.

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:

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:

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:

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.

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:

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

Now when we press play, we will see this:

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:

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

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:

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

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:

And change that drop down to 25.

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

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!