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.
[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.
[IMAGE PLACEHOLDER: Kanban board structure showing board datasource, items, and data allocation with title, subtitle, and description on cards]
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.
[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.
...
allowDeleting – Enables item deletion functionality.
deleteKanbanItemDataSourceId – Data source ID for deleting Kanban items.
deleteKanbanItemHttpRequestParametersMap – Parameters for delete requests.
deleteConfirmation – Requires confirmation before item deletion.
...
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
...
The component maps field names as specified in the configuration, making it adaptable to various API response formats.
Usage
- Use the board to visualize work items by status.
- Choose it when users need to move items between stages via drag-and-drop.
Sizing & Layout
- Keep column headers short and scannable.
- Make cards concise using title, subtitle, and description templates.
- Add spacing around the board only through its padding control.
States & Feedback
- Use conditional icons on cards to communicate states (e.g., priority, blocked) rather than color alone.
- Require a confirmation step before deletions.
Interactions & Events
- Run setup on initialization (e.g., prefetch) and release resources on destruction using lifecycle events.
- Use the built-in dialogs to create and edit items when enabled.
Visibility & Authorization
- Show or hide the board based on contextual display rules (e.g., selected project).
- Apply policy-based visibility so unauthorized users do not see the board.
Content & Localization
- 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. |
Accessibility
...
- Provide a concise, localized board title so assistive tech announces meaningful context.
- Keep card content short and structured using title/subtitle/description templates.
- Convey state with icons triggered by rules (avoid color-only meaning).
- Include a confirmation step for destructive actions.
- Keep interactions predictable via lifecycle initialization/cleanup.
- Provide stable testing hooks/identifiers for automated checks.
- Reduce cognitive load on large boards using pagination for statuses and items.
- Hide irrelevant or unauthorized content using the board’s visibility controls.
