To-do List

Overview

This is a fully-responsive block that includes a to-do list UI for displaying a task name, description, due date, labels, and assignees. Users can check the box in front of the task name to mark a task as completed. No workflows are associated with this block.

Structure

When this block is added to a page, it is placed within a group called Blocks container 860 (do not rename) on the page. This group contains the responsive settings for all blocks.
Group Main header contains the title, description, sort by dropdown, and a button for adding a task.
Group Main task tile contains the RepeatingGroup Dummy for displaying a list of things.
Group Main empty state will be shown when there are no tasks to display.
You can add additional UI components to the group by resizing Group Main PLACEHOLDER. Please ensure the placeholder group is not overlapping with any other elements. Any overlapping elements will lead to an error in page responsiveness.

How to set up

Update the data source of Dropdown Sort by and add workflows to Button Add task.
Update the data source of RepeatingGroup Dummy and update all the elements within the repeating group to refer to current cell's data.
Add additional workflows to IonicIcon complete task.
Update the Multidropdown tags's data source (if applicable)
Hide or show any of the following groups depending on your to-do list needs:
- Group Inner task details - shows the task description
- Group Collapsible multidropdown - shows a list of tags
- Group Collapsible task assignees - shows a list of users assigned to the task
- Note: You can hide a group by selecting the group name and unchecking the box for This element is visible on page load
You can add additional UI components to the group by resizing Group content PLACEHOLDER. Please ensure the placeholder group is not overlapping with any other elements. Any overlapping elements will lead to an error in page responsiveness.

PreviousToggle Tabs Group NextTitle Group with Button and Filters

Last updated 4 years ago

Was this helpful?

Structure

When this block is added to a page, it is placed within a group called Blocks container 860 (do not rename) on the page. This group contains the responsive settings for all blocks.

Group Main header contains the title, description, sort by dropdown, and a button for adding a task.

Group Main task tile contains the RepeatingGroup Dummy for displaying a list of things.

Group Main empty state will be shown when there are no tasks to display.

You can add additional UI components to the group by resizing Group Main PLACEHOLDER. Please ensure the placeholder group is not overlapping with any other elements. Any overlapping elements will lead to an error in page responsiveness.

How to set up

Update the data source of Dropdown Sort by and add workflows to Button Add task.

Update the data source of RepeatingGroup Dummy and update all the elements within the repeating group to refer to current cell's data.

Add additional workflows to IonicIcon complete task.

Update the Multidropdown tags's data source (if applicable)

Hide or show any of the following groups depending on your to-do list needs:

Group Inner task details - shows the task description
Group Collapsible multidropdown - shows a list of tags
Group Collapsible task assignees - shows a list of users assigned to the task
Note: You can hide a group by selecting the group name and unchecking the box for This element is visible on page load

You can add additional UI components to the group by resizing Group content PLACEHOLDER. Please ensure the placeholder group is not overlapping with any other elements. Any overlapping elements will lead to an error in page responsiveness.