Page History

...

General Properties

• displayName  - Sets the display name of the component shown in the structure panel. For example, "Development Tasks Board" allows for easy identification of the component's purpose in the component structure.

• visibilityPolicySetId  - Determines the visibility of the component based on specified policy sets. For example, setting to "teamMembersOnly" restricts the Kanban board to authorized team members only.

• id  - Specifies a unique identifier for the component used for programmatic access. For example, "sprint-tasks-kanban" enables targeted manipulation of this specific Kanban board component.

Visual Properties

• kanbanTitleTranslations  - Sets the title text displayed at the top of the Kanban board, with support for multiple languages. For example,  {"en-US": "Development Tasks", "de-DE": "Entwicklungsaufgaben"} ensures ensures proper localization of the board title for different users.

• iconsRules  - Defines custom icons to be displayed on Kanban items based on specified conditions. For example, you can configure a "high-priority" icon to appear on tasks with priority level above 8, providing visual indicators of important items. These rules can include thresholds for displaying different icons based on values in the data.

• paddingClass  - Configures the padding space around the Kanban board using CSS classes. For example, "p-3" adds medium padding on all sides of the component for better visual spacing.

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 Properties

• getStatusesDataSourceId  - Specifies the data source ID for retrieving the list of status columns for the Kanban board. For example, "api/workflow/statuses" would fetch the available workflow states like "To Do", "In Progress", and "Done".

• statusPagination  - Activates server-side pagination for the status data source. When enabled, the component will request statuses in pages rather than all at once.

• statusPaginationPageSize  - Sets the number of statuses to load per page when status pagination is enabled. For example, setting to "1000" ensures all standard statuses are loaded in a single request.

• getStatusesHttpRequestParametersMap  - Configures HTTP parameters for fetching status data, including query parameters and path parameters. This object maps additional parameters needed for the status data request.

• statusesStatusField  - Specifies which field from the status data source should be used as the status identifier. For example, if your status data has a "code" field with values like "todo", "in-progress", "done", setting this to "code" will use these values as status identifiers.

• statusesTitleField  - Specifies which field from the status data source should be used as the display name for column headers. For example, if your status data has a "displayName" field with values like "To Do", "In Progress", "Done", setting this to "displayName" will use these values as column titles.

• getKanbanItemDataSourceId  - Specifies the data source ID for retrieving Kanban items or tasks. For example, "api/tasks" would fetch all work items to be displayed on the board.

• getKanbanItemsHttpRequestParametersMap  - Configures HTTP parameters for fetching Kanban items, including query parameters and path parameters. This allows for filtering tasks based on specific criteria like project, sprint, or team.

• kanbanItemPagination  - Activates server-side pagination for the Kanban items data source. When enabled, items are loaded in pages rather than all at once, improving performance for boards with many items.

• kanbanItemPaginationPageSize  - Sets the number of Kanban items to load per page when pagination is enabled. For example, setting to "1000" will load 1000 items per page.

• kanbanItemKeyField  - Defines the field used to uniquely identify each Kanban item. For example, if your data has an "id" field, setting this to "id" ensures each item can be uniquely identified for operations like update and delete.

• kanbanItemsStatusField  - Specifies which field from the Kanban item data source contains the status value. For example, if your tasks have a "status" field, setting this to "status" will allow the component to place items in the correct columns.

• kanbanItemTitleTemplate  - Defines the template for displaying the title of each Kanban item. Supports dynamic expressions like like {{title}} to to display the value of the "title" field from the item data.

• kanbanItemSubtitleTemplate  - Defines the template for displaying a subtitle on each Kanban item. For example,  {{[assignee.name](http://assignee.name)}} would would display the name of the person assigned to the task.

• kanbanItemDescriptionTemplate  - Defines the template for displaying a description on each Kanban item. For example,  {{description}} would would display the task's detailed description. Longer text will be truncated with ellipsis to maintain card appearance.

• allowUpdating  - Enables item updating functionality. When enabled, users can move items between columns or edit item details.

• updateKanbanItemDataSourceId  - Specifies the data source ID for updating Kanban items. For example, "api/tasks/{id}" would be the endpoint for modifying task details.

• updateKanbanItemHttpRequestParametersMap  - Configures parameters for update requests. This maps Kanban item data to the expected format for the update endpoint, including path parameters like item ID.

• editDialog  - Configures the dialog used for editing Kanban items. This specifies the content ID for the dialog component to show when editing items, supporting more complex editing than simple drag-and-drop.

• allowAdding  - Enables item creation functionality. When enabled, users can add new Kanban items through a UI control.

• addDialog  - Configures the dialog used for adding new Kanban items. This specifies the content ID for the dialog component to show when adding new items.

• allowDeleting  - Enables item deletion functionality. When enabled, users can remove Kanban items from the board.

• deleteKanbanItemDataSourceId  - Specifies the data source ID for deleting Kanban items. For example, "api/tasks/{id}" would be the endpoint for removing tasks.

• deleteKanbanItemHttpRequestParametersMap  - Configures parameters for delete requests. This maps Kanban item data to the expected format for the deletion endpoint.

• deleteConfirmation  - Requires confirmation before item deletion. When enabled, prompts users with a dialog to confirm before removing data, preventing accidental deletions.

Event Actions

• events  - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations like loading additional configuration.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.

Testing Hooks

• dataTestId  - Sets the testing hook ID for automated testing. For example, setting it to "sprint-tasks-kanban-board" allows test scripts to reliably locate this component.

• enableAsHotspot  - Enables the component as a guided tour hotspot. When enabled, the component can be highlighted during guided tours of your application.

• guidedTourHotSpotTitle  - Sets the title for the guided tour hotspot, supporting multiple languages. This title appears when the component is featured in an application tour.

• guidedTourHotSpotDescription  - Sets the description for the guided tour hotspot, supporting translations. This provides contextual information about the component during guided tours.

Authorization Properties

• visibilityPolicySetId  - Determines the visibility of the component based on specified policy sets. For example, setting to "teamMembersOnly" restricts the Kanban board to users with specific permissions.

Visibility Properties

• displayConditions  - Defines conditions for displaying the component based on context values or expressions. Allows for complex visibility rules based on application state or user data.

...

1. Status Data Source: Provides the columns for the Kanban board board

   [

     {     

   
     {
       "status":

    

    "to-do",

       

   
       "titleTranslations":

    {       

    {
         "en-US":

    

    "

   To Do

   To Do",

         

   
         "de-DE":

    

    "

   Zu erledigen"     }   },   {     

   Zu erledigen"
       }
     },
     {
       "status":

    

    "in-progress",

       

   
       "titleTranslations":

    {       

    {
         "en-US":

    

    "

   In Progress

   In Progress",

         

   
         "de-DE":

    

    "

   In Bearbeitung"     }   },   {     

   In Bearbeitung"
       }
     },
     {
       "status":

    

    "done",

       

   
       "titleTranslations":

    {       

    {
         "en-US":

    

    "Done",

         

   
         "de-DE":

    

    "Erledigt"

       }   } ]

   
       }
     }
   ]
   

2. Kanban Items Data Source: Provides the items to be displayed on the board

   [

     {     

   
     {
       "id":

    

    "task-1",

       

   
       "title":

    "Create user authentication",     

    "Create user authentication",
       "description":

    "Implement login and registration functionality",     

    "Implement login and registration functionality",
       "status":

    

    "to-do",

       

   
       "assignee":

    {       

    {
         "id":

    

    "user-1",

         

   
         "name":

    

    "

   Alice Smith"     },     

   Alice Smith"
       },
       "priority":

    8   

    8
     },

     {     

   
     {
       "id":

    

    "task-2",

       

   
       "title":

    "Design database schema",     

    "Design database schema",
       "description":

    "Create ERD and define relationships",     

    "Create ERD and define relationships",
       "status":

    

    "in-progress",

       

   
       "assignee":

    {       

    {
         "id":

    

    "user-2",

         

   
         "name":

    

    "

   Bob Johnson"     },     

   Bob Johnson"
       },
       "priority":

    7   } ]

    7
     }
   ]
   

API Endpoints

The component interacts with several endpoints:

...

When using pagination, the component expects responses in the following format:

{

...

  "content":

...

 [
    /* array of items */
  ],
  "totalElements":

...

 42,
  "totalPages":

...

 3,
  "number":

...

 0,
  "size":

...

 20,
  "first":

...

 true,
  "last":

...

 false,
  "empty":

...

 false
}

The component maps field names as specified in the configuration, making it adaptable to various API response formats.