Working with Server

Loading Data

ToDo widget expects a backend server to fetch tasks, projects and users. You can provide a link to it by the url setting:

webix.ui({
    view: "todo",
    url:"https://docs.webix.com/todo-backend/"
});

ToDo will load and save data using the next URLs:

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

Sample backend for ToDo 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 todo.services.Backend {
    // define and override methods here
}
 
webix.ui({
    view: "todo",
    url:"http://localhost:3200/",
    override: new Map([[todo.services.Backend, MyBackend]]),
});

Changing calls to server

You can send AJAX requests to your server by using the needed URLs, e.g.:

Adding a task

class MyBackend extends todo.services.Backend {
  addTask(task) {
    return webix.ajax.post("//localhost:3200/tasks", task)
      .then(res => res.json());
  }
}

Backend Service Methods

Below you can find descriptions of the following methods:

• allTasks()
• projectTasks()
• addTask()
• updateTask()
• removeTask()
• moveTask()
• indentTask()
• unindentTask()
• cloneTask()
• projects()
• addProject()
• removeProject()
• updateProject()
• users()

allTasks()

Is used to get all available tasks.

Returns: a promise.

Request:

GET http://localhost:3000/tasks

Response:

The server returns an array of tasks:

[
    {
        id: 1,
        text: "Learn about Webix",
        checked: true,
        assigned: ["user_1", "user_2", "user_3", "user_4"],
        project: "First project",
        parent: 0,
    },
    // other tasks
 
]

projectTasks(id)

Is used to get all tasks from a specific project.

Parameters:

• id (string) - project ID.

Returns: a promise.

Request:

GET http://localhost:3000/tasks/projects/${id}

Response:

The server returns an array of tasks for a specific project:

[
  {
        id: 6,
        text: "Data Presentation",
        checked: true,
        project: "ui",
        parent: 0,
    },
  // other tasks
]

addTask(id, obj, index, parent)

Adds a new task to the server.

Parameters:

• id (string, number) - task local ID;
• obj (object) - base object storing information about the project;
• index (number) - index in the local collection. 0 by default;
• parent (string, number) - the ID of the parent task.

Returns: a promise that resolves with an object containing the ID of the new event.

Request:

POST http://localhost:3000/tasks
Raw JSON
{
     "project": 7,
     "parent": 0,
     "after": 12  // (previous element id)
}

Response:

The server returns an object containing the ID of the new task:

{id: 5}

updateTask(id, fields)

Updates a specified task.

Parameters:

• id (string, number) - task ID;
• fields - fields to update.

Returns: a promise.

Request:

PUT http://localhost:3000/tasks/${id}
Raw JSON (obj with new fields)
{
        “id”: 6,
        “text”: "Data Presentation",
        “checked”: true,
        “project”: "ui",
        “parent”: 0
 }

Response:

The server returns an object containing empty ID:

{ “id”: 0 }

removeTask(id)

Removes a specified task.

Parameters:

• id (string, number) - task ID.

Returns: a promise.

Request:

DELETE http://localhost:3000/tasks/${id}

Response:

The server returns an object containing empty ID:

{ “id”: 0 }

moveTask(id, project)

Is called to move a task to a different project.

Parameters:

• id (string, number) - task ID;
• project (string) - the name of the project you want to move to.

Returns: a promise.

Request:

PUT http://localhost:3000/move/${id}

Response:

The server returns an object containing empty ID:

{ “id”: 0 }

indentTask(id, parent)

Is called to indent a task.

Parameters:

• id (string, number) - task ID;
• parent (string, number) - the ID of the new parent task.

Returns: a promise.

Request:

PUT http://localhost:3000/indent/${id}
Raw JSON:
{
    “parent”: 5
}

Response:

The server returns an object containing empty ID:

{ “id”: 0 }

unindentTask(id, parent)

Is called to indent a task.

Parameters:

• id (string, number) - task ID;
• parent (string, number) - the ID of the parent task.

Returns: a promise.

Request:

PUT http://localhost:3000/unindent/${id}
Raw JSON:
{
    “parent”: 4
}

Response:

The server returns an object containing empty ID:

{ “id”: 0 }

cloneTask(index, parent, project, cache)

Is called to clone a task.

Parameters:

• index (number) - the index of the task where the cloned tasks will be inserted;
• parent (string, number) - the ID of the parent task;
• project (string) - the name of the project in which task was created;
• cache (array) - an array of the cloned tasks with the client IDs.

Returns: a promise.

Request:

POST http://localhost:3000/clone
Raw JSON
{
    “after”: 1,
    “parent”: 2,
    “project”: 1,
    “batch”: [
        {
            “id”: “task1”,
            “text”: "Learn about Webix",
            “checked”: true,
            “assigned”: ["user_1", "user_2", "user_3", "user_4"],
            “project”: "First project",
            “parent”: 0,
        },
        // other tasks
     ]
}

Response: an array containing the server IDs of the cloned tasks.

projects()

Is used to get all available projects.

Request:

GET http://localhost:3000/projects

Returns: an array of projects.

Response:

The server returns an array of projects:

[
    { id: "ui",
      value: "UI Widgets"
    },
    // other projects
]

addProject(oid, value)

Adds a new project.

Parameters:

• oid (string) - project ID;
• value (string) - the name of the project.

Returns: a promise that resolves with a project ID object.

Request:

POST http://localhost:3000/projects
Raw JSON:
{
    “value”: “project name”
}

Response: The server returns a project ID object:

{"id":14}

removeProject(id)

Deletes a specified project.

Parameters:

• id (string) - project ID.

Returns: a promise.

Request:

DELETE http://localhost:3000/projects/${id}

Response:

The server returns an object containing empty ID:

{ “id”: 0 }

updateProject(id, value)

Updates a specified project.

Parameters:

• id (string) - project ID;
• value (string) - the name of the project.

Returns: a promise.

Request:

PUT http://localhost:3000/projects/${id}
Raw JSON:
{
    “value”: “new project name”
}

Response:

The server returns an object containing empty ID:

{ “id”: 0 }

users()

Is used to get all users.

Request:

GET http://localhost:3000/users

Returns: an array of users.

Response:

The server returns an array of users:

[
    {
      id: "user_1",
      value: "Don Smith",
      path: "../common/img/user_1.jpg"
    },
    // other users
]

Back to top