Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Kanban Board
Link to Figma: tba
Overview
- 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.
[IMAGE PLACEHOLDER: Kanban board showing tasks organized in columns with drag-and-drop interaction] 
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)
- displayName – Sets the display name of the component shown in the structure panel.
(Configured in Visibility Properties)
- displayConditions – Defines conditions for displaying the component based on context values or expressions.
...
- 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.
[IMAGE PLACEHOLDER: Kanban board with styled display name, title with translations, icons, padding, and pagination behavior visualized]
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.
(Configured in Datasource Properties)
allowUpdating – Enables item updating functionality.
updateKanbanItemDataSourceId – Data source ID for updating Kanban items.
updateKanbanItemHttpRequestParametersMap – Parameters for update requests.
[IMAGE PLACEHOLDER: Kanban board showing update action with drag-and-drop and edit dialog]
allowAdding – Enables item creation functionality.
addDialog – Dialog used for adding new Kanban items.
[IMAGE PLACEHOLDER: Kanban board showing add action with item creation dialog]
allowDeleting – Enables item deletion functionality.
deleteKanbanItemDataSourceId – Data source ID for deleting Kanban items.
deleteKanbanItemHttpRequestParametersMap – Parameters for delete requests.
deleteConfirmation – Requires confirmation before item deletion.
[IMAGE PLACEHOLDER: Kanban board showing delete action with confirmation dialog]
Tests
(Configured in Testing Hooks)
...
- visibilityPolicySetId – Determines the visibility of the component based on specified policy sets.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=14730-37787&t=ExcQFUXKvr1QdxTm-1
Guidelines
Technical Documentation for Backend Developers
...
- Provide a localized board title; keep it short and task-focused.
- Localize on-card text by feeding localized fields through the templates.
- Expose stable identifiers for authoring and test automation without affecting user-facing text.
Dos & Don’ts
| Do | Don’t |
|---|---|
| Localize the board title for all supported locales. | Hardcode an English-only heading. |
| Use conditional icons on cards to communicate state. | Rely on color-only cues. |
| Persist column moves via the board’s update mechanism. | Assume drag-and-drop alone saves changes. |
| Ask for confirmation before deleting an item. | Delete immediately without a safety check. |
| Enable pagination for statuses and items. | Load everything at once on large boards. |
| Build columns from the statuses source fields. | Hardcode column names or IDs. |
| Keep cards concise using title/subtitle/description templates. | Put long paragraphs into the title. |
| Hide the board when out of scope or unauthorized. | Show it and rely on backend errors to block action. |
...
