What's new in TaskBoard v6.0.0+
TaskBoard v6.1.0
Loading columns remotely
In 6.1, you can now load and save columns as part of the regular project requests. No code changes are required, simply include columns as part of your server response. Try this out in the new columns-remote demo.
{
"success" : true,
"columns" : {
"rows" : [
{
"id" : "todo",
"text" : "Todo"
},
{
"id" : "doing",
"text" : "Doing",
"tasksPerRow" : 2
},
{
"id" : "review",
"text" : "Review",
"tasksPerRow" : 2
},
{
"id" : "done",
"text" : "Done",
"tasksPerRow" : 2
}
]
},
"tasks" : {
"rows" : [
{
"id" : 1,
"name" : "Bug with rendering",
"description" : "Try it on any demo, reproduces easily",
"status" : "review",
"prio" : "medium",
"category" : "Bug",
"team" : "Developers",
"quarter" : "Q1",
"progress" : 85,
"rating" : 3,
"tags" : "bug,reproduced"
}
]
}
}
TaskBoard v6.1.4
Introducing thin trial NPM packages
Starting with the 6.1.4 release, there are now trial versions of thin NPM packages available on our NPM server. These can be used to evaluate combining multiple products before purchasing a license.
Please check the combining multiple products guides for the trial packages list and installation tips:
TaskBoard v6.1.8
rtl config of Widget
The rtl config property of Widgets is now public. By default Widgets conform to the writing direction of the element they are rendered to. But with the now public rtl property, you can force a widget, and all descendant widgets to lay out from right to left.
TaskBoard v6.2.0
Support for locking / freezing columns
You can now lock TaskBoard columns to the left ('start' in LTR) or right ('end') of other columns using the new locked column property and by activating ColumnLock feature. Moreover, new lock and unlock menu items have been added in columnHeaderMenu that allow user to lock/unlock columns by UI.
new TaskBoard({
features : {
columnLock : true
},
...
columns : [
{ id : 'unplanned', text : 'Unplanned', locked : 'start' },
{ id : 'asap', text : 'ASAP' },
{ id : 'later', text : 'Later' },
{ id : 'finished', text : 'Finished', locked : 'end' }
],
...
});
There is also a new demo (Locked column that demonstrates the new functionality. Or you can try it here:
TaskBoard v6.3.0
New Chart module
Bryntum products now ship with a new Chart module, which makes it easier to integrate Chart.js-based charts (see www.chartjs.org) with our products. The new module can be combined with all our products, by using the thin bundles / packages.
When using the new module, you also have access to a new ChartItem, which can be used to display a chart in a card. Both a standalone Chart and per card ChartItem's are on display in the new charts demo.
Using charts with your applications:
If you are using a vanilla JavaScript application, you need to import the chart thin bundle to enable support for the Charts feature:
import 'PATH_TO_DISTRIBUTION_FOLDER/build/thin/chart.module.thin.js';
For framework-based applications, the Bryntum npm repository provides the @bryntum/chart-thin package, along with chart component wrapper packages for major frameworks:
Angular:
import '@bryntum/chart-thin'
import { BryntumChart } from '@bryntum/chart-angular-thin'
React:
import '@bryntum/chart-thin'
import { BryntumChart } from '@bryntum/chart-react-thin'
Vue 3:
import '@bryntum/chart-thin'
import { BryntumChart } from '@bryntum/chart-vue-3-thin'
Support for collapsing / expanding tasks
You can now configure TaskBoard to allow collapsing and expanding the task elements by adding the new CollapseItem to the configuration. The TaskModel has a new field collapsed, which determines the initial collapsed state of the task element. This is referenced by the field configuration option.
new TaskBoard({
headerItems : {
collapseItem : { type : 'collapseItem', field : 'collapsed' }
},
...
});
The demo Task items has been updated to show the initial state of tasks and the use of the CollapseItem.
Per-column filtering of tasks
It is now possible to filter each column independently by using a built-in filter editor. Enabling the feature is straightforward: just add columnFilter : true to the TaskBoard config section features.
new TaskBoard({
features : {
columnFilter : true
},
...
});
The filter editor is preconfigured to add a template row when opened for the first time. This can be customized by using the config option defaultFilters:
new TaskBoard({
features : {
columnFilter : {
defaultFilters : [
{ property : 'prio', operator : 'isIncludedIn', value : 'high' }
]
}
},
...
});
A new demo Filtering tasks per column has been added to explore the filtering capabilities.
Filter bar in column header
For simple and quick filtering of tasks per column without the complexity of ColumnFilter, you can now configure the FilterBar feature to search for text matches. Multiple fields to be searched are configurable, and RegExp pattern matching can be enabled. Filtering can either be performed as-you-type with configurable delay, or on Tab/Enter keypress. The FilterBar does not interfere with the ColumnFilter feature and can be used simultaneously to allow for both simple and complex filtering at the same time. Default fields value configured to search is ['name'].
new TaskBoard({
features : {
filterBar : {
fields : ['name', 'description', 'prio', 'id'],
keyStrokeChangeDelay : 100,
allowRegExp : true
}
},
...
});
Support for resizing column widths
You can now resize the width of individual columns by enabling the new ColumnResize feature in the configuration. When active, the gap between column headers contains an invisible handle element, which can be dragged to resize the left adjacent column. When the header gap is very narrow or zero, the handle element is overlapping both adjacent column headers by a small amount. The width is adjustable by the CSS custom property --taskboard-column-resize-handle-min-width.
new TaskBoard({
features : {
columnResize : true
},
...
});
Per-column sorting of tasks
A new feature has been added to provide independent sorting of each column. Enable it by configuring the feature and specifying sortableFields.
new TaskBoard({
features : {
columnSort : {
sortableFields : ['name', 'prio', 'weight']
}
},
...
});
When only one sortable field is configured, the sorting is triggered by clicking the column title; repeated clicks toggle the sort order.
For multiple sortable fields a button with attached menu is generated, and sorting happens when clicking a menu item. The menu by default stays open when clicking on an item; repeated clicks toggle the sort order. When the menu is closed, the order of the currently active sorter can also be toggled by clicking the column title. To change the behaviour of the menu into auto-closing after each item click, configure the feature with closeOnItem : true. The auto-closing behaviour can also be toggled temporarily by shift-clicking an item.
ColumnSort only works in TaskBoards without swimlanes. When reordering tasks manually per Drag & Drop cancels the sorting on the target column but retains the current order of tasks.
To explore the sorting feature, a new demo Sorting tasks per column has been added.
Catch-all column
Often a column is needed to hold all tasks that are not in any other column, either because their column ID value is not matching any of the defined columns, or when their column ID value is unset (i.e. task cannot be added to any column). To add a catch-all column to the taskboard, just add a column with ID '*' (and a desirable title) to the columns array.
new TaskBoard({
columnField : 'prio',
columns : ['low', 'normal', 'high', { id : '*', text : 'Other' }],
...
});
A new demo Column for non-matching tasks has been added.