Kanban API

Kanban Javascript API

Class

Kanban

Kanban represents a kanban board that visually depicts work at various stages of a process using cards to represent tasks and columns to represent each stage of the process.

Selector

smart-kanban

Properties

Events

Methods

Properties

addNewButtonboolean

Toggles the visibility of the column buttons for adding tasks. A particular button can be disabled by setting addNewButton in the column's definition to false.

Default value

false

Example

Set the addNewButton property.

 <smart-kanban add-new-button></smart-kanban>

Set the addNewButton property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.addNewButton = false;

Get the addNewButton property.

 const kanban = document.querySelector('smart-kanban');
 let addNewButton = kanban.addNewButton;

allowDragboolean

Allows the dragging of tasks.

Default value

true

Example

Set the allowDrag property.

 <smart-kanban allow-drag></smart-kanban>

Set the allowDrag property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.allowDrag = false;

Get the allowDrag property.

 const kanban = document.querySelector('smart-kanban');
 let allowDrag = kanban.allowDrag;

allowDropboolean

Allows the dropping of tasks.

Default value

true

Example

Set the allowDrop property.

 <smart-kanban allow-drop></smart-kanban>

Set the allowDrop property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.allowDrop = false;

Get the allowDrop property.

 const kanban = document.querySelector('smart-kanban');
 let allowDrop = kanban.allowDrop;

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default value

"advanced"

Example

Set the animation property.

 <smart-kanban animation='none'></smart-kanban>

Set the animation property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.animation = 'simple';

Get the animation property.

 const kanban = document.querySelector('smart-kanban');
 let animation = kanban.animation;

autoLoadStateboolean

Enables or disables auto load state from the browser's localStorage. Information about tasks and their position and selected state, filtering, sorting, collapsed columns, as well as the values of the properties taskActions, taskComments, taskDue, taskPriority, taskProgress, taskTags, and taskUserIcon is loaded.

Default value

true

Example

Set the autoLoadState property.

 <smart-kanban auto-load-state></smart-kanban>

Set the autoLoadState property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.autoLoadState = false;

Get the autoLoadState property.

 const kanban = document.querySelector('smart-kanban');
 let autoLoadState = kanban.autoLoadState;

autoSaveStateboolean

Enables or disables auto save state to the browser's localStorage. Information about tasks and their position and selected state, filtering, sorting, collapsed columns, as well as the values of the properties taskActions, taskComments, taskDue, taskPriority, taskProgress, taskTags, and taskUserIcon is saved.

Default value

false

Example

Set the autoSaveState property.

 <smart-kanban auto-save-state></smart-kanban>

Set the autoSaveState property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.autoSaveState = false;

Get the autoSaveState property.

 const kanban = document.querySelector('smart-kanban');
 let autoSaveState = kanban.autoSaveState;

collapsibleboolean

Allows collapsing the card content.

Default value

false

Example

Set the collapsible property.

 <smart-kanban collapsible></smart-kanban>

Set the collapsible property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.collapsible = false;

Get the collapsible property.

 const kanban = document.querySelector('smart-kanban');
 let collapsible = kanban.collapsible;

columns{ addNewButton?: boolean, collapsed?: string, collapsible?: string, columns?: [], dataField?: string, label?: string, orientation?: string, selected?: string }[]

Describes the columns properties.

Properties

addNewButtonboolean

Sets or gets whether the column's button for adding tasks is visible. Works in conjunction with the Kanban property of the same name.

Default value

true

Get the addNewButton property.

 const kanban = document.querySelector('smart-kanban');
 let addNewButton = kanban.columns[0].addNewButton;

collapsedboolean

Sets or gets whether the column is collapsed.

Default value

false

Get the collapsed property.

 const kanban = document.querySelector('smart-kanban');
 let collapsed = kanban.columns[0].collapsed;

collapsibleboolean

Sets or gets whether the column is collapsible. Works in conjunction with the Kanban property of the same name.

Default value

true

Get the collapsible property.

 const kanban = document.querySelector('smart-kanban');
 let collapsible = kanban.columns[0].collapsible;

columns{ addNewButton?: boolean, collapsed?: string, collapsible?: string, columns?: [], dataField?: string, label?: string, orientation?: string, selected?: string }[]

Sets or gets the column's sub-columns. Sub-columns has the same properties as top-level columns.

Get the columns property.

 const kanban = document.querySelector('smart-kanban');
 let columns = kanban.columns[0].columns;

dataFieldstring

Sets or gets the column's data source bound field. Corresponds to the status field in the data source.

Default value

""

Get the dataField property.

 const kanban = document.querySelector('smart-kanban');
 let dataField = kanban.columns[0].dataField;

labelstring

Sets or gets the text displayed in the column's header.

Default value

""

Get the label property.

 const kanban = document.querySelector('smart-kanban');
 let label = kanban.columns[0].label;

orientation"vertical" | "horizontal"

Sets or gets whether the tasks in the column flow vertically or horizontally.

Default value

"vertical"

Get the orientation property.

 const kanban = document.querySelector('smart-kanban');
 let orientation = kanban.columns[0].orientation;

selectedboolean

Sets or gets whether the column is selected. Only applicable to sub-columns when hierarchy is 'tabs'.

Default value

false

Get the selected property.

 const kanban = document.querySelector('smart-kanban');
 let selected = kanban.columns[0].selected;

Example

Set the columns property.

 <smart-kanban columns='{ label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing' }, { label: 'Done', dataField: 'done' }'></smart-kanban>

Set the columns property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.columns = { label: 'In progress', dataField: 'inProgress' }, { label: 'Testing', dataField: 'testing', orientation: 'horizontal', columns: [{ label: 'Manual testing', dataField: 'manualTesting', selected: true, columns: [{ label: 'Desktop devices', dataField: 'desktop' }, { label: 'Mobile devices', dataField: 'mobile', selected: true }] }, { label: 'Unit testing', dataField: 'unitTesting' }] };

Get the columns property.

 const kanban = document.querySelector('smart-kanban');
 let columns = kanban.columns;

currentUserstring | number

Sets or gets the id of the current user. Has to correspond to the id of an item from the users property/array. Depending on the current user, different privileges are enabled. If no current user is set, privileges depend on the element's properties.

Default value

false

Example

Set the currentUser property.

 <smart-kanban current-user='true'></smart-kanban>

Set the currentUser property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.currentUser = false;

Get the currentUser property.

 const kanban = document.querySelector('smart-kanban');
 let currentUser = kanban.currentUser;

dataSource{ id: string | number, checklist?: { completed?: boolean, text?: string }[], color?: string, comments?: { text?: string, time?: Date, userId: string | number }[], dueDate?: Date, priority?: string, progress?: number, startDate?: Date, status?: string, swimlane?: string, tags?: string, text?: string, userId?: string | number }[]

Determines the data source to be visualized in the kanban board.

Properties

idstring | number

The task's unique ID.

Default value

""

Get the id property.

 const kanban = document.querySelector('smart-kanban');
 let id = kanban.dataSource.id;

checklist{ completed?: boolean, text?: string }[]

A list of sub-tasks.

Get the checklist property.

 const kanban = document.querySelector('smart-kanban');
 let checklist = kanban.dataSource.checklist;

colorstring

A color used to highlight the task's card visually.

Default value

"null"

Get the color property.

 const kanban = document.querySelector('smart-kanban');
 let color = kanban.dataSource.color;

comments{ text?: string, time?: Date, userId: string | number }[]

Comments about a task.

Get the comments property.

 const kanban = document.querySelector('smart-kanban');
 let comments = kanban.dataSource.comments;

dueDateDate

The task's due date.

Get the dueDate property.

 const kanban = document.querySelector('smart-kanban');
 let dueDate = kanban.dataSource.dueDate;

priority"low" | "normal" | "high"

The task's priority.

Default value

"normal"

Get the priority property.

 const kanban = document.querySelector('smart-kanban');
 let priority = kanban.dataSource.priority;

progressnumber

The task's progress in percentages - a number from 0 to 100.

Get the progress property.

 const kanban = document.querySelector('smart-kanban');
 let progress = kanban.dataSource.progress;

startDateDate

The task's start date.

Get the startDate property.

 const kanban = document.querySelector('smart-kanban');
 let startDate = kanban.dataSource.startDate;

statusstring

The task's status. Has to correspond to the dataField of a column or sub-column from the columns property/array.

Default value

""

Get the status property.

 const kanban = document.querySelector('smart-kanban');
 let status = kanban.dataSource.status;

swimlanestring

The swimlane of the task. Has to correspond to the dataField of a swimlane from the swimlanes property/array, if it is defined.

Default value

"null"

Get the swimlane property.

 const kanban = document.querySelector('smart-kanban');
 let swimlane = kanban.dataSource.swimlane;

tagsstring

A comma-separated list of tags.

Default value

""

Get the tags property.

 const kanban = document.querySelector('smart-kanban');
 let tags = kanban.dataSource.tags;

textstring

The text of the task.

Default value

""

Get the text property.

 const kanban = document.querySelector('smart-kanban');
 let text = kanban.dataSource.text;

userIdstring | number

The ID of the user assigned to the task. Has to correspond to the id of an item from the users property/array.

Get the userId property.

 const kanban = document.querySelector('smart-kanban');
 let userId = kanban.dataSource.userId;

Example

Set the dataSource property.

 <smart-kanban data-source='["item 1", "item 2"]'></smart-kanban>

Set the dataSource property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.dataSource = ["new item 1", "new item 2"];

Get the dataSource property.

 const kanban = document.querySelector('smart-kanban');
 let dataSource = kanban.dataSource;

dragOffsetboolean

Determines the offset of the drag feedback element from the mouse cursor when dragging tasks. The first member of the array is the horizontal offset and the second one - the vertical offset. If set to 'auto', the offset is based on the mouse position when the dragging started.

Default value

auto

Example

Set the dragOffset property.

 <smart-kanban drag-offset></smart-kanban>

Set the dragOffset property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.dragOffset = auto;

Get the dragOffset property.

 const kanban = document.querySelector('smart-kanban');
 let dragOffset = kanban.dragOffset;

editableboolean

Sets or gets whether tasks can be edited (including the assigning of users to tasks).

Default value

false

Example

Set the editable property.

 <smart-kanban editable></smart-kanban>

Set the editable property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.editable = false;

Get the editable property.

 const kanban = document.querySelector('smart-kanban');
 let editable = kanban.editable;

formatStringDatestring

Sets or gets the format string of the "Due date" label and the "Start date" and "Due date" editors.

Default value

"d"

Example

Set the formatStringDate property.

 <smart-kanban format-string-date='dddd-MMMM-yyyy'></smart-kanban>

Set the formatStringDate property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.formatStringDate = 'M/d/yyyy';

Get the formatStringDate property.

 const kanban = document.querySelector('smart-kanban');
 let formatStringDate = kanban.formatStringDate;

formatStringTimestring

Sets or gets the format string of comments time stamp.

Default value

"MMM d, HH:mm"

Example

Set the formatStringTime property.

 <smart-kanban format-string-time='HH:mm'></smart-kanban>

Set the formatStringTime property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.formatStringTime = 'MMM d, h:mm tt';

Get the formatStringTime property.

 const kanban = document.querySelector('smart-kanban');
 let formatStringTime = kanban.formatStringTime;

headerPosition"none" | "top" | "bottom"

Sets or gets the header position. The header contains the Customize, Filter, Sort, and Search buttons.

Default value

"none"

Example

Set the headerPosition property.

 <smart-kanban header-position='top'></smart-kanban>

Set the headerPosition property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.headerPosition = 'bottom';

Get the headerPosition property.

 const kanban = document.querySelector('smart-kanban');
 let headerPosition = kanban.headerPosition;

hierarchy"columns" | "tabs"

Sets or gets the way column hierarchy is represented.

Default value

"columns"

Example

Set the hierarchy property.

 <smart-kanban hierarchy='tabs'></smart-kanban>

Set the hierarchy property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.hierarchy = 'columns';

Get the hierarchy property.

 const kanban = document.querySelector('smart-kanban');
 let hierarchy = kanban.hierarchy;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




Example

Set the messages property.

 <smart-kanban messages='{ 'he': { 'addFilter': 'הוסף פילטר', 'and': 'ו', 'apply': 'להגיש מועמדות', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'בטל', 'CONTAINS': 'מכיל', 'CONTAINS_CASE_SENSITIVE': 'מכיל (רגיש רישיות)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'לא מכיל', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'אינו מכיל (רגיש רישיות)', 'EMPTY': 'ריק', 'ENDS_WITH': 'נגמר עם', 'ENDS_WITH_CASE_SENSITIVE': 'מסתיים ב (רגיש רישיות)', 'EQUAL': 'שווה', 'EQUAL_CASE_SENSITIVE': 'שווה (רגיש אותיות רישיות)', 'filter': 'סנן', 'filteredByMultiple': '{{n}} פילטרים', 'filteredByOne': '1 פילטר', 'filterValuePlaceholder': 'ערך', 'find': 'מצא שדה', 'findInView': 'מצא בתצוגה', 'firstBy': 'מיין לפי', 'found': '{{nth}} מתוך {{n}}', 'from': 'מ', 'GREATER_THAN': 'גדול מ', 'GREATER_THAN_OR_EQUAL': 'גדול או שווה', 'LESS_THAN': 'פחות מ', 'LESS_THAN_OR_EQUAL': 'פחות מ או שווה', 'noFilters': 'לא הוחל מסננים', 'noResults': 'אין תוצאות', 'noSorting': 'לא מיושם מיון', 'NOT_EMPTY': 'לא ריק', 'NOT_EQUAL': 'לא שווה', 'NOT_NULL': 'לא ריק', 'NULL': 'ריק', 'numberFirst': '1', 'numberLast': '9', 'ok': 'בסדר', 'or': 'או', 'pickAnother': 'בחר שדה אחר למיין לפי', 'sort': 'סוג', 'sortedByMultiple': 'ממוין לפי שדות {{n}}', 'sortedByOne': 'מסודר לפי שדה 1', 'STARTS_WITH': 'starts with', 'STARTS_WITH_CASE_SENSITIVE': 'מתחיל עם', 'stringFirst': 'א', 'stringLast': 'ז', 'thenBy': 'ואז על ידי', 'where': 'איפה', 'actionsIcon': 'סמל פעולות', 'addSubtask': 'הוסף משימת משנה', 'assignedTo': 'שהוקצה ל', 'checklist': 'רשימת מטלות', 'color': 'צבע', 'commentsIcon': 'סמל הערות', 'copy': 'עותק', 'customize': 'התאם אישית משימות', 'dueDate': 'תאריך להגשה', 'edit': 'ערוך', 'editTask': 'ערוך את המשימה "{{taskId}}"', 'high': 'גבוה', 'low': 'נמוך', 'newComment': 'תגובה חדשה', 'newSubtask': 'תת-משימה חדשה', 'normal': 'רגיל', 'priority': 'עדיפות', 'priorityIcon': 'סמל עדיפות', 'progress': 'התקדמות', 'promptComment': 'האם אתה בטוח שברצונך להסיר תגובה זו?', 'promptTask': 'האם אתה בטוח שברצונך להסיר את המשימה "{{taskText}}"?', 'remove': 'הסר', 'removeSubtask': 'הסר את תת המשנה', 'send': 'שלח', 'startDate': 'תאריך התחלה', 'status': 'סטטוס', 'swimlane': 'נתיב שחייה', 'tags': 'תגיות', 'text': 'טקסט', 'userId': 'תעודת זהות של המשתמש', 'userIcon': 'סמל משתמש' } }'></smart-kanban>

Set the messages property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.messages = { 'en': { 'addFilter': '+ Add filter', 'and': 'And', 'apply': 'Apply', 'booleanFirst': '☐', 'booleanLast': '☑', 'cancel': 'Cancel', 'CONTAINS': 'contains', 'CONTAINS_CASE_SENSITIVE': 'contains (case sensitive)', 'dateFirst': '1', 'dateLast': '9', 'DOES_NOT_CONTAIN': 'does not contain', 'DOES_NOT_CONTAIN_CASE_SENSITIVE': 'does not contain (case sensitive)', 'EMPTY': 'empty', 'ENDS_WITH': 'ends with', 'ENDS_WITH_CASE_SENSITIVE': 'ends with (case sensitive)', 'EQUAL': 'equal', 'EQUAL_CASE_SENSITIVE': 'equal (case sensitive)', 'filter': 'Filter', 'filteredByMultiple': '{{n}} filters', 'filteredByOne': '1 filter', 'filterValuePlaceholder': 'Value', 'find': 'Find a field', 'findInView': 'Find in view', 'firstBy': 'Sort by', 'found': '{{nth}} of {{n}}', 'from': 'from', 'GREATER_THAN': 'greater than', 'GREATER_THAN_OR_EQUAL': 'greater than or equal', 'LESS_THAN': 'less than', 'LESS_THAN_OR_EQUAL': 'less than or equal', 'noFilters': 'No filters applied', 'noResults': 'No results', 'noSorting': 'No sorting applied', 'NOT_EMPTY': 'not empty', 'NOT_EQUAL': 'not equal', 'NOT_NULL': 'not null', 'NULL': 'null', 'numberFirst': '1', 'numberLast': '9', 'ok': 'OK', 'or': 'Or', 'pickAnother': 'Pick another field to sort by', 'sort': 'Sort', 'sortedByMultiple': 'Sorted by {{n}} fields', 'sortedByOne': 'Sorted by 1 field', 'STARTS_WITH': 'starts with', 'STARTS_WITH_CASE_SENSITIVE': 'starts with (case sensitive)', 'stringFirst': 'A', 'stringLast': 'Z', 'thenBy': 'then by', 'where': 'Where', 'actionsIcon': 'Actions icon', 'addSubtask': 'Add subtask', 'assignedTo': 'Assigned to', 'checklist': 'Checklist', 'color': 'Color', 'commentsIcon': 'Comments icon', 'copy': 'Copy', 'customize': 'Customize tasks', 'dueDate': 'Due date', 'edit': 'Edit', 'editTask': 'Edit task "{{taskId}}"', 'high': 'High', 'low': 'Low', 'newComment': 'New comment', 'newSubtask': 'New subtask', 'normal': 'Normal', 'priority': 'Priority', 'priorityIcon': 'Priority icon', 'progress': 'Progress', 'promptComment': 'Are you sure you want to remove this comment?', 'promptTask': 'Are you sure you want to remove the task "{{taskText}}"?', 'remove': 'Remove', 'removeSubtask': 'Remove subtask', 'send': 'Send', 'startDate': 'Start date', 'status': 'Status', 'swimlane': 'Swimlane', 'tags': 'Tags', 'text': 'Text', 'userId': 'User ID', 'userIcon': 'User icon' } };

Get the messages property.

 const kanban = document.querySelector('smart-kanban');
 let messages = kanban.messages;

selectionMode"zeroOrOne" | "zeroOrManyExtended"

Determines selection mode.

Default value

"zeroOrOne"

Example

Set the selectionMode property.

 <smart-kanban selection-mode='zeroOrManyExtended'></smart-kanban>

Set the selectionMode property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.selectionMode = 'zeroOrOne';

Get the selectionMode property.

 const kanban = document.querySelector('smart-kanban');
 let selectionMode = kanban.selectionMode;

swimlanesstring | { color?: string, dataField?: string, label?: string }[]

Describes the swimlanes in the kanban board. Sub-columns are not applicable when swimlanes are present.

Properties

colorstring

The swimlane's color.

Default value

"null"

Get the color property.

 const kanban = document.querySelector('smart-kanban');
 let color = kanban.swimlanes[0].color;

dataFieldstring

Sets or gets the swimlane's data source bound field. Corresponds to the swimlane field in the data source.

Default value

""

Get the dataField property.

 const kanban = document.querySelector('smart-kanban');
 let dataField = kanban.swimlanes[0].dataField;

labelstring

Sets or gets the text displayed in the swimlane.

Default value

""

Get the label property.

 const kanban = document.querySelector('smart-kanban');
 let label = kanban.swimlanes[0].label;

Example

Set the swimlanes property.

 <smart-kanban swimlanes='{ label: 'Client Energo', dataField: 'client1' }, { label: 'Client Sim-Prod Ltd.', dataField: 'client2', color: '#C90086' }'></smart-kanban>

Set the swimlanes property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.swimlanes = { label: 'Client Sim-Prod Ltd.', dataField: 'client2', color: '#C90086' }, { label: 'Other clients', dataField: 'other', color: '#03C7C0' };

Get the swimlanes property.

 const kanban = document.querySelector('smart-kanban');
 let swimlanes = kanban.swimlanes;

swimlanesFromnumber

Sets or gets the index of the column at which to start the swimlanes.

Default value

0

Example

Set the swimlanesFrom property.

 <smart-kanban swimlanes-from='1'></smart-kanban>

Set the swimlanesFrom property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.swimlanesFrom = 3;

Get the swimlanesFrom property.

 const kanban = document.querySelector('smart-kanban');
 let swimlanesFrom = kanban.swimlanesFrom;

swimlanesTonumber

Sets or gets the index of the column at which to end the swimlanes. By default, swimlanes end at the last column.

Example

Set the swimlanesTo property.

 <smart-kanban swimlanes-to='4'></smart-kanban>

Set the swimlanesTo property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.swimlanesTo = 3;

Get the swimlanesTo property.

 const kanban = document.querySelector('smart-kanban');
 let swimlanesTo = kanban.swimlanesTo;

tags[]

Sets or gets the allowed tags. If no tags are listed, all tags from the data source are allowed.

Example

Set the tags property.

 <smart-kanban tags='['method', 'data']'></smart-kanban>

Set the tags property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.tags = ['research', 'property', 'localization'];

Get the tags property.

 const kanban = document.querySelector('smart-kanban');
 let tags = kanban.tags;

taskActionsboolean

Toggles the visibility of the task actions icon.

Default value

false

Example

Set the taskActions property.

 <smart-kanban task-actions></smart-kanban>

Set the taskActions property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskActions = false;

Get the taskActions property.

 const kanban = document.querySelector('smart-kanban');
 let taskActions = kanban.taskActions;

taskCommentsboolean

Toggles the visibility of the task comments icon.

Default value

false

Example

Set the taskComments property.

 <smart-kanban task-comments></smart-kanban>

Set the taskComments property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskComments = false;

Get the taskComments property.

 const kanban = document.querySelector('smart-kanban');
 let taskComments = kanban.taskComments;

taskDueboolean

Toggles the visibility of the task due icon.

Default value

false

Example

Set the taskDue property.

 <smart-kanban task-due></smart-kanban>

Set the taskDue property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskDue = false;

Get the taskDue property.

 const kanban = document.querySelector('smart-kanban');
 let taskDue = kanban.taskDue;

taskPosition"all" | "leaf"

Sets or gets whether tasks can be shown in all levels of column hierarchy or only on leaf columns.

Default value

"false"

Example

Set the taskPosition property.

 <smart-kanban task-position='leaf'></smart-kanban>

Set the taskPosition property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskPosition = 'all';

Get the taskPosition property.

 const kanban = document.querySelector('smart-kanban');
 let taskPosition = kanban.taskPosition;

taskPriorityboolean

Toggles the visibility of the task priority icon (shown when priority is low or high).

Default value

true

Example

Set the taskPriority property.

 <smart-kanban task-priority></smart-kanban>

Set the taskPriority property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskPriority = false;

Get the taskPriority property.

 const kanban = document.querySelector('smart-kanban');
 let taskPriority = kanban.taskPriority;

taskProgressboolean

Toggles the visibility of task progress bar and the completed sub-tasks label.

Default value

false

Example

Set the taskProgress property.

 <smart-kanban task-progress></smart-kanban>

Set the taskProgress property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskProgress = false;

Get the taskProgress property.

 const kanban = document.querySelector('smart-kanban');
 let taskProgress = kanban.taskProgress;

taskTagsboolean

Toggles the visibility of task tags.

Default value

true

Example

Set the taskTags property.

 <smart-kanban task-tags></smart-kanban>

Set the taskTags property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskTags = false;

Get the taskTags property.

 const kanban = document.querySelector('smart-kanban');
 let taskTags = kanban.taskTags;

taskUserIconboolean

Toggles the visibility of the task user icon.

Default value

true

Example

Set the taskUserIcon property.

 <smart-kanban task-user-icon></smart-kanban>

Set the taskUserIcon property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.taskUserIcon = false;

Get the taskUserIcon property.

 const kanban = document.querySelector('smart-kanban');
 let taskUserIcon = kanban.taskUserIcon;

textTemplatestring | (settings: { data: any, task: HTMLDivElement, text: string, template?: string }) => void

Sets or gets a template to be applied to task text. Can be a string beginning with # and referencing the id of a template element on the page. Can also be a function that modifies the task text or the template itself. Finally, it can also be a string that will be parsed.

Example

Set the textTemplate property.

 <smart-kanban text-template='true'></smart-kanban>

Set the textTemplate property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.textTemplate = false;

Get the textTemplate property.

 const kanban = document.querySelector('smart-kanban');
 let textTemplate = kanban.textTemplate;

userListboolean

Determines whether the user list (as defined by the users property) will be shown when clicking the user icon. Only applicable if editable privileges are enabled.

Default value

false

Example

Set the userList property.

 <smart-kanban user-list></smart-kanban>

Set the userList property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.userList = false;

Get the userList property.

 const kanban = document.querySelector('smart-kanban');
 let userList = kanban.userList;

users{ allowAdd?: boolean, allowComment?: boolean, allowDrag?: boolean, allowEdit?: boolean, allowRemove?: boolean, id: string | number, image?: string, name?: string }[]

Determines the users Kanban tasks can be assigned to and their characteristics and privileges.

Properties

allowAddboolean

Sets whether the user has a privilege to add or copy tasks.

Default value

true

Get the allowAdd property.

 const kanban = document.querySelector('smart-kanban');
 let allowAdd = kanban.users[0].allowAdd;

allowCommentboolean

Sets whether the user has a privilege to add comments to tasks.

Default value

true

Get the allowComment property.

 const kanban = document.querySelector('smart-kanban');
 let allowComment = kanban.users[0].allowComment;

allowDragboolean

Sets whether the user has a privilege to drag tasks. Works along with the property allowDrag.

Default value

true

Get the allowDrag property.

 const kanban = document.querySelector('smart-kanban');
 let allowDrag = kanban.users[0].allowDrag;

allowEditboolean

Sets whether the user has a privilege to edit tasks. Works along with the property editable.

Default value

true

Get the allowEdit property.

 const kanban = document.querySelector('smart-kanban');
 let allowEdit = kanban.users[0].allowEdit;

allowRemoveboolean

Sets whether the user has a privilege to remove tasks.

Default value

true

Get the allowRemove property.

 const kanban = document.querySelector('smart-kanban');
 let allowRemove = kanban.users[0].allowRemove;

idstring | number

The user's unique ID. Corresponds to the userId field in the data source and the property currentUser.

Get the id property.

 const kanban = document.querySelector('smart-kanban');
 let id = kanban.users[0].id;

imagestring

A url to an image representing the user.

Default value

""

Get the image property.

 const kanban = document.querySelector('smart-kanban');
 let image = kanban.users[0].image;

namestring

The user's name as it will appear in the Users list and "Assigned to" editor.

Default value

""

Get the name property.

 const kanban = document.querySelector('smart-kanban');
 let name = kanban.users[0].name;

Example

Set the users property.

 <smart-kanban users='true'></smart-kanban>

Set the users property by using the HTML Element's instance.

 const kanban = document.querySelector('smart-kanban');
 kanban.users = false;

Get the users property.

 const kanban = document.querySelector('smart-kanban');
 let users = kanban.users;

Events

changeCustomEvent

This event is triggered when a task has been updated.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The old data of the task
ev.detail.task - The HTML element of the task whose data has been changed
ev.detail.value - The new data of the task

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        task = detail.task,
        value = detail.value;

	// event handling code goes here.
}

closeCustomEvent

This event is triggered when the edit/prompt dialog is closed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('close', function (event) {
	// event handling code goes here.
}

closingCustomEvent

This event is triggered when the edit/prompt dialog is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('closing', function (event) {
	// event handling code goes here.
}

dragEndCustomEvent

This event is triggered when a task is dropped somewhere in the DOM. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.container - the Kanban the dragged task(s) is dropped to
ev.detail.data - an object with additional drag details
ev.detail.item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
ev.detail.items - an array with all dragged tasks
ev.detail.originalEvent - the original, browser, event that initiates the drag operation
ev.detail.previousContainer - the Kanban the dragged item(s) is dragged from
ev.detail.target - the element the dragged tasks are dropped to

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragEnd event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer,
        target = detail.target;

	// event handling code goes here.
}

draggingCustomEvent

This event is triggered when the user is dragging a task.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragging

Arguments

evCustomEvent
ev.detailObject
ev.detail.data - an object with additional drag details
ev.detail.item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
ev.detail.items - an array with all dragged tasks
ev.detail.originalEvent - the original, browser, event that initiates the drag operation

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragging event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('dragging', function (event) {
    const detail = event.detail,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
}

dragStartCustomEvent

This event is triggered when the user starts dragging task(s). The dragging operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onDragStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.container - the Kanban the dragged task(s) is dragged from
ev.detail.data - an object with additional drag details
ev.detail.item - the task that is dragged; if multiple tasks are dragged, this is the task that has been clicked when initiating the drag operation
ev.detail.items - an array with all dragged tasks
ev.detail.originalEvent - the original, browser, event that initiates the drag operation
ev.detail.previousContainer - the Kanban the dragged item(s) is dragged from

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragStart event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        items = detail.items,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer;

	// event handling code goes here.
}

filterCustomEvent

This event is triggered when a filter has been applied.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onFilter

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of filter event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('filter', function (event) {
	// event handling code goes here.
}

openCustomEvent

This event is triggered when the edit/prompt dialog is opened.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('open', function (event) {
	// event handling code goes here.
}

openingCustomEvent

This event is triggered when the edit/prompt dialog is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

Arguments

evCustomEvent
ev.detailObject
ev.detail.comment - The comment that is about to be removed (if applicable).
ev.detail.purpose - The purpose of the dialog to be opened - 'edit' or 'prompt'.
ev.detail.task - The task that is about to be edited or removed (if applicable).

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of opening event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('opening', function (event) {
    const detail = event.detail,
        comment = detail.comment,
        purpose = detail.purpose,
        task = detail.task;

	// event handling code goes here.
}

sortCustomEvent

This event is triggered when sorting has been applied.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSort

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of sort event.

const kanban = document.querySelector('smart-kanban');
kanban.addEventListener('sort', function (event) {
	// event handling code goes here.
}

Methods

addFilter( filters: string[], operator?: string): void

Adds filtering

Arguments

filtersstring[]

Filter information

operator?string

Logical operator between the filters of different fields


Invoke the addFilter method.

const kanban = document.querySelector('smart-kanban');
kanban.addFilter("[['firstName', filterGroup]], 'and'");

addSort( dataFields: [] | string, orderBy: [] | string): void

Adds sorting

Arguments

dataFields[] | string

The data field(s) to sort by

orderBy[] | string

The sort direction(s) to sort the data field(s) by


Invoke the addSort method.

const kanban = document.querySelector('smart-kanban');
kanban.addSort(["firstName","country"],"ascending");

addTask( data?: any): void

Adds a task to a Kanban column. If no data is specified, an empty task is added to the first column.

Arguments

data?any

An object containing the new task's data


Invoke the addTask method.

const kanban = document.querySelector('smart-kanban');
kanban.addTask({"id":18,"text":"New task","status":"toDo","tags":"new, delayed"});

beginEdit( task: number | string | HTMLElement): void

Begins an edit operation

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement


Invoke the beginEdit method.

const kanban = document.querySelector('smart-kanban');
kanban.beginEdit(8);

cancelEdit(): void

Ends the current edit operation and discards changes


Invoke the cancelEdit method.

const kanban = document.querySelector('smart-kanban');
kanban.cancelEdit();

closePanel(): void

Closes any open header panel (drop down)


Invoke the closePanel method.

const kanban = document.querySelector('smart-kanban');
kanban.closePanel();

collapse( column: number | string): void

Collapses a Kanban column.

Arguments

columnnumber | string

The index or dataField of the column to collapse


Invoke the collapse method.

const kanban = document.querySelector('smart-kanban');
kanban.collapse("done");

copyTask( task: number | string | HTMLElement): void

Creates a copy of a task in the same column.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement


Invoke the copyTask method.

const kanban = document.querySelector('smart-kanban');
kanban.copyTask(1);

endEdit(): void

Ends the current edit operation and saves changes


Invoke the endEdit method.

const kanban = document.querySelector('smart-kanban');
kanban.endEdit();

ensureVisible( task: number | string | HTMLElement): HTMLElement

Makes sure a task is visible by scrolling to it. If succcessful, the method returns the HTML element of the task.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

ReturnsHTMLElement

Invoke the ensureVisible method.

const kanban = document.querySelector('smart-kanban');
const result = kanban.ensureVisible(5);

expand( column: number | string): void

Expands a Kanban column.

Arguments

columnnumber | string

The index or dataField of the column to expand


Invoke the expand method.

const kanban = document.querySelector('smart-kanban');
kanban.expand("done");

expandAll(): void

Expands all Kanban columns.


Invoke the expandAll method.

const kanban = document.querySelector('smart-kanban');
kanban.expandAll("done");

exportData( dataFormat: string, fileName?: string, callback?: Function): any

Exports the Kanban's data.

Arguments

dataFormatstring

The file format to export to. Supported formats: 'csv', 'html', 'json', 'pdf', 'tsv', 'xlsx', 'xml'.

fileName?string

The name of the file to export to

callback?Function

A callback function to pass the exported data to (if fileName is not provided)

Returnsany

Invoke the exportData method.

const kanban = document.querySelector('smart-kanban');
const result = kanban.exportData("html","my-kanban");

getState(): { collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }

Gets the Kanban's state.

Returns{ collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }

Invoke the getState method.

const kanban = document.querySelector('smart-kanban');
const result = kanban.getState();

loadState( state?: { collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }): void

Loads the Kanban's state.

Arguments

state?{ collapsed: {}, dataSource: [], filtering: { filters: [], operator: string }, selection: { selected: [], selectionStart?: number | string, selectionInColumn: string, swimlane: string }, sorting: { dataFields: [], dataTypes: [], orderBy: [] }, tabs: [], visibility: { taskActions: boolean, taskComments: boolean, taskDue: boolean, taskPriority: boolean, taskProgress: boolean, taskTags: boolean, taskUserIcon: boolean } }

An object returned by one of the methods getState or saveState. If not passed, gets saved state from the browser's localStorage.


Invoke the loadState method.

const kanban = document.querySelector('smart-kanban');
kanban.loadState();

moveTask( task: number | string | HTMLElement, newStatus: string): void

Moves a task to a different column.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

newStatusstring

The new status of the task (its new column's dataField)


Invoke the moveTask method.

const kanban = document.querySelector('smart-kanban');
kanban.moveTask(11);

openCustomizePanel(): void

Opens the "Customize tasks" header panel (drop down)


Invoke the openCustomizePanel method.

const kanban = document.querySelector('smart-kanban');
kanban.openCustomizePanel();

openFilterPanel(): void

Opens the "Filter" header panel (drop down)


Invoke the openFilterPanel method.

const kanban = document.querySelector('smart-kanban');
kanban.openFilterPanel();

openSortPanel(): void

Opens the "Sort" header panel (drop down)


Invoke the openSortPanel method.

const kanban = document.querySelector('smart-kanban');
kanban.openSortPanel();

removeFilter(): void

Removes filtering


Invoke the removeFilter method.

const kanban = document.querySelector('smart-kanban');
kanban.removeFilter();

removeSort(): void

Removes sorting


Invoke the removeSort method.

const kanban = document.querySelector('smart-kanban');
kanban.removeSort();

removeTask( task: number | string | HTMLElement, prompt?: boolean): void

Removes a task.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

prompt?boolean

Whether or not to prompt the user before removing the task


Invoke the removeTask method.

const kanban = document.querySelector('smart-kanban');
kanban.removeTask(2);

saveState(): void

Saves the Kanban's state to the browser's localStorage.


Invoke the saveState method.

const kanban = document.querySelector('smart-kanban');
kanban.saveState();

updateTask( task: number | string | HTMLElement, newData: {}): void

Updates a task.

Arguments

tasknumber | string | HTMLElement

The task's id or corresponding HTMLElement

newData{}

The new data to visualize in the task.


Invoke the updateTask method.

const kanban = document.querySelector('smart-kanban');
kanban.updateTask(2);

CSS Variables

--smart-kanban-default-widthvar()

Default value

"1200px"

Default width of Kanban

--smart-kanban-default-heightvar()

Default value

"500px"

Default height of Kanban

--smart-kanban-header-sizevar()

Default value

"35px"

Header size of Kanban (applies to header and column headers)

--smart-kanban-task-min-widthvar()

Default value

"150px"

Min width for Kanban tasks in columns with horizontal orientation

--smart-kanban-task-min-heightvar()

Default value

"80px"

Kanban task min height

--smart-kanban-text-max-heightvar()

Default value

"200px"

Kanban task text part max height

--smart-kanban-user-icon-sizevar()

Default value

"30px"

Kanban user icon size

--smart-kanban-user-list-widthvar()

Default value

"150px"

Kanban user list width

--smart-kanban-user-list-max-heightvar()

Default value

"400px"

Kanban user list max height

--smart-kanban-comments-list-widthvar()

Default value

"350px"

Kanban comments list width

--smart-kanban-comments-list-heightvar()

Default value

"400px"

Kanban comments list height

--smart-kanban-new-comment-heightvar()

Default value

"50px"

Height of new comment section

--smart-kanban-new-comment-height-expandedvar()

Default value

"175px"

Expanded height of new comment section

--smart-kanban-send-button-heightvar()

Default value

"30px"

Height of Send button in new comment section

--smart-kanban-color-band-widthvar()

Default value

"3px"

Kanban color band width (i.e. left border of tasks)

--smart-data-view-paddingvar()

Default value

"10px"

Padding of the CardView and Kanban

--smart-data-view-customize-panel-widthvar()

Default value

"200px"

Width of the CardView and Kanban customize panel (drop down).

--smart-data-view-filter-panel-widthvar()

Default value

"550px"

Width of the CardView and Kanban filter panel (drop down).

--smart-data-view-sort-panel-widthvar()

Default value

"400px"

Width of the CardView and Kanban sort panel (drop down).

--smart-data-view-search-panel-widthvar()

Default value

"250px"

Width of the CardView and Kanban search panel (drop down).