Working with Server

Loading Data

Gantt is a backend-oriented component. If you do not have a backend server, you should override the methods of the Backend service and return promises of client data.

Backend Service

Backend is a server-side model. It is defined as an object and has methods for sending requests.
Check out the full list of methods.

How to Override Backend Service

How to override Backend:

• extend it
• use the override setting of Gantt

class MyBackend extends gantt.services.Backend {
    // define and override methods here
}
 
webix.ui({
    view: "gantt",
    url:"https://docs.webix.com/gantt-backend/",
    override: new Map([[gantt.services.Backend, MyBackend]]),
});

Calls to Backend Server

You can send AJAX requests to your backend server:

class MyBackend extends gantt.services.Backend {
  addLink(link) {
    return webix.ajax("//localhost:3200/links", link)
      .then(res => res.json());
  }
}

Working with Client Data

If you have client data, you can return it inside of a promise:

class MyBackend extends gantt.services.Backend {
  tasks() {
    return Promise.resolve({
      tasks:{
        "1": {
          "text":"Project A",
          "start_date":"2018-06-13 00:00:00", 
          "duration":"1",
          "parent":"0", 
          // other fields
        },
        // other tasks objects
      }
    });
  }
}

Backend Service methods

url(path)

url() is used by other methods for making URLs for server requests.

Parameters:

• path (string) - a relative path.

Returns:

• url (string) - the full path.

tasks()

The method gets called upon widget initialization.

Returns:

• promise - a promise that resolves with an array of existing tasks.

Request info:

• Method: GET
• URL example:

http://localhost:3000/tasks

Contains the URL segment.

Response from the server:

The server returns an array with 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",
    "open":true,"end_date":"2018-06-14 00:00:00","id":"1"
  },
  {
    "text":"Task A1","start_date":"2018-06-12 00:00:00",
    "duration":"2","progress":31,"parent":"1",
     "notes":"Contact Rob for details",
    "end_date":"2018-06-14 00:00:00","id":"1.1"
  },
  // ...
]

links()

The method gets called upon widget initialization.

Returns:

• promise - a promise that resolves with an array of existing links.

Request info:

• Method: GET
• URL example:

http://localhost:3000/links

Contains the URL segment.

Response from the server:

The server returns an array with link data objects.

[
  {"source":"1.2","target":"2","type":1},
  // ...
]

addTask(obj, index, parent)

The method adds a new task.

Parameters:

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

Returns:

The method returns a promise.

Request info:

• Method: POST
• URL example:

http://localhost:3200/tasks

Contains the URL segment.

Form Data example:

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

updateTask(id, obj)

The method updates a specified task.

Parameters:

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

Returns:

The method returns a promise.

Request info:

• Method: PUT
• URL example:

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

Contains the URL segment and the task ID.

Form Data example:

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

removeTask(id)

The method removes a specified task.

Parameters:

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

Returns:

The method returns a promise.

Request info:

• Method: DELETE
• URL example:

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

Contains the URL segment and the task ID.

addLink(obj)

The method adds a new link.

Parameters:

• obj (object) - link data object.

Returns:

The method returns a promise.

Request info:

• Method: POST
• URL example:

http://localhost:3200/links

Contains the URL segment.

Form Data example:

source: 1.2
target: zA4TuVPD3p7DwckO
type: 0

updateLink(id, obj)

The method updates a specified link.

Parameters:

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

Returns:

The method returns a promise.

Request info:

• Method: PUT
• URL example:

http://localhost:3200/links/3i3A6zpV07hpeKeY

Contains the URL segment and the link ID.

Form Data example:

type: 1

removeLink(id)

The method removes a specified link.

Parameters:

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

Returns:

The method returns a promise.

Request info:

• Method: DELETE
• URL example:

http://localhost:3200/links/3i3A6zpV07hpeKeY

Contains the URL segment and the link ID.

Back to top