# new Kanban(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myKanban = document.createElement("a-kanban").init(config)
Or use the shorthand for it:
const myKanban = createKanban({
id: "my-kanban",
color: "#00aaee",
collection: kiss.app.collections["contact"],
// We can define a menu with custom actions
actions: [
{
text: "Group by status",
icon: "fas fa-sort",
action: () => $("my-kanban").groupBy(["Status"])
}
],
// We can add custom methods, and also override default ones
methods: {
// Override the createRecord method
createRecord(model) {
// Create a record from this model
console.log(model)
},
// Override the selectRecord method
selectRecord(record) {
// Show the clicked record
console.log(record)
},
sayHello: () => console.log("Hello"),
}
})
myKanban.render()
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
config |
object
|
||
collection |
Collection
|
The data source collection |
|
record |
object
|
<optional> |
Record to persist the view configuration into the db |
columns |
Array.<object>
|
<optional> |
Where each column is: {title: "abc", type: "text|number|integer|float|date|button", id: "fieldId", button: {config}, renderer: function() {}} |
color |
string
|
<optional> |
Hexa color code. Ex: #00aaee |
showToolbar |
boolean
|
<optional> |
false to hide the toolbar (default = true) |
showActions |
boolean
|
<optional> |
false to hide the custom actions menu (default = true) |
showLayoutButton |
boolean
|
<optional> |
false to hide the button to adjust the layout (default = true) |
canSearch |
boolean
|
<optional> |
false to hide the search button (default = true) |
canSort |
boolean
|
<optional> |
false to hide the sort button (default = true) |
canFilter |
boolean
|
<optional> |
false to hide the filter button (default = true) |
canGroup |
boolean
|
<optional> |
false to hide the group button (default = true) |
canSelectFields |
boolean
|
<optional> |
Can we select the fields (= columns) to display in the kanban? (default = true) |
canCreateRecord |
boolean
|
<optional> |
Can we create new records from the kanban? |
createRecordText |
boolean
|
<optional> |
Optional text to insert in the button to create a new record, instead of the default model's name |
actions |
Array.<object>
|
<optional> |
Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}} |
width |
number
|
string
|
<optional> |
|
height |
number
|
string
|
<optional> |
this
Generated markup
<a-kanban class="a-kanban">
<div class="kanban-toolbar">
<!-- Kanban toolbar items -->
</div>
<div class="kanban-header-container">
<div class="kanban-header">
<!-- Header columns -->
</div>
</div>
<div class="kanban-body-container">
<div class="kanban-body">
<!-- Body columns -->
</div>
</div>
</a-kanban>
Methods
# _getCategoryColor(groupFieldId, columnValue) → {string}
Get the color of a category, if any
Parameters:
Name | Type | Description |
---|---|---|
groupFieldId |
string
|
|
columnValue |
*
|
The color of the category
string
# _renderKanbanColumnContainer(record, rowIndex) → {string}
Render a Kanban column
Parameters:
Name | Type | Description |
---|---|---|
record |
object
|
|
rowIndex |
number
|
Html source for Kanban column container
string
# jumpToCard()
WORK IN PROGRESS - FOCUSING ON THE DRAGGED CARD
# moveCardToColumn(recordId, fieldId, value)
Move a card to a new column. This is equivalent to changing the value of a field.
Parameters:
Name | Type | Description |
---|---|---|
recordId |
string
|
|
fieldId |
string
|
|
value |
string
|
# refresh()
Generic method to refresh / re-render the view
Note: used in dataComponent (parent class) showSearchBar method. This method is invoked to refresh the view after a full-text search has been performed
# async resetColumnsWidth()
Reset all the columns to their default width
# async setColor(newColor)
Update the kanban color (toolbar buttons + modal windows)
Parameters:
Name | Type | Description |
---|---|---|
newColor |
string
|
# setColumnWidth(width)
Set the kanban column width
Parameters:
Name | Type | Description |
---|---|---|
width |
number
|
The column width in pixels |
# showFieldsWindow()
Show the window just under the fields selector button
# showFilterWindow()
Show the window just under the filter button
# showSortWindow()
Show the window just under the sorting button
# switchToSearchMode()
Switch to search mode
Show/hide only the necessary buttons in this mode.
# updateLayout()
Update the kanban size (recomputes its width and height functions)