Page History
...
- The Dynamic Kanban Board is a visual workflow management tool.
- It displays tasks or items in columns based on their status.
- Teams can track progress by moving items between stages.
- It supports drag-and-drop, creation, editing, and deletion of items.
- It is useful for Agile project management and task tracking.
Specs
Tokens
| Token | Description |
|---|---|
| displayName | Display name in structure panel |
| visibilityPolicySetId | Controls visibility based on policy sets |
| id | Unique identifier for programmatic access |
| title | Title text displayed at the top of the board |
| kanbanTitleTranslations | Localized board title text |
| iconsRules | Custom icons displayed based on conditions |
| paddingClass | Padding space around the board |
| elements | Columns of the Kanban board |
| getStatusesDataSourceId | Data source for status list |
| getStatusesHttpRequestParametersMap | HTTP parameters for status request |
| statusesStatusField | Field used as status identifier |
| statusesTitleField | Field used as column header |
| getKanbanItemDataSourceId | Data source for Kanban items |
| getKanbanItemsHttpRequestParametersMap | HTTP parameters for item requests |
| kanbanItemKeyField | Unique identifier for each item |
| kanbanItemsStatusField | Field used for item status |
| kanbanItemTitleTemplate | Template for item title |
| kanbanItemSubtitleTemplate | Template for item subtitle |
| kanbanItemDescriptionTemplate | Template for item description |
| statusPagination | Enables server-side pagination for statuses |
| statusPaginationPageSize | Page size for statuses |
| kanbanItemPagination | Enables server-side pagination for items |
| kanbanItemPaginationPageSize | Page size for Kanban items |
| allowUpdating | Enables item updates |
| updateKanbanItemDataSourceId | Data source for updating items |
| updateKanbanItemHttpRequestParametersMap | HTTP parameters for update requests |
| editDialog | Dialog used for editing items |
| allowAdding | Enables creation of new items |
| addDialog | Dialog used for adding new items |
| allowDeleting | Enables item deletion |
| deleteKanbanItemDataSourceId | Data source for deleting items |
| deleteKanbanItemHttpRequestParametersMap | HTTP parameters for delete requests |
| deleteConfirmation | Requires confirmation before deletion |
| events | Configurable component events |
| ON_INIT (Events) | Event on component initialization |
| ON_DESTROY (Events) | Event on component removal |
| dataTestId | Identifier for automated testing |
| enableAsHotspot | Enables guided tour hotspot |
| guidedTourHotSpotTitle | Title for guided tour hotspot |
| guidedTourHotSpotDescription | Description for guided tour hotspot |
| displayConditions | Conditions for component visibility |
...
- The Kanban board is organized into vertical columns that represent workflow stages.
- Columns are generated dynamically from the board datasource.
- Each column contains Kanban Items, which represent tasks or work items.
- Kanban Items are allocated to columns based on their status field.
(Configured in General Properties)
- displayName – Sets the display name of the component shown in the structure panel.
(Configured in Column Properties)
- elements – Defines the columns that make up the Kanban board based on status values from the data source. This is automatically populated from the status data source and configured via the column configuration options. The component generates appropriate KanbanColumn components for each status.
Datasource Board
(Configured in Datasource)
...
- kanbanItemsStatusField – Specifies which field from the Kanban item data source contains the status value.
- kanbanItemTitleTemplate – Defines the template for displaying the title of each Kanban item.
- kanbanItemSubtitleTemplate – Defines the template for displaying a subtitle on each Kanban item.
- kanbanItemDescriptionTemplate – Defines the template for displaying a description on each Kanban item.
Styling
(Configured in General Properties)
...
(Configured in Visibility Properties)
...
- statusPagination – Activates server-side pagination for the status data source.
- statusPaginationPageSize – Sets the number of statuses to load per page.
- kanbanItemPagination – Activates server-side pagination for the Kanban items data source.
- kanbanItemPaginationPageSize – Sets the number of Kanban items to load per page.
Actions & Variants
(Configured in Events)
- events – Configures the events that the component can trigger and respond to:
- ON_INIT (Events) – Triggered when the component is initialized.
- ON_DESTROY (Events) – Triggered when the component is removed from the DOM.
...
- visibilityPolicySetId – Determines the visibility of the component based on specified policy sets.
Links
- Figma: tba: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=14730-37787&t=ExcQFUXKvr1QdxTm-1
- Live style guide: tba
Guidelines
...
