Webpart: Task Overview

The Task webpart can be used to display tasks from the WorkPoint system.

The webpart is configured to be associated with a specific task list, which it will then display information from.

The tasks shown by the webpart depend on the view selected for the webpart. These views are created on the task lists themselves, and can then be selected when configuring the webpart.

The Task Overview webpart can help create an overview of e.g. late tasks, such that users in a more straight-forward way can be informed if actions need to be taken.

The webpart can be configured to display only as a list, or display as a list with a graphical filter panel.

An example is shown in the following image:

In this example, we have five tasks on a project entity on the solution.

Two of the tasks are already completed (denoted by the checkmarks and title strikethrough), two of them are not yet started, and one is in progress.

The colored boxes above the list of tasks are the graphical filter panel. Clicking one of the task stages from the panel toggles whether tasks from that stage should be shown in the list. Inactive stages are shown as slightly transparent boxes, and active stages are shown as opaque circles. The numbers inside the boxes represent the number of tasks in that stage.

These numbers depend on the view selected for the webpart, i.e. the numbers in the boxes relates to how many tasks from the selected view are in the specific stages.

An example is shown in the following image:

In this example, tasks which are in the "Completed" stage have been filtered from the list. Note that all other stages are represented as opaque boxes in the filter panel, while the filtered stage is transparent. Also note that the webpart displays the "3/5 tasks are shown" text to let the user know that 2 tasks have been filtered.

Please refer to the following table to see the license requirements for the Task Overview webpart:

Additionally, the Task Overview webpart requires the WorkPoint solution uses Modern UI.

In this configuration case, we will set up the Task Overview webpart to show items from the "Overview" view of a task list on a Project entity in WorkPoint. We want the webpart to show both the filter panel and the task list.

We start by adding the webpart to the page on which we want it to be displayed:

1. When editing the page, we click the "+" button on the location where we want the webpart to be displayed.
2. We then perform a search for the task webpart.
3. To add the webpart, we click it from the list.

The webpart is now added, and is ready for configuration:

4. To configure the webpart, either click the "Edit" icon in the left side of the webpart, or the "Configure web part" button on the webpart itself.

5. In the configuration side panel, we grant the webpart a title of "Tasks". This title will be displayed on top of the webpart content on the page.
6. For "Task list" we select the Task List on the project we want to view items from in the webpart. If your entity has multiple task lists, they will all be selectable from this dropdown menu. The selected list determines which items to show, and which views are available for further configuration.
7. In the "Status field" picker, we select the field on our Task List which keeps track of the status of each task. In this example, we have a choice field called "Progress" with progress options, such as "Not started", "In progress", and so on, so we select this field.
8. In the "Due date Field" picker, we select the field on our Task List which contains due date information about our tasks. In this example, that field is simply called "Due date".
9. In the "Assigned to" picker, we select the field on our Task List which contains information about whom the tasks are assigned to. In this example, that field is simply called "Assigned to".
10. In the "Task start status" picker, we select the choice from the field we selected in "Status field" which denotes the starting state of our tasks. In this example, that choice would be the "Not started" field.
11. In the "Task Complete status" picker, we select the choice from the field we selected in "Status field" which denotes the state of our tasks when they are commpleted. In this example, that choice would be the "Completed" field.

At this point, no tasks yet appear in our task list. That is because we need to add some task statuses to our webpart:

12. In the "Field mapping" section of the configuration side panel, we click "Add task status".

A task status is now added to the configuration and we can configure it:

13. We first select the first stage of our task progression. In this case, our first stage for tasks to be in is the "Not started" stage.
14. We can view the color of the stage in the circle, and we can pick a different color by clicking the color palette icon.
15. We can add more task statuses to the configuration by clicking the "Add task status" button again, but assuming the task list contains items which are in the status we just added, these items should now appear in the webpart:

We will now add the remaining task statuses from our task list at statuses in the webpart as we just did with the "Not started" status:

All status choices have now been added to the configuration.

16. You can re-order the statuses by clicking the up- or down chevrons (The first status cannot be moved up, and the last status cannot be moved down).
17. You can delete a status from the configuration by clicking the trashcan icon.
18. Note that when all statuses have been added to the configuration, the ability to add additional statuses is disabled.

Now, assuming that no stages are filtered, we should be able to view all tasks from our selected task list in the webpart:

Now we need to set the webpart to use the "Overview" view we have on our Task List:

19. In the bottom of the configuration side panel we click and expand the "Display settings" menu.
20. In the "Display as" section, we select "Filter panel and task list". The options are:
    • Filter panel only: Sets the webpart to only show the status boxes.
    • Task list only: Sets the webpart to only show the task list.
    • Filter panel and task list: Sets the webpart to show both the status boxes and the task list.
21. For the selectors, we enable all options. These are:
    • Show view selector: Enables the view selector on the webpart. This can be used to switch between the views from the selected task list. The tasks shown in the webpart will be the ones available in the view selected.
    • Show my tasks button: Enables the "My tasks" button on the webpart. This can be used to filter out all tasks which are not assigned to the current user.
    • Show overdue tasks button: Enables the "Show overdue tasks" button on the webpart. This can be used to only show overdue tasks in the webpart.
    • Show pull on status: Makes it so that statuses in the task list are shown as "pills" instead of plain text. This is cosmetic and can provide a modern feel to the task list.
22. In the "View" section, we select "Specific view" and select the "Overview"-view as per the case we are working from.

With these settings, our webpart now looks like the following image:

This concludes the configuration of the Task Overview webpart.

For an end user guide for the Task Overview webpart, please visit this article.