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).
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 datagetProjectTasks()
- gets a promise with the tasks data of the specified projectgetTags()
- gets a promise with a list of default tagsgetTasks()
- gets a promise with the tasks datagetUsers()
- gets a promise with the users datasetAPI()
- sets API of the To Do List component into RestDataProvidersend()
- sends a necessary request to the server and gets a promise with or without data depending on the request
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);
});
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: