Skip to main content

API overview

Kanban constructor

new kanban.Kanban("#root", {
// configuration parameters
});

Parameters:

  • the HTML container (the container's ID)
  • an object containing configuration parameters (details here)

Toolbar constructor

new kanban.Toolbar("#toolbar", {
// configuration parameters
});

Parameters:

  • the HTML container (the container's ID)
  • an object containing configuration settings (details here)

Kanban methods

NameDescription
addCard()Inserts a new card into the Kanban board
addColumn()Inserts a new column into the Kanban board
addComment()Inserts a new comment into the specified card using its ID.
addLink()Inserts a new link into the Kanban board.
addRow()Inserts a new row into the Kanban board
deleteCard()Deletes a specific card from the Kanban's datastore.
deleteColumn()Deletes a specified column from the Kanban datastore.
deleteComment()Remove a comment from a card using its ID
deleteLink()Deletes the specified link from the Kanban datastore.
deleteRow()Deletes the specified row from the Kanban datastore.
destructor()Clears all HTML elements of the Kanban board and removes all associated event handlers.
duplicateCard()Creates a duplicate of a card based on the given ID
getAreaCards()Retrieves an array containing data objects for all cards within the specified column (and row).
getCard()Retrieves the data object of a card using its specified ID
getSelection()Retrieves an array containing the ID(s) of the selected card(s)
moveCard()Shifts a card to a specified column (and row).
moveColumn()Shifts a column to a new position within the board.
moveRow()Shifts a row to a new spot within the board.
parse()Loads data into the Kanban board
redo()Re-executes the action that was undone by the undo method
scroll()Moves the Kanban view to a specific element
selectCard()Highlights a card based on the given ID.
serialize()Converts the Kanban data into a JSON format.
setConfig()Updates the Kanban with new configuration settings
setEdit()Switches the Kanban card editor on or off
setLocale()Sets a new locale for the Kanban component
setSearch()Finds cards based on the given search criteria
setSort()Sorts cards based on the specified criteria
setTheme()Dynamically applies a new theme to the Kanban board (reinitializing it).
undo()Reverts the last operation in Kanban
unselectCard()Deselects the card(s) identified by their ID.
updateCard()Updates a card's data by its ID
updateColumn()Modifies the data of a column using its ID
updateComment()Modify a card comment by specifying its ID
updateRow()Modifies the data of a row based on its ID.

Kanban internal API

Event Bus methods

NameDescription
api.exec()This method lets you trigger internal events within the Kanban board.
api.intercept()Enables catching and blocking internal events before they happen.
api.on()Enables the attachment of a handler to internal events
api.setNext()Enables inserting a specific action into the Event Bus sequence.

Export methods

NameDescription
export.json()Saves the Kanban data as a JSON file

State methods

NameDescription
api.getReactiveState()Retrieves an object containing the reactive properties of the Kanban board.
api.getState()Retrieves an object containing the StateStore properties of the Kanban.
api.getStores()Retrieves an object containing the DataStore properties of the Kanban.

Kanban events

NameDescription
add-cardTriggered when a new card is added
add-columnTriggered when a new column is added
add-commentTriggered when a new comment is added
add-linkTriggered when a new link is added
add-rowTriggered whenever a new row is added
add-voteTriggered whenever a user adds a new vote
delete-cardTriggered when a card is removed
delete-columnTriggers when a column is removed
delete-commentTriggered when a card comment is deleted
delete-linkTriggered when a link is deleted
delete-rowTriggered when a row is removed
delete-voteTriggered when a user removes a vote from a card
drag-cardThis event triggers whenever a card is moved using drag-and-drop.
duplicate-cardTriggered when a card is duplicated
end-drag-cardTriggered when a card dragging action ends
move-cardTriggered when a card is moved
move-columnTriggered when a column is moved
move-rowTriggered when a row is moved
scrollTriggered when scrolling to specified elements
select-cardTriggered when a card is selected
set-editTriggered when the editor is toggled
set-searchTriggered when a card search is performed
set-sortTriggered whenever cards are sorted.
start-drag-cardTriggered when a card begins to be dragged
unselect-cardTriggered when a card is unselected
update-cardTriggered when card data is updated
update-columnTriggered whenever column data is updated.
update-commentTriggered when a comment gets updated
update-rowTriggered when a row's data is updated

Kanban properties

NameDescription
cardHeightOptional. Defines the height of the cards.
cardsOptional. An array of objects containing the cards data
cardShapeOptional. Settings object that controls how cards look.
cardTemplateOptional. Generates and applies a custom HTML template for the card.
columnKeyOptional. Specifies which column a card belongs to.
columnsOptional. An array of objects containing the columns data
columnShapeOptional. Settings object to customize the look of columns
currentUserOptional. Represents the ID of the current user
editorOptional. Contains settings for customizing the Kanban editor
editorAutoSaveDeprecated! Optional. Enables/disables an autosave mode
editorShapeOptional. An array of objects that define the settings for controlling the look and behavior of the Kanban editor.
historyOptional. Controls whether the history of changes is tracked
linksOptional. This is an array of objects that holds the links data.
localeOptional. An object defining a custom locale for Kanban
readonlyOptional. Controls whether editing, adding, selecting, and dragging cards are enabled or disabled.
renderTypeOptional. Specifies the way cards are rendered.
rowKeyOptional. Specifies how a card is assigned to a row.
rowsOptional. An array of objects that holds the rows (swimlanes) data
rowShapeOptional. An object with settings to customize the appearance of rows
scrollTypeOptional. Specifies how scrolling behaves.
themeOptional. Defines a theme to apply to the Kanban board

Toolbar methods

NameDescription
destructor()Cleans up by removing all Toolbar HTML elements and detaching any associated events.
setConfig()Updates the Toolbar with new configuration settings
setLocale()Updates the Toolbar of Kanban with a new locale

Toolbar properties

NameDescription
apiRequired. An object representing Kanban's internal API
itemsOptional. An array containing controls arranged on the Kanban Toolbar.
localeOptional. An object that defines a custom locale for the Toolbar.
themeOptional. Specifies the theme applied to the Toolbar.

Common settings

NameDescription
$metaAn object with extra settings to customize Kanban methods and events

RestDataProvider API

RestDataProvider methods

NameDescription
getCards()Retrieves a promise containing the cards data
getColumns()Retrieves a promise containing the columns data
getLinks()Retrieves a promise containing the links data
getRows()Retrieves a promise containing the rows data
getUsers()Retrieves a promise containing the users data
send()This method handles sending the necessary HTTP requests to the server and returns a promise that may include data, depending on the request type.

RestDataProvider routes

NameDescription
GET /cardsRetrieves information on all cards and returns a JSON object containing an array of card objects.
GET /columnsRetrieves information about all columns and returns a JSON object containing an array of column data.
GET /linksRetrieves information about all links and returns a JSON object containing an array of link objects.
GET /rowsRetrieves data for all rows and returns a JSON object containing an array of row (swimlane) data objects.
GET /usersRetrieves data for all users and returns a JSON object containing an array of user objects.
GET /uploadsRetrieves the specified binary file from the server
POST /cardsAdds a new card and responds with a json object containing the card's ID.
POST /cards/{cardId}/commentsAdds one or more new comments to the specified card and returns a JSON object containing the ID of the newly added comment.
POST /cards/{cardId}/voteAdds a new vote to the card and returns a json object with the voting user ID
POST /columnsAdds a new column and returns a JSON object with the column ID.
POST /linksAdds a new link and returns a JSON object containing the new link ID
POST /rowsAdds a new row and responds with a JSON object containing the row ID.
POST /uploadsUploads a binary file to the server and returns a json object with the file id, name, and url
PUT /cardsUpdates the data of a specified card and returns an empty JSON object.
PUT /cards/{id}/moveMoves cards to a specified position
PUT /cards/{cardId}/comments/{cardId}This endpoint updates an existing comment within a card and returns a JSON object containing the ID of the updated comment.
PUT /columnsUpdates the details of a specific column and returns an empty JSON object.
PUT /columns/{id}/moveChanges the position of a column by moving it to a specified spot.
PUT /rowsUpdates data for a specific row (swimlane) and returns an empty JSON object.
PUT /rows/{id}/moveChanges the position of a row by moving it to a specified spot.
DELETE /cardsRemoves data from a card
DELETE /cards/{cardId}/comments/{cardId}Deletes a comment from a card
DELETE /cards/{cardId}/voteRemoves a vote from a card and returns a json object with a user ID that removes a vote
DELETE /columnsRemoves a column's data
DELETE /linksRemoves a link entry
DELETE /rowsRemoves a row (swimlane) from the data.