2024-05-21 12:03:57 -04:00

75 lines
2.0 KiB
Markdown

---
Title: Task Header component
Added: v2.0.0
Status: Active
Last reviewed: 2024-05-21
---
# Task Header Component
Shows all the information related to a task.
![adf-task-header](../../docassets/images/adf-task-header.png)
## Basic Usage
```html
<adf-task-header
[taskDetails]="taskDetails">
</adf-task-header>
```
## Class members
### Properties
| Name | Type | Default value | Description |
|------------------|----------------------|---------------|----------------------------------------------|
| formName | `string` | null | The name of the form. |
| showClaimRelease | `boolean` | true | Toggles display of the claim/release button. |
| taskDetails | `TaskRepresentation` | | Details related to the task. |
### Events
| Name | Type | Description |
|---------|---------------------|---------------------------------------------------|
| claim | `EventEmitter<any>` | Emitted when the task is claimed. |
| unclaim | `EventEmitter<any>` | Emitted when the task is unclaimed (ie, requeue). |
## Details
The component populates an internal array of
[CardViewModel](../../core/components/card-view.component.md) with the information that we want to display.
By default all properties are displayed:
- **_assignee_**
- **_status_**
- **_priority_**
- **_dueDate_**
- **_category_**
- **_parentName_**
- **_created_**
- **_id_**
- **_description_**
- **_formName_**.
However, you can also choose which properties to show using a configuration in `app.config.json`:
```json
{
"adf-task-header": {
"presets": {
"properties": [
"assignee",
"status",
"priority",
"parentName"
]
}
}
}
```
With this configuration, only the four listed properties will be shown.