The Tasks component displays action items or assignments to complete for the current work case. The CaseView component has a dedicated region for Tasks.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

The Tasks component renders within a Card with props for headerText and count, which will render a Count badge representing the number of tasks in the list. A headerVisual may be passed, which is ideal for Avatars or Icons. The visual will render before the headerText. A headerSecondary region is reserved for content just below the headerText. This can be additional information about the set of tasks, or some sort of filter for the list.

The Tasks component will render a list of items that contain name, avatar, meta, and actions regions. These regions compose each of the list items rendered on the Tasks component. Each item has a content prop that, if not null, will take full control of the component's visual region. The suggested usage of the component is to set an item's content to some React Node when the user interacts with that item's actions. This content is likely to be a Form.

List behaviors

If the list of items is empty, the component will render any content passed to the emptyPlaceholder prop. This is an ideal usage of the EmptyState component. If there are no items whose content is defined, and the count provided is greater than 3 with the count being more than the number of items provided, a Show more Button will render at the bottom of the list. When toggled, an onExpandToggle callback function will be triggered, allowing for additional items to be passed in. If the count matches the number of items provided, a Show less Button will collapse the list back down to 3 items.

Try selecting different workgroups from the dropdown within this demo to visualize task lists of varying size.

emptyPlaceholder*ReactNodeContent to render when the list is empty.
headerText*stringHeading text to render at the top of the list.
items*TaskItemProps[]An array of TaskItemProps to generate the list.
number |null 
Integer representing the total count of tasks.
headerSecondaryReactNodeA region for supplemental task list info or controls.
headerVisualReactElementA visual element i.e. (Avatar | Icon) to accompany the header text.
onExpandToggle() => voidCallback for when to show more/less button is clicked. Lists greater than 3 items will display the show toggle button in its footer.