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

Kanban Editing and Customization

Smart.Kanban has multiple ways of customizing the kanban board and editing the data it displays.

Editing

To be able to edit a task, the Kanban's property editable has to be enabled. Moreover, if a current user is set, the user would have to have editing privileges (allowEdit not set to false).

Editing a task can be initiated the following ways:

  • Double-clicking a task.
  • Highlighting a task with the keyboard and pressing F2.
  • Opening the Actions list and selecting "Edit"

These will open the edit dialog with editors for all task data fields, regardless of whether they are currently visualized in the task.

Kanban Edit

Once the necessary changes are made and the "OK" button is clicked, they are applied to the task.

Kanban Save Edit

Customization, Filtering, Sorting, and Searching Through the Header

When the Kanban header is enabled (headerPosition is set to 'top' or 'bottom'), four buttons for task customization become available:

  1. "Customize tasks" - each of the options sets a property related to task appearance:
    • Actions icon - taskActions
    • Comments icon - taskComments
    • Due date - taskDue
    • Priority icon - taskPriority
    • Progress - taskProgress
    • Tags - taskTags
    • User icon - taskUserIcon

    Kanban Edit
  2. "Filter" - allows filtering the Kanban data by multiple data fields and criteria.
    Kanban Filter
  3. "Sort" - allows sorting the kanban data by multiple data fields.
    Kanban Sort
  4. Search icon - allows searching and highlighting items that contain specified keywords in their text or tags.
    Kanban Search

Task Templates

To display custom content in the task text part, a template can be applied by setting the textTemplate property, which can be set to a function or the id of a template element on the page (or a combination of both to achieve conditional effects).

In the following example, tasks with high priority have additional labels in red in their text section.

    <script type="text/javascript">
        Smart('#kanban', class {
            get properties() {
                return {
                    collapsible: true,
                    dataSource: getKanbanData(),
                    editable: true,
                    columns: [
                        { label: 'To do', dataField: 'toDo' },
                        { label: 'In progress', dataField: 'inProgress' },
                        { label: 'Testing', dataField: 'testing' },
                        { label: 'Done', dataField: 'done' }
                    ],
                    textTemplate: function (settings) {
                        const data = settings.data,
                            task = settings.task,
                            text = settings.text;

                        if (data.priority === 'high') {
                            settings.template = '#kanbanTemplateHighPriority'; // references a template element in the DOM
                        }
                    }
                };
            }
        });
    </script>
</head>
<body>
    <smart-kanban id="kanban"></smart-kanban>

    <template id="kanbanTemplateHighPriority">
        <span class="attention">Task with HIGH priority. Please begin work as soon as possible.</span>
        <br />
        <br />
        {{text}}
    </template>
</body>
</html>

In the textTemplate callback function, the template of tasks with high priority is made to be the HTML template element with id kanbanTemplateHighPriority on the page. When applying this template, {{text}} is replaced with the task's text from the data source. The same applies to {{id}}.