Skip to main content

Working with server

JavaScript Kanban allows working both with the client and server data. The widget doesn't have any special requirements for the backend. It can be easily connected with any backend platform which supports the REST API (RESTful API).

info

By default, the widget is shipped with the built-in Go and Node backend. But you can use your custom server scripts as well

RestDataProvider

JavaScript Kanban has the RestDataProvider service that completely supports REST API for dealing with the backend. It allows interacting with the server and perform the following data operations:

  • "add-card"
  • "add-column"
  • "add-row"
  • "delete-card"
  • "delete-column"
  • "delete-row"
  • "move-card"
  • "move-column"
  • "move-row"
  • "update-card"
  • "update-column"
  • "update-row"

REST methods

The RestDataProvider service includes the special REST methods for dynamic data loading:

Interacting with backend

To interact with the server, you need to connect RestDataProvider to the corresponding server scripts. If you want to use the built-in backend, you can find the needed scripts in the following repositories:

or you can create a custom one.

To connect RestDataProvider to the backend, you need to call the kanban.RestDataProvider constructor by passing the corresponding URL as a parameter.

const url = "https://some_backend_url";
const restProvider = new kanban.RestDataProvider(url);

Promise.all([
restProvider.getUsers(),
restProvider.getCards(),
restProvider.getColumns(),
restProvider.getRows()
]).then(([users, cards, columns, rows]) => {
const board = new kanban.Kanban("#root", {
cards,
columns,
rows,
rowKey: "type",
editorShape: [
...kanban.defaultEditorShape,
{
type: "multiselect",
key: "users",
label: "Users",
values: users
}
]
});
board.api.setNext(restProvider);
});
info

You need to include RestDataProvider into the Event Bus order via the api.setNext() method to perform operations with data (adding, deleting etc) and send the corresponding requests to the server

Example

In this snippet you can see how to connect RestDataProvider to the Go backend and load server data dynamically: