User Interface

EccTasks

EccTasks is the task list of the logged-in user - on the dashboard and on /tasks. It shows the tasks of all cases with search, sorting, paging, actions and automatic refresh.

TSX

 import EccTasks from "@/ecc/components/widgets/EccTasks";
import { EccTasksDetail } from "@/ecc/components/widgets/EccTasksDetail";

const [selected, setSelected] = useState<EccTask | null>(null);
const reload = useRef<() => void>();

<EccTasks scope="mytasks" onSelectTask={setSelected} selectedTaskId={selected?.id}
          onReloadRef={(fn) => { reload.current = fn; }} />
<EccTasksDetail task={selected} onRefresh={async () => reload.current?.()} />

Props

Prop

Type

Default

Description

`scope`	`"mytasks"` or `"all"`	`"all"`	start state of the toggle mine only / all
`onSelectTask`	`(task) => void`	-	a row was clicked
`onTaskAction`	`(task) => void`	-	an action of a row finished
`selectedTaskId`	`string`	-	keeps the selection across reloads
`pageSize`	`number`	-	rows per page
`onCountChange`	`(count) => void`	-	number of tasks found
`onReloadRef`	`(fn) => void`	-	gives you a function to reload the list

Columns

Column

Content

Key	business key of the case (copyable)
Case	`processInstanceDescription` of the case, else its process name
Start	start of the case
Task	name of the task
Actions	claim, release, open and edit - depending on the state of the task and the user

The list reloads every two minutes, after each action and when the toggle changes. Each row is an EccTask; the case is in rootProcessInstance.

The table is an EccTable and the toggle an EccBoolean.

Page

Relation

EccTasksDetail	detail pane for the selected task
Task Detail Renderer	how your app adds its own content to the detail pane
EccTable	the table the list is built on
Task Handling 🔒	how the business service selects and enriches tasks

Sections

EccTasks

Props

Columns

Related

On this page