Working with Server

Loading Data

Gantt widget expects a backend server to fetch tasks and links. It will also fetch resources, categories and assignments, if the resources property is set to true. You can provide a link to the backend 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
• resources (e.g. http://localhost:3200/resources) - get resources
• categories (e.g. http://localhost:3200/categories) - get categories
• assignments (e.g. http://localhost:3200/assignments) - get and save assignments

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

Below you can find descriptions of the following methods:

• addAssignment()
• addLink()
• addTask()
• links()
• removeAssignment()
• removeLink()
• removeTask()
• reorderTask()
• tasks()
• updateAssignment()
• updateLink()
• updateTask()
• url()

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, split)

Updates a specified task.

Parameters:

• id (number, string) - ID of the task being update
• obj (object) - task data object
• split (boolean) - defines whether the task is split.

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
 
// if user makes a task split
PUT http://localhost:3200/tasks/{id}/split

If split is true, the obj parameter is the data for the new child, not for the updated task. Meanwhile the updated task is marked with {type: "split"}. Note that if, the task being split is a milestone you need to change its duration and progress to 1.

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.

reorderTask(id, config)

Is called when a task has been moved within the tree.

Parameters

• id (number, string) - ID of the task moved
• config (object) - configuration object of the moving operation with the following fields:
  • parent (string, number) - parent branch ID
  • target (string, number) - target item ID
  • mode (string) - moving mode. The possible values are:
    • "first" - if the task is placed at the first position in the parent
    • "before" - if the task is placed before the target one
    • "after" - if the task is placed after the target one
    • "last" - if the task is placed at the last position in the parent.

Returns: a promise that resolves with an object containing the ID of the task moved.

Request:

PUT http://localhost:3200/tasks/1.5/position
Form data
parent: 0
mode: after
target: 1.2

The URL contains the URL segments and the ID of the task moved.

Response:

The server returns an object with the task ID:

{
  id:"1.5"
}

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.

addAssignment(obj)

Adds a resource to a task.

Parameters:

• obj (object) - an object with "task", "resource" and "unit" fields.

Returns: a promise that resolves with an object with the task resource ID.

Request:

POST
http://localhost:3200/assignments
Form Data
resource: 3
value: 8
task: 1.5

Response:

The server returns an object with the task resource ID.

updateAssignment(id, obj)

Updates a specified task resource.

Parameters:

• id (string, number) - task resource ID
• obj (object) - an object with the record fields.

Returns: a promise that resolves with an empty object.

Request:

PUT
http://localhost:3200/assignments/KTGxFOOho2JLBTJt
Form Data
resource: 2

Response:

The server returns an empty object.

removeAssignment(id)

Deletes a specified task resource.

Parameters:

• id (string, number) - task resource ID.

Returns: a promise that resolves with an empty object.

Request:

DELETE
http://localhost:3200/assignments/KTGxFOOho2JLBTJt

Response:

The server returns an empty object.

Back to top