Constructor

# new Kanban(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 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>

View Source client/ui/data/kanban.js, line 51

Returns:

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`	`*`

View Source client/ui/data/kanban.js, line 947

Returns:

The color of the category

Type: string

# _renderKanbanColumnContainer(record, rowIndex) → {string}

Render a Kanban column

Parameters:

Name	Type	Description
`record`	`object`
`rowIndex`	`number`

View Source client/ui/data/kanban.js, line 961

Returns:

Html source for Kanban column container

Type: string

# jumpToCard()

TODO: WORK IN PROGRESS - FOCUSING ON THE DRAGGED CARD

View Source client/ui/data/kanban.js, line 268

# 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`

View Source client/ui/data/kanban.js, line 234

# 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

View Source client/ui/data/kanban.js, line 222