{"id":13110,"date":"2024-11-14T14:14:01","date_gmt":"2024-11-14T11:14:01","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13110"},"modified":"2024-11-29T16:24:15","modified_gmt":"2024-11-29T13:24:15","slug":"dhtmlx-kanban-1-6","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-kanban-1-6\/","title":{"rendered":"DHTMLX Kanban 1.6: More Configurable and Customizable JavaScript Kanban Board with Enhanced Usability"},"content":{"rendered":"

For years, DHTMLX Kanban has been helping dev teams cover workflow visualization needs and contribute to the more productive organization of working processes in business apps. It is time to provide developers with more configuration and customization options to make task management even more convenient and effective. So, we are thrilled to announce the release of DHTMLX Kanban 1.6.<\/p>\n

Web developers have always admired the possibility of modifying the look and behavior of almost all elements in our JavaScript Kanban board<\/a>, version 1.6 extends this strength to the maximum with templates for column headers and search results. There are new options for opening and displaying the Kanban editor. Voting for cards is simplified to clicking on the corresponding icon on cards. In v1.6, you can also change the number of avatars indicating users (e.g., employees) assigned to a given task (card).<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Kanban v1.6<\/div>\n\t\t
Estimate the updated functionality for building modern task management apps<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

In this article, we review all the novelties of DHTMLX Kanban 1.6 in more detail.<\/p>\n

Custom Template for Column\u2019s Header<\/h5>\n

When managing large projects with Kanban boards containing tens and even hundreds of tasks, it may be necessary to clarify some things for each stage specified in the Kanban board. In DHTMLX Kanban 1.6, we added the possibility of creating HTML templates for columns\u2019 headers. The templates are enabled via new headerTemplate<\/strong> and collapsedTemplate<\/strong> parameters of the columnShape<\/a><\/strong> property that allow showing custom header content in expanded and collapsed states respectively. With such templates, it will be easy to display useful information such as tasks counting in the headers of each Kanban column.
\n\"TemplateCheck the sample ><\/a><\/p>\n

Customized Suggestions in Search Results<\/h5>\n

Starting from v1.6, DHTMLX Kanban allows customizing suggestions of search results in the toolbar configuration. To do that, you need to configure a custom search bar using the items<\/a><\/strong> property of the Toolbar element, including the new searchResult<\/strong> parameter. It offers a template for showing custom search results.<\/p>\n

For instance, you can specify that suggestions in search results must show names and descriptions of cards matching the search query, as in the example below.
\n\"customCheck the sample ><\/a><\/p>\n

More Flexible Interaction with Card\u2019s Editor<\/h5>\n

Kanban cards are filled and modified via editors, and this kind of work usually takes a significant amount of the overall time dedicated to managing workflows. Therefore, we introduced a couple of novelties that should improve the editor\u2019s usability. <\/p>\n

First, we added the ability to open the editor of any Kanban card in a modal window. This feature will help end-users focus on the specific task details without being distracted by other Kanban elements. <\/p>\n

To activate the modal window mode for the card editor, you should set the “modal” value in the newly added placement<\/strong> parameter of the editor<\/a><\/strong> property.
\n\"editingCheck the sample ><\/a><\/p>\n

There is also a useful optimization related to the interaction with cards. In v1.6, you can configure card details to be opened after a double-click on a card. Test the setting using this sample<\/a>.<\/p>\n

Simplified Voting for Tasks<\/h5>\n

Our JavaScript Kanban component provides end-users with the ability to add votes to cards, thereby expressing their views on the relevance of tasks added to the board. If previously it could be done only after opening the card editor, end-users can now vote for certain tasks by simply clicking a thumbs-up icon on cards when navigating the board. When the vote is given accidentally or to the wrong task, it can be canceled by a repeated click on the icon. Try it out using this sample<\/a>. <\/p>\n

To make it work, you should set clickable: true<\/strong> in the votes<\/strong> parameter of the cardShape<\/a><\/a><\/strong> object.<\/p>\n

const<\/span> cardShape =<\/span> {<\/span>
\n...\/\/other settings<\/span>
\n    votes:<\/span> {<\/span>
\n        show:<\/span> true<\/span>,<\/span>
\n        clickable:<\/span> true<\/span>,<\/span>
\n    }<\/span>,<\/span>
\n}<\/span>;<\/span><\/div><\/div>\n

Check the sample ><\/a><\/p>\n

Displaying All Users Assigned to a Task<\/h5>\n

Resource allocation is an essential feature of DHTMLX Kanban that received a slight improvement in v1.6. Before that, end-users could not see the full list of assignees without opening the card after assigning more than two employees to a certain task. It may be inconvenient when it is necessary always to be aware of the team\u2019s workload. That is why the new Kanban version enables you to specify the number of employee avatars to be displayed on cards for which they are responsible. <\/p>\n

Under the hood, you can set the maximum number of employee avatars that will be visible on the card after assignments are made in the new maxCount<\/strong> parameter of the users<\/strong> field in the cardShape<\/a><\/strong> config.<\/p>\n

\"displayingCheck the sample ><\/a><\/p>\n

For a more detailed overview of this and other novelties delivered in v1.6, check out the “What\u2019s New<\/a>” page.<\/p>\n

Take the opportunity to try the updated DHTMLX Kanban in action and download a free 30-day trial version<\/a>. For our current clients, v1.6 is available in their Client\u2019s Area<\/a>. <\/p>\n

Related Materials<\/h5>\n