API overview
Kanban constructor
new kanban.Kanban("#root", {
// configuration parameters
});
Parameters:
- an HTML container (the ID of the HTML container)
- an object of the configuration parameters (check here)
Toolbar constructor
new kanban.Toolbar("#toolbar", {
// configuration parameters
});
Parameters:
- an HTML container (the ID of the HTML container)
- an object of the configuration parameters (check here)
Kanban methods
| Name | Description |
|---|---|
| addCard() | Adds a new card into Kanban |
| addColumn() | Adds a new column into Kanban |
| addComment() | Adds a new comment to the specified card by its ID |
| addLink() | Adds a new link into Kanban |
| addRow() | Adds a new row into Kanban |
| deleteCard() | Removes the specified card from datastore of Kanban |
| deleteColumn() | Removes the specified column from datastore of Kanban |
| deleteComment() | Delete a card comment by its ID |
| deleteLink() | Removes the specified link from datastore of Kanban |
| deleteRow() | Removes the specified row from datastore of Kanban |
| destructor() | Removes all HTML elements of Kanban, and detaches all related events |
| duplicateCard() | Duplicates a card by the specified ID |
| getAreaCards() | Gets an array with data objects of all cards of the specified column (and row) |
| getCard() | Gets a data object of the card by the specified ID |
| getSelection() | Gets an array with ID(s) of the selected card(s) |
| moveCard() | Moves a card to the specified column (and row) |
| moveColumn() | Moves a column to the new position |
| moveRow() | Moves a row to the new position |
| parse() | Parses data into Kanban |
| redo() | Repeats the action that was reverted by the undo action |
| scroll() | Scrolls Kanban to the specified element |
| selectCard() | Selects a card by the specified ID |
| serialize() | Serializes the Kanban data to JSON |
| setConfig() | Sets new configuration parameters of Kanban |
| setEdit() | Toggles an editor of Kanban |
| setLocale() | Applies a new locale to Kanban |
| setSearch() | Looks for cards by the specified parameters |
| setSort() | Sorts cards by the specified parameters |
| undo() | Reverts the last operation in Kanban |
| unselectCard() | Unselects card(s) by its ID |
| updateCard() | Updates the card data by its ID |
| updateColumn() | Updates the column data by its ID |
| updateComment() | Update a card comment by its ID |
| updateRow() | Updates the row data by its ID |
Kanban internal API
Event Bus methods
| Name | Description |
|---|---|
| api.exec() | Allows triggering the inner events |
| api.intercept() | Allows intercepting and preventing the inner events |
| api.on() | Allows attaching a handler to the inner events |
| api.setNext() | Allows adding some action into the Event Bus order |
Export methods
| Name | Description |
|---|---|
| export.json() | Exports Kanban data into a JSON file |
State methods
| Name | Description |
|---|---|
| api.getReactiveState() | Gets an object with the reactive properties of Kanban |
| api.getState() | Gets an object with the StateStore properties of Kanban |
| api.getStores() | Gets an object with the DataStore properties of Kanban |
Kanban events
| Name | Description |
|---|---|
| add-card | Fires when adding a new card |
| add-column | Fires when adding a new column |
| add-comment | Fires when adding a new comment |
| add-link | Fires when adding a new link |
| add-row | Fires when adding a new row |
| add-vote | Fires when a user adds a new vote |
| delete-card | Fires when removing a card |
| delete-column | Fires when removing a column |
| delete-comment | Fires when deleting a card comment |
| delete-link | Fires when removing a link |
| delete-row | Fires when removing a row |
| delete-vote | Fires when a user deletes a vote from a card |
| drag-card | Fires when moving the card via dnd |
| duplicate-card | Fires when duplicating a card |
| end-drag-card | Fires when stop dragging a card |
| move-card | Fires when moving a card |
| move-column | Fires when moving a column |
| move-row | Fires when moving a row |
| scroll | Fires when scrolling to the specified elements |
| select-card | Fires when selecting a card |
| set-edit | Fires when toggling an editor |
| set-search | Fires when searching for cards |
| set-sort | Fires when sorting cards |
| start-drag-card | Fires when start dragging a card |
| unselect-card | Fires when unselecting a card |
| update-card | Fires when updating card data |
| update-column | Fires when updating column data |
| update-comment | Fires when updating a comment |
| update-row | Fires when updating row data |
Kanban properties
| Name | Description |
|---|---|
| cardHeight | Optional. A height of cards |
| cards | Optional. An array of objects containing the cards data |
| cardShape | Optional. An object of settings for managing the cards appearance |
| cardTemplate | Optional. Returns and applies a new HTML template of the card |
| columnKey | Optional. Defines belonging the card to the column |
| columns | Optional. An array of objects containing the columns data |
| columnShape | Optional. An object of settings for managing the columns appearance |
| currentUser | Optional. An ID of the current user |
| editor | Optional. An object of settings for configuring the Kanban editor |
| Deprecated! | |
| editorShape | Optional. An array of objects containing settings for managing the appearance and functionality of the Kanban editor |
| history | Optional. Enables/disables managing history |
| links | Optional. An array of objects containing the links data |
| locale | Optional. An object of a custom locale of Kanban |
| readonly | Optional. Enables/disables editing, adding, selecting, dragging the cards |
| renderType | Optional. Defines a type of cards rendering |
| rowKey | Optional. Defines belonging the card to the row |
| rows | Optional. An array of objects containing the rows (swimlanes) data |
| rowShape | Optional. An object of settings for managing the rows appearance |
| scrollType | Optional. Defines a type of scrolling |
| theme | Optional. A theme to be applied to Kanban |
Toolbar methods
| Name | Description |
|---|---|
| destructor() | Removes all HTML elements of Toolbar, and detaches all related events |
| setConfig() | Sets new configuration parameters of Toolbar |
| setLocale() | Applies a new locale to the Toolbar of Kanban |
Toolbar properties
| Name | Description |
|---|---|
| api | Required. An object with the internal API of Kanban |
| items | Optional. An array with controls arranged on Toolbar of Kanban |
| locale | Optional. An object of a custom locale of Toolbar |
| theme | Optional. A theme to be applied to Toolbar |
Common settings
| Name | Description |
|---|---|
| $meta | An object of extra settings for configuring methods and events of Kanban |
RestDataProvider API
RestDataProvider methods
| Name | Description |
|---|---|
| getCards() | Gets a promise with the cards data |
| getColumns() | Gets a promise with the columns data |
| getLinks() | Gets a promise with the links data |
| getRows() | Gets a promise with the rows data |
| getUsers() | Gets a promise with the users data |
| send() | Sends a necessary HTTP request to the server and returns a promise with or without data depending on the request |
RestDataProvider routes
| Name | Description |
|---|---|
GET /cards | Gets data on all cards and returns a json object with an array of cards objects |
GET /columns | Gets data on all columns and returns a json object with an array of objects with columns data |
GET /links | Gets data on all links and returns a json object with an array of links objects |
GET /rows | Gets data on all rows and returns a json object with an array of objects with rows (swimlanes) data |
GET /users | Gets data on all users and returns a json object with an array of users objects |
GET /uploads | Gets the requested binary file from the server |
POST /cards | Creates a new card and returns a json object with a new card ID |
POST /cards/{cardId}/comments | Adds a new comment(s) to the card and returns a json object with the ID of the new added comment |
POST /cards/{cardId}/vote | Adds a new vote to the card and returns a json object with the voting user ID |
POST /columns | Adds a new column and returns a json object with the column id |
POST /links | Creates a new link and returns a json object with a new link ID |
POST /rows | Adds a new row and returns a json object with the row ID in it |
POST /uploads | Uploads a binary file to the server and returns a json object with the file id, name, and url |
PUT /cards | Updates data on a specified card and returns an empty json object |
PUT /cards/{id}/move | Moves cards to a specified position |
PUT /cards/{cardId}/comments/{cardId} | Updates a comment in a card and returns a json object with the ID of the updated comment |
PUT /columns | Updates data on a specified column and returns an empty json object |
PUT /columns/{id}/move | Moves a column to a specified position |
PUT /rows | Updates data on a specified row (swimlane) and returns an empty json object |
PUT /rows/{id}/move | Moves a row to a specified position |
DELETE /cards | Deletes data on a card |
DELETE /cards/{cardId}/comments/{cardId} | Removes a comment from a card |
DELETE /cards/{cardId}/vote | Removes a vote from a card and returns a json object with a user ID that removes a vote |
DELETE /columns | Deletes data on a column |
DELETE /links | Deletes data on a link |
DELETE /rows | Deletes data on a row (swimlane) |