v7.3.0

Getting started

This guide walks you through the steps needed to get a simple TaskBoard app up and running, explaining the concepts along the way. It covers using plain JavaScript, if you are using a framework please the corresponding getting started guide for that framework:

ReactAngularVueIonic

Prerequisites

To follow this guide, you need a text editor and a local webserver.

You also need TaskBoards sources, either downloaded or installed using npm (see further down). You can use the trial (available from bryntum.com). If not using npm, unzip the sources where you can easily reach them on the webserver.

The guide assumes HTML, CSS and JavaScript proficiency.

Simple app using local sources

In this part of the guide we will set up a very simple TaskBoard app. We are going to import from the modules bundle included with the downloaded sources, but there is also a section outlining how to instead use npm to not have to download it manually. Feel free to pick the approach that suits you the best!

1. Create a new folder for the app on your webserver:

mkdir taskboard

2. Create an index.html file in the folder and add the following to it:

<html>

<head>
    <title>TaskBoard demo</title>
    <link rel="stylesheet" href="../../build/taskboard.material.css" data-bryntum-theme>
</head>

<body>
    <script type="module" src="app.js"></script>
</body>

</html>

Be sure to specify a path for the CSS that matches where it is located on your webserver. In the listing above we have it in a folder named build two levels up from where the index.html file is located (this matches the structure used for the included TaskBoard demos).

The id on the <link> tag is not strictly required, but it allows easier theme switching if that is desired (too advanced for this guide, see API docs for DomHelper.setTheme()).

3. The html above includes a JavaScript module from app.js, create that file and use the following contents for it:

// Import TaskBoard from the modules bundle
import { TaskBoard } from '../../build/taskboard.module.js'

// Create a TaskBoard instance
const taskBoard = new TaskBoard({
    // Append its element to the page
    appendTo : document.body,

    // Define some columns
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Link the columns to a field on the tasks
    columnField : 'status',

    // Define some tasks
    project : {
        tasks : [
            { id : 1, name : 'My first task', status : 'doing' },
            { id : 2, name : 'My second task', status : 'todo' }
        ]
    }
});

4. Surf to the page in your browser, likely using an URL similar to http://localhost/taskboard

Simple app using npm

In this part of the guide we create the same app as in the previous part, but using npm instead of downloaded local sources. We start out the same way:

1. Create a new folder for the app on your webserver:

mkdir taskboard

2. Create a new npm project in the folder, run this command and accept all the defaults:

> npm init

3. Install the TaskBoard package from Bryntum NPM repository:

You are required to configure and login to the npm server before you are able to install packages. Please follow the instructions here.

Please refer to the NPM installation guide for trial or licensed version to get more information.

Installing trial version:

npm install @bryntum/taskboard@npm:@bryntum/taskboard-trial

Installing licensed version:

npm install @bryntum/taskboard

4. Create an index.html file in the folder and add the following to it:

<html>

<head>
    <title>TaskBoard demo</title>
    <link rel="stylesheet" href="node_modules/@bryntum/taskboard/taskboard.material.css" data-bryntum-theme>
</head>

<body>
    <script type="module" src="app.js"></script>
</body>

</html>

5. The html above includes a JavaScript module from app.js, create that file and use the following contents for it:

// Import TaskBoard from the modules bundle
import { TaskBoard } from 'node_modules/@bryntum/taskboard/taskboard.module.js'

// Create a TaskBoard instance
const taskBoard = new TaskBoard({
    // Append its element to the page
    appendTo : document.body,

    // Define some columns
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Link the columns to a field on the tasks
    columnField : 'status',

    // Define some tasks
    project : {
        tasks : [
            { id : 1, name : 'My first task', status : 'doing' },
            { id : 2, name : 'My second task', status : 'todo' }
        ]
    }
});

6. Surf to the page in your browser, likely using an URL similar to http://localhost/taskboard

Learn more

After finishing this guide, we recommend reading the basic guides to get a better picture of what TaskBoard can do:

Contents