Gantt widget expects a backend server to fetch tasks and links. You can provide a link to it by the url setting:
webix.ui({
view: "gantt",
url:"http://localhost:3200/"
});
Gantt will load and save data using the next URLs:
Sample backend for Gantt is available for downloading.
If you do not have a backend server, you can customize the methods of the Backend service and provide client-side data as a promise.
Backend service is a server-side model that contains methods for sending requests. They are called by the Operations service when data needs to be loaded or saved.
Check out the full list of methods below.
To change data requests, get and process the responses you can:
class MyBackend extends gantt.services.Backend {
// define and override methods here
}
webix.ui({
view: "gantt",
url:"http://localhost:3200/",
override: new Map([[gantt.services.Backend, MyBackend]]),
});
You can send AJAX requests to your server by using the needed URLs, e.g.:
Adding a link
class MyBackend extends gantt.services.Backend {
addLink(link) {
return webix.ajax("//localhost:3200/links", link)
.then(res => res.json());
}
}
If you need to fill Gantt with client-side data, you can return it as a promise inside the following methods:
Client-side data
class MyBackend extends gantt.services.Backend {
tasks() {
return webix.promise.resolve(tasks);
}
links() {
return webix.promise.resolve(links);
}
}
}
Related sample: Gantt:Local Data
See the required format of the incoming data.
Is used by other methods for preparing URLs for server requests.
Parameters:
Returns: the full path.
Is called upon widget initialization to fetch tasks.
Returns: a promise that resolves with an array of tasks.
Request:
GET http://localhost:3000/tasks
Contains the URL segment.
Response:
The server returns an array of tasks data objects.
[
{
"text":"Project A","start_date":"2018-06-13 00:00:00",
"duration":"1","parent":"0","progress":0.5,
"notes":"Weekly meeting required", "type": "project",
"open":true,"end_date":"2018-06-14 00:00:00","id":"1"
},
// ...
]
Is called upon widget initialization to fetch links.
Returns: a promise that resolves with an array of links.
Request:
GET http://localhost:3000/links
Response:
The server returns an array of link data objects.
[
{"source":"1.2","target":"2","type":1},
// ...
]
Adds a new task to server.
Parameters:
Returns: a promise that resolves with an object with the new task ID.
Request:
POST http://localhost:3200/tasks
Form Data
text: Server intergration
start_date: 2018-06-12 00:00:00
end_date: 2018-06-13 00:00:00
duration: 1
progress: 0
index: 0
parent: 2
Response:
The server returns an object with the new task ID:
{ "id": "thfd8ghfdhtr1"}
Updates a specified task.
Parameters:
Returns: a promise that resolves with an empty object.
Request:
PUT http://localhost:3200/tasks/0Nm5SeYIM0qUfmRv
Form Data
progress: 0
parent: 2
text: DB implementation
start_date: 2018-06-12 00:00:00
end_date: 2018-06-14 00:00:00
duration: 2
id: 0Nm5SeYIM0qUfmRv
Response:
The server returns an empty object.
Removes a specified task.
Parameters:
Returns: a promise that resolves with an empty object.
Request:
DELETE
http://localhost:3200/tasks/0Nm5SeYIM0qUfmRv
Response:
The server returns an empty object.
Adds a new link.
Parameters:
Returns: a promise that resolves with an object with the new link ID.
Request:
POST http://localhost:3200/links
Form Data
source: 1.2
target: zA4TuVPD3p7DwckO
type: 0
Response:
The server returns an object with the new link ID:
{"id":"4znqxJbxGpA8x0U6"}
Updates a specified link.
Parameters:
Returns: a promise that resolves with an empty object.
Request:
PUT http://localhost:3200/links/3i3A6zpV07hpeKeY
Form Data
type: 1
Response:
The server returns an empty object.
Removes a specified link.
Parameters:
Returns: a promise that resolves with an empty object.
Request:
DELETE
http://localhost:3200/links/3i3A6zpV07hpeKeY
Response:
The server returns an empty object.
Back to top