Working with Server

Loading Data

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:

• tasks (e.g. http://localhost:3200/tasks) - get and save tasks;
• links (e.g. http://localhost:3200/links) - get and save links.

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

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.

How to customize backend model

To change data requests, get and process the responses you can:

• create your own backend service by extending the default one;
• define and override the needed methods;
• use custom backend service instead of the default one by including it into the override map.

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]]),
});

Changing calls to server

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());
  }
}

Parsing client-side data

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.

Backend Service methods

url(path)

Is used by other methods for preparing URLs for server requests.

Parameters:

• path (string) - a relative path.

Returns: the full path.

tasks()

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"
  },
  // ...
]

links()

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},
  // ...
]

addTask(obj, index, parent)

Adds a new task to server.

Parameters:

• obj (object) - task data object;
• index (number) - position of the node in the branch/root;
• parent (number) - ID of the parent task.

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"}

updateTask(id, obj)

Updates a specified task.

Parameters:

• id (number, string) - ID of the task being updated;
• obj (object) - task data object.

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.

removeTask(id)

Removes a specified task.

Parameters:

• id (number, string) - ID of the task being removed.

Returns: a promise that resolves with an empty object.

Request:

DELETE
http://localhost:3200/tasks/0Nm5SeYIM0qUfmRv

Response:

The server returns an empty object.

addLink(obj)

Adds a new link.

Parameters:

• obj (object) - link data object.

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"}

updateLink(id, obj)

Updates a specified link.

Parameters:

• id (number, string) - ID of the link being updated;
• obj (object) - link data object.

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.

removeLink(id)

Removes a specified link.

Parameters:

• id (number, string) - ID of the link being removed.

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