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

Kanban for Vue

Vue 3 version using Smart custom elements and template refs.

What this topic covers: Focuses on card editing and board customization patterns that align with real team workflows and governance rules.

<script setup>
import { onMounted, ref } from 'vue';
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.kanban.js';

const component = ref();
const componentProps = {
  // Copy this topic's JavaScript configuration here.
};

onMounted(() => {
  Object.assign(component.value, componentProps);
});
</script>

<template>
  <smart-kanban ref="component"></smart-kanban>
</template>

Use component.value for API methods in this topic.

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">
        const componentProps = {
                    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}}.

For AI tooling

Developer Quick Reference

Topic: kanban-editing-customization   Component: Kanban   Framework: Vue

Main methods: (none detected)

Common config keys: appearance, dataSource, columns

Implementation Notes

Compatibility: Vue 3+   API access pattern: const component = ref() + component.value.method()

Lifecycle guidance: Use template refs with