Kanban - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com
JavaScriptJavaScriptAngularAngularVueVueReactReact

Kanban Users

Each task in Smart.Kanban can be assigned to a user. Users are defined in the users property/array, each member of which can have the following fields:

  • id - The user's unique ID. Corresponds to the userId field in the data source and the property currentUser.
  • name - The user's name as it will appear in the Users list and "Assigned to" editor.
  • image - A url to an image representing the user (avatar).
  • allowAdd - sets whether the user has a privilege to add or copy tasks; true by default.
  • allowComment - sets whether the user has a privilege to add comments to tasks; true by default.
  • allowDrag - sets whether the user has a privilege to drag tasks. Works along with the property allowDrag; true by default.
  • allowEdit - sets whether the user has a privilege to edit tasks. Works along with the property editable; true by default.
  • allowRemove - sets whether the user has a privilege to remove tasks; true by default.
Smart('#kanban', class {
    get properties() {
        return {
            collapsible: true,
            currentUser: 2, // The current user is the one with id 2 - Janet
            dataSource: getKanbanData(),
            editable: true,
            userList: true,
            users: [
                { id: 0, name: 'Andrew', image: '../../images/people/andrew.png' },
                { id: 1, name: 'Anne', image: '../../images/people/anne.png' },
                { id: 2, name: 'Janet', image: '../../images/people/janet.png' },
                { id: 3, name: 'John', image: '../../images/people/john.png' },
                { id: 4, name: 'Laura', image: '../../images/people/laura.png' }
            ],
            columns: [
                { label: 'To do', dataField: 'toDo' },
                { label: 'In progress', dataField: 'inProgress' },
                { label: 'Testing', dataField: 'testing' },
                { label: 'Done', dataField: 'done' }
            ]
        };
    }
});

When the property currentUser is set to the id of an user, the respective user's privileges are enacted.

Assigning a User to a Task

A user can be assigned to a task by opening the Users list by clicking the user icon in a task and selecting a user:

To enable the Users list, userList has to be set to true. To enable the task user icon, taskUserIcon has to be set to true.

Asignees can also be changed from the edit dialog (more information in the topic Kanban Editing and Customization).

Task Comments

Task comments can be loaded from the data source. When a currentUser with comment privileges is set, comments can also be written about tasks and saved in the data source.

To write a comment, click the Comments icon (visible when the property taskComments is enabled), enter the comment's content in the textarea and click "Send".

The new number of comments is reflected in the number that appears next to the Comments icon.


Existing comments that are written by the current user can be edited or removed by clicking the button next to the comment's timestamp:

For AI tooling

Developer Quick Reference

Topic: kanban-users-comments   Component: Kanban   Framework: JavaScript

Main methods: (none detected)

Common config keys: dataSource, columns

Implementation Notes

Compatibility: Modern browsers / Web Components   API access pattern: const component = document.querySelector(...) + component.method()

Lifecycle guidance: Initialize configuration first, then invoke imperative API when element is available in DOM.

Common pitfalls:

  • Calling methods before element initialization.
  • Reassigning large configuration partially without understanding merge behavior.
  • Missing required module script import for component type.

Validation checklist:

  • Ensure module scripts and CSS are loaded once.
  • Keep data schema aligned with columns/series definitions.
  • Verify method calls target initialized component instance.