Skip to main content

Working with server

DHTMLX To Do List 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 comes with the built-in Go and Node backend. But you can use your custom server scripts as well.

RestDataProvider​

The To Do List 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-task"
  • "update-task"
  • "delete-task"
  • "add-project"
  • "update-project"
  • "delete-project"
  • "set-project"
  • "move-task"
  • "clone-task"

REST methods​

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

  • getProjects() - gets a promise with the projects data
  • getProjectTasks() - gets a promise with the tasks data of the specified project
  • getTags() - gets a promise with a list of default tags
  • getTasks() - gets a promise with the tasks data
  • getUsers() - gets a promise with the users data
  • setAPI() - sets API of the To Do List component into RestDataProvider

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 new RestDataProvider() constructor by passing the corresponding URL as a parameter.

const { ToDo, Toolbar, RestDataProvider } = todo;

const activeProject = null;
const url = "https://some_backend_url";
const restProvider = new RestDataProvider(url);
Promise.all([
    restProvider.getProjectTasks(activeProject),
    restProvider.getUsers(),
    restProvider.getProjects(),
    restProvider.getTags(),
]).then(([tasks, users, projects, tags]) => {
    const list = new ToDo("#root", {
        tasks,
        users,
        projects,
        tags,
        activeProject,
    });
    const toolbar = new Toolbar("#toolbar", {
        api: list.api,
    });

    list.api.setNext(restProvider);
    restProvider.setAPI(list.api);
});
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​

The snippet below shows you how to connect RestDataProvider to the backend and load server data dynamically: