Interacting with the server

Now that we've reviewed the general concepts of working with data in Bryntum components, let's explore server interactions in more detail. There are multiple ways to interact with the server.

For Bryntum TaskBoard, you can either use loadUrl to interact with all stores collectively:

project : {
    loadUrl : '/data.php'
}

or use createUrl, readUrl, updateUrl, and deleteUrl to define an endpoint for each store individually. For example:

const taskboard = new TaskBoard({
  // other config
  project : {
    resourceStore : {
      createUrl : 'resource/create.js',
      readUrl   : 'resource/read.js',
      updateUrl : 'resource/update.js',
      deleteUrl : 'resource/delete.js'
    }
  }
});

// TaskBoardConfig.tsx
import { type BryntumTaskBoardProps } from "@bryntum/taskboard-react";

export const taskboardProps: BryntumTaskBoardProps = {
  // other config
  project : {
    resourceStore : {
      createUrl : 'resource/create.js',
      readUrl   : 'resource/read.js',
      updateUrl : 'resource/update.js',
      deleteUrl : 'resource/delete.js'
    }
  }
};

import taskboardProps from "./taskboardConfig";
// App.tsx
const App = props => {

    return <BryntumTaskBoard {...taskboardProps} />
}

<script setup lang="ts">
import { BryntumTaskBoard } from '@bryntum/taskboard-vue-3';
import taskboardConfig  from './AppConfig.ts';
</script>

<template>
  <bryntum-taskboard v-bind="taskboardConfig" />
</template>

import { type BryntumTaskBoardProps } from '@bryntum/taskboard-vue-3';

export const taskboardConfig : BryntumTaskBoardProps = {
  // other config
  project : {
    resourceStore : {
      createUrl : 'resource/create.js',
      readUrl   : 'resource/read.js',
      updateUrl : 'resource/update.js',
      deleteUrl : 'resource/delete.js'
    }
  }
};

<bryntum-taskboard
    #taskboard
    [project]="taskboardProps.project!"
></bryntum-taskboard>

// app.config.ts
import { type BryntumTaskBoardProps } from '@bryntum/taskboard-angular';

export const taskboardProps: BryntumTaskBoardProps = {
  // other config
  project : {
    resourceStore : {
      createUrl : 'resource/create.js',
      readUrl   : 'resource/read.js',
      updateUrl : 'resource/update.js',
      deleteUrl : 'resource/delete.js'
    }
  }
};

// app.component.ts

export class AppComponent implements AfterViewInit {

    // other config
    taskboardProps = taskboardProps;
}

We don't recommend interacting with a store separately. The best is to use the Project for store interactions.

The ResourceStore then uses the URLs for AJAX requests for the different CRUD operations. You'll learn more about the ResourceStore in the store interaction section below.

The project is a top-level entity that holds multiple stores together.

You can pass autoLoad : true, if you want the data to be loaded automatically after a store has been initialized.

const taskboard = new TaskBoard({
  // other config
  project : {
    taskStore : {
      autoLoad  : true,
      createUrl : 'task/create.php',
      readUrl   : 'task/read.php',
      updateUrl : 'task/update.php',
      deleteUrl : 'task/delete.php'
    }
  }
});

Using Fetch

You can use the JavaScript Fetch API to fetch the data and feed it into the Bryntum TaskBoard:

const response = await fetch('resource/load.php');
const data = await response.json();

// feed it to TaskBoard like this:
const taskboard = new TaskBoard({
  project : {
   taskStore : {
        data : data
    }
  }
})

// or this:
taskboard.project.taskStore.data = data;

Understanding Project

The Project provides an easy way to define endpoints for server interactions. It accepts only two endpoints, one for loading data (loadUrl) and another for creating, updating, and deleting data (syncUrl).

const taskboard = new TaskBoard({
  // other config
  project : {
    loadUrl : 'read.js',
    syncUrl : 'sync.js'
  },
})

// TaskBoardConfig.tsx
import { type BryntumTaskBoardProps } from "@bryntum/taskboard-react";

export const taskboardProps: BryntumTaskBoardProps = {
  // other config
  project : {
    loadUrl : 'read.js',
    syncUrl : 'sync.js'
  }

};

import taskboardProps from "./taskboardConfig";
// App.tsx
const App = props => {

    return <BryntumTaskBoard {...taskboardProps} />
}

<script setup lang="ts">
import { BryntumTaskBoard } from '@bryntum/taskboard-vue-3';
import taskboardConfig  from './AppConfig.ts';
</script>

<template>
  <bryntum-taskboard v-bind="taskboardConfig" />
</template>

import { type BryntumTaskBoardProps } from '@bryntum/taskboard-vue-3';

export const taskboardConfig : BryntumTaskBoardProps = {
    // other config
    project : {
      loadUrl : 'read.js',
      syncUrl : 'sync.js'
    }
};

<bryntum-taskboard
    #taskboard
    [project]="taskboardProps.project!"
></bryntum-taskboard>

// app.config.ts
import { type BryntumTaskBoardProps } from '@bryntum/taskboard-angular';

export const taskboardProps: BryntumTaskBoardProps = {
  // other config
  project : {
    loadUrl : 'read.js',
    syncUrl : 'sync.js'
  }
};

// app.component.ts

export class AppComponent implements AfterViewInit {

    // other config
    taskboardProps = taskboardProps;
}

Check out the TaskBoard demo that uses the Project.

The Bryntum component then uses the project to handle CRUD operations for you. Whenever changes are made to tasks, assignments, resources, or anything else, a request is sent to the syncUrl path.

On the backend, you can see the type of change (Create, Update, or Delete) by looking at the request body. Then, based on the operation type, it sends the relevant data.

The following examples use the loadUrl to load the TaskBoard data with a fake API call using project.

Store interactions

You can use one of the stores, such as AssignmentStore or ResourceStore, to handle a specific type of store data. For example:

const customTaskStore = new TaskStore({
  createUrl : 'task/create.php',
  readUrl   : 'task/read.php',
  updateUrl : 'task/update.php',
  deleteUrl : 'task/delete.php'
});

new TaskBoard({
  project : {
    taskStore : customTaskStore
  }
})

We recommend you use this approach when you have API endpoints for a specific store, like AssignmentStore. The Bryntum TaskBoard will then use these endpoints to interact with the server for assignment-related data.

This means you can have multiple data-specific stores:

new TaskBoard({
  project : {
    taskStore : {
        createUrl : "assignment/create.php",
        readUrl   : "assignment/read.php",
        updateUrl : "assignment/update.php",
        deleteUrl : "assignment/delete.php"
    },
    resourceStore : {
      createUrl : "resource/create.php",
      readUrl   : "resource/read.php",
      updateUrl : "resource/update.php",
      deleteUrl : "resource/delete.php"
    }
  }
});

This is useful for managing a single store, but management becomes more difficult when you use all your stores this way. Therefore, we encourage you to use the Project to manage your data.

Headers

You can use the headers config to configure requests and send custom HTTP headers to the server:

project : {
  transport : {
    sync : {
        url : 'http://mycool-server.com/sync.php',
        // specify Content-Type for requests
        headers : {
            'Content-Type' : 'application/json'
        }
    }
  }
}

If you want send headers in a separate store :

// Configuring headers for each request
const resourceStore = new ResourceStore({
  readUrl : "resource/read.php",
  headers : {
    "Content-Type"   : "text/xml",
    "Accept-Charset" : "utf-8",
  },
});

Next, let's learn how data is structured for different requests.

Continue reading: Understanding structure.

Interacting with the server

Using Fetch

Understanding Project

Store interactions

Headers

Contents