Kanban

(part of package 'kanban') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

A Servoy Extra Component for a Kanban Board. Displays boards with items that can be dragged, dropped, and managed.

This is a reference page; many components have detailed usage guides here.

Properties

boards

An array of board items to be displayed. Type: Array<CustomType<svykanban-board.boardItem>>

---

dragBoards

Flag indicating whether boards can be dragged. Type: Boolean

---

dragItems

Flag indicating whether items can be dragged between boards. Type: Boolean

---

gutter

The gutter between boards. Type: String

---

itemAddOptions

Options for adding items to a board. Type: CustomType<svykanban-board.itemAddOptions>

---

itemHandleOptions

Options for handling item drag operations. Type: CustomType<svykanban-board.itemHandleOptions>

---

responsivePercentage

If true, board widths are set as a percentage of the container. Type: Boolean Default Value: false

---

widthBoard

The width of each board. Type: String

---

Events

buttonClick(el,boardId,event)

Callback when the board's button is clicked

Parameters:

• {Object} el The DOM element of the clicked button.

• {String} boardId The identifier of the board.

• {JSEvent} event The event object associated with the click.

---

click(taskID,event)

Callback when any board's item are clicked

Parameters:

• {String} taskID The ID of the clicked task.

• {JSEvent} event The event object associated with the click.

---

dragBoard(el,source)

Callback when any board stop drag

Parameters:

• {Object} el The DOM element representing the board.

• {Object} source The source board object.

---

dragEl(el,source)

Callback when any board's item are clicked

Parameters:

• {Object} el The DOM element of the dragged item.

• {Object} source The source board object.

---

dragendBoard(el)

Callback when any board stop drag

Parameters:

• {Object} el The DOM element representing the board.

---

dragendEl(el)

Callback when any board's item stop drag

Parameters:

• {Object} el The DOM element of the dragged item.

---

dropEl(el,target,source,sibling)

Callback when any board's item drop in a board

Parameters:

• {String} el The identifier of the dropped item.

• {Object} target The target board object.

• {Object} source The source board object.

• {Object} sibling The sibling item element adjacent to the drop location.

---

API

addBoards(boardItems)

Adds all the boards to be displayed by the component, any previous boards will be replaced by the new ones

Parameters:

• {Array<CustomType<svykanban-board.boardItem>>} boardItems An array of board items to be displayed, replacing any existing boards.

---

addElement(boardID,element,position)

Adds an item to a specific Board

Parameters:

• {String} boardID The Board Id, if not found the item will be ignored

• {Object} element The item to be added to the Board

• {Number} [position] The position to insert the new item at, if not provided it will be inserted at the end

---

getElementIndex(elementID)

Gets the index position of an element within its parent board

Parameters:

• {String} elementID The element Id

Returns: Number The zero-based index of the element in its parent board, or -1 if parent or element not found

---

updateElement(elementID,element)

Updates the title of an existing item

Parameters:

• {String} elementID The Board Id, if not found the item will be ignored

• {Object} element The item to be updated, the title of the existing item will be replaced with this one, if not found by id it will be ignored

---

Types

boardItem

Represents a board item. scripting type: CustomType<svykanban-board.boardItem>

• class

  • CSS style class applied to the board.

  • Type: styleclass

• dragTo

  • Array of board IDs to which items can be dragged.

  • Type: string[]

• id

  • Unique identifier for the board.

  • Type: string

• item

  • Array of item objects contained in the board.

  • Type: item[]

• tabindex

  • Tab order index for keyboard navigation.

  • Type: string

• title

  • Title of the board.

  • Type: string

item

Represents an individual item in a board. scripting type: CustomType<svykanban-board.item>

• class

  • CSS style class applied to the item.

  • Type: styleclass

• id

  • Unique identifier for the item.

  • Type: string

• priority

  • Priority level of the item.

  • Type: string

• title

  • Title of the item.

  • Type: string

itemAddOptions

Options for adding new items to a board. scripting type: CustomType<svykanban-board.itemAddOptions>

• class

  • CSS class for styling the add item button.

  • Type: string

• content

  • The content to display as the add item button.

  • Type: string

  • Default Value: "+"

• enabled

  • Flag indicating whether adding items is enabled.

  • Type: boolean

  • Default Value: false

• footer

  • Flag indicating whether a footer is shown in the add item section.

  • Type: boolean

itemHandleOptions

Options for item handle behavior. scripting type: CustomType<svykanban-board.itemHandleOptions>

• customCssHandler

  • Client-side function for custom CSS styling of the handle.

  • Type: string

• customCssIconHandler

  • Client-side function for custom CSS styling of the handle icon.

  • Type: string

• customHandler

  • Client-side function for handling custom events on the handle.

  • Type: string

• enabled

  • Flag indicating whether the handle is enabled.

  • Type: boolean

  • Default Value: false

• handleClass

  • CSS class applied to the handle.

  • Type: string

---