TaskModel
Represents a single task on your TaskBoard, usually added to a TaskStore.
Customizing Task fields
The TaskModel has a few predefined fields as seen under Fields below. If you want to add new fields or change existing fields, you can do that by subclassing this class:
class MyTask extends TaskModel {
static get fields() {
return [
// Add a new field
{ name: 'myField', type : 'number', defaultValue : 0 }
];
}
...
}
// Instances of your class now has getters / setters defined for your field
const task = new MyTask();
console.log(task.myField); // => 0
If you want to use other names for any predefined field in your data, you can reconfigure them as seen below:
class MyTask extends TaskModel {
static get fields() {
return [
// Remap status -> state
{ name: 'status', dataSource : 'state' }
];
}
...
}
Configuring the Project to use a custom task model
Here's how you configure the Project to use a certain Model class:
const taskBoard = new TaskBoard({
// Configure the project to use our custom task model and to load data remotely
project : {
taskModelClass : MyTask,
autoLoad : true
transport : {
load : {
url : 'data/data.json'
}
}
}
});
Read-only tasks
A task can be flagged as read-only using the readOnly field. This protects it from being edited in the UI, but has no effect on the data layer.
//<code-header>
fiddle.title = 'Task model read only';
//</code-header>
const taskBoard = new TaskBoard({
appendTo : targetElement,
css : {
columnGap : '.5em',
cardBorderTop : '3px solid currentColor'
},
features : {
columnToolbars : false
},
// Columns to display
columns : [
'todo',
'doing',
'done'
],
// Field used to pair a task to a column
columnField : 'status',
// Project using inline data
project : {
tasks : [
{ id : 1, name : 'Read only task', status : 'doing', description : 'Cant be dragged, moved using the menu or edited', readOnly : true },
{ id : 2, name : 'Normal task', status : 'done', description : 'Anything goes...', eventColor : 'green' }
]
},
tbar : [
{
toggleable : true,
pressed : true,
text : 'Read-only',
icon : 'fa-square',
pressedIcon : 'fa-check-square',
onToggle({ pressed }) {
taskBoard.project.taskStore.getById(1).readOnly = pressed;
}
}
]
});Please refer to Model for additional details.
Properties
88
Properties
88Class hierarchy
Editing
JSON
Parent & children
Recurrence
Scheduling
Functions
73
Functions
73Assignments & Resources
Configuration
Editing
Events
Misc
Parent & children
Recurrence
Scheduling
Typedefs
2
Typedefs
2Fields
7
Fields
7Set to true to make the task render as a small bar in the UI. Toggling this state via UI is done through
the CollapseItem.
Task description, by default shown in tasks body.
Color, named colors are applied as a b-task-board-color-{color} (for example b-task-board-color-red) CSS
class to the tasks card. Colors specified as hex, rgb() etc. are applied as style.color to the card.
If no color is specified, any color defined on the column or swimlane will apply instead.
By default it does not visually affect the UI, but it applies a color to the task that applications can
leverage using currentColor to style it in the desired way.
Using named colors:
const taskBoard = new TaskBoard({
project {
tasks : [
{ id : 1, name : 'Important task', eventColor : 'red' }
]
}
});
Will result in:
<div class="b-task-board-card b-task-board-color-red">
Which can the be used for example like:
.b-task-board-card {
// currentColor is the color defined by b-red
border-left : 5px solid currentColor;
}
Using non-named colors:
const taskBoard = new TaskBoard({
project {
tasks : [
{ id : 1, name : 'Important task', eventColor : '#ff0000' }
]
}
});
Will result in:
<div class="b-task-board-card" style="color: #ff0000">
Predefined named colors:
Task priority, for example for linking to a swimlane on the TaskBoard.
Set to true to make the task read-only, preventing it from being edited in the UI.
See the class description above for a live demo.
Task status, for example for linking to a column on the TaskBoard.