v7.3.0

Working with remote data

With TaskBoard you have multiple options for how to work with remote data. This guide outlines the options and points you to resources where you can learn more. It covers the follow scenarios:

  1. Handling remote data already available on the client
  2. Using Bryntums Crud manager to load and sync remote data for all stores
  3. Loading each store using Ajax

Data already available on the client

This scenario covers for example when TaskBoard is inserted into an existing application, where data is already available and needs to be plugged in and changes in the TaskBoard needs to be extracted.

Consuming JavaScript objects

TaskBoard expects data in JSON format or as an array of JavaScript objects. Depending on what you have available you have different options. If you have data available as JavaScript objects, the following snippet illustrates some alternatives on how to plug it in.

First the data used by the other snippets:

//
// Data already available on the client, as JavaScript objects:
//

const
    tasksOnClient       = [
        { id : 1, name : 'A task' },
        /*...*/
    ],
    resourcesOnClient   = [
        { id : 1, name : 'Linda' },
        /*...*/
    ],
    assignmentsOnClient = [
        { id : 1, event : 1, resource : 1 },
        /*...*/
    ];

Use that data when creating a TaskBoard:

const taskBoard = new TaskBoard({
    // Supply it to the project
    project : {
        tasks       : tasksOnClient,
        resourcesData   : resourcesOnClient,
        assignmentsData : assignmentsOnClient
    }
});

And/or plug data into an already created TaskBoard ("reloading" it):

taskBoard.project.inlineData = {
    tasks       : tasksOnClient,
    resourcesData   : resourcesOnClient,
    assignmentsData : assignmentsOnClient
};

As an alternative you can also plug it into an individual store (although we recommend handling entire project):

taskBoard.project.taskStore.data = tasksOnClient;

Consuming JSON

If you have data available as JSON, in a format accepted by project:

{
  "tasks": [
    {
      "id": 1,
      "name": "A task"
    },
    {
      "...": "..."
    }
  ],
  "resourcesData": [
    "..."
  ],
  "assignmentsData": [
    "..."
  ]
}

Use that data when creating a TaskBoard:

const taskBoard = new TaskBoard({
    // Supply it to the project
    project : {
        json : jsonOnClient
    }
});

And/or plug the json into an already created TaskBoard ("reloading" it):

taskBoard.project.json = jsonOnClient;

As an alternative you can also plug json into an individual store (although we recommend handling entire project):

taskBoard.project.taskStore.json = `
[
  { "id" : 1, "name" : "A task" },
  ...
]`;

Read more in the API docs:

Detecting changes

Depending on your "save strategy" you might want to be notified when data in a project store changes, to pass the changes to your backend. To achieve this, you can listen for changes on the individual stores in the project:

const taskBoard = new TaskBoard({
    project : {
        taskStore : {
            listeners : {
                // The change event is triggered when records are added, removed, modified etc
                change({ action, record, records }) {
                    // Inspect action to determine type of change: 'add', 'update' etc
                    if (action === 'add') {
                        saveToBackend(records);
                    }
                }
            }
        },
        ...
    }
});

See the events section in Stores API docs for more info.

You can also catch persistable changes to any store in the project by listening to the hasChanges event on the project:

const taskBoard = new TaskBoard({
    project : {
        listeners : {
            hasChanges() {
                const { changes } = this;

                // Process changes here
            }
        }
    },
    ...
});

After processing the changes (saving them to your backend), you likely want to reset the change tracking by calling project.acceptChanges():

async hasChanges() {
    const { changes } = this;

    // Pseudo code
    await saveChangeToMyBackend(changes);

    // Reset change tracking
    this.acceptChanges();
}

Extracting changes

To extract what has changed in the project since it was last loaded, you can use the changes property on the project. It returns an object containing the changes for each project store:

const changes = taskBoard.project.changes;

The changes will have the following shape (depending on what has changed):

changes = {
    tasks : {
        added   : [],
        updated : [],
        removed : []
    },
    resources : {
        /*...*/
    },
    /*...*/
}

Alternatively, you can also query each store for the same information:

const taskChanges = taskBoard.project.taskStore.changes;

The taskChanges will have the following shape (depending on what has changed):

taskChanges = {
    added    : [],
    modified : [],
    removed  : []
}

If you prefer to extract the entire dataset over the changes, you can do so on the project level using project.inlineData or project.json. Or at the store level, using store.records or store.json.

Using Crud manager

The project has a CrudManager built-in. It allows it to load and sync (save) data for all of its stores in a single request to the backend. If you are building something from the ground up, CrudManager is our recommended way of handling data.

For more information on using CrudManager, see the Crud manager guide.

Loading individual stores using Ajax

While we do not encourage using this approach, because it leads to more requests to the server and is also less efficient client side, it is possible to load individual stores using built-in Ajax functionality.

The stores used in TaskBoards project extends AjaxStore, allowing them to communicate with a backend on their own if needed. This snippet configures the task store to load JSON data using Ajax:

const taskBoard = new TaskBoard({
   project : {
       taskStore : {
           readUrl : 'backend/read.php'
       }
   } 
});

To load data, call load():

taskBoard.project.taskStore.load();

For more information on using this approach and on how to save changes with it, please read the Using AjaxStore guide.

Contents