Working with Server

Loading Data

User Manager expects a backend server to fetch data. You can provide a link to it by the url setting:

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

User Manager will load and save data using the next URLs:

users (e.g. http://localhost:3200/users) - get and save users;
roles (e.g. http://localhost:3200/roles) - get and save roles;
rules (e.g. http://localhost:3200/rules) - get rules;
user (e.g. http://localhost:3200/user/{user_id}/credentials) - get and save user credentials;
logs (e.g. http://localhost:3200/logs/meta) - get meta info.

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

Changing calls to server

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

Adding a user

class MyBackend extends userManager.services.Backend {
  addUser(data) {
    return webix.ajax().post("//localhost:3200/users", data)
      .then(data => data.json());
  }
}

Parsing client-side data

If you need to fill User Manager with client-side data, you can return it as a promise like the following:

Client-side data

class MyBackend extends userManager.services.Backend {
    users() {
        return webix.promise.resolve(users);
    }
    roles() {
        return webix.promise.resolve(roles);
    }
    rules() {
      return webix.promise.resolve(rules);
    }
  }

See the required format of the incoming data.

Backend Service Methods

Below you can find descriptions of the following methods:

addCredentials()
addRole()
addUser()
avatar()
credentials()
deleteCredentials()
deleteRole()
deleteUser()
get()
logs()
logsMeta()
meta()
resetPassword()
roles()
rules()
save()
updateRole()
updateUser()
users()

get(path)

Is called for all data fetching operations. It issues a GET request for the defined path.

Parameters:

path (string) - a relative path.

Returns: a promise that resolves with the data.

save(path, data, mode)

Is called for all data saving operations. It issues a POST/DELETE/PUT request with an application/json content type depending on user action.

Parameters:

path (string) - a relative path;
data (object) - an object with data for the operation;
mode (number) - mode, where numbers 0, 1 or 2 stand for POST, DELETE or PUT request method correspondingly.

Returns: a promise that resolves with a response data.

users()

Is called upon widget initialization.

Returns: a promise that resolves with an array of user objects.

Request:

GET http://localhost:3200/users

Response:

The server returns an array of user objects.

[
  {"id":87,"name":"Berni Mayour","email":"","details":"",
  "visited":"2020-05-21T10:02:06Z","registered":"2020-05-21T10:02:06Z",
  "avatar":"http://localhost:3200/users/87/avatar/503723673.jpg",
  "status":1},
 
  {"id":95,"name":"John Doe","email":"","details":"",
  "visited":"2020-05-31T17:21:12Z","registered":"2020-05-31T17:21:12Z",
  "avatar":"","status":0}
]

addUser(data)

Adds new user.

Parameters:

data (object) - user data.

Returns: a promise that resolves with the user object ID.

Request:

POST http://localhost:3200/users
Request Payload
name: "Walter Scott"

Response:

The server returns the user object ID.

{"id":99}

deleteUser(id)

Deletes a specified user.

Parameters:

id (string) - user ID.

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

Request:

DELETE http://localhost:3200/users/98

Response:

The server returns the user object ID.

{"id":98}

updateUser(id, data)

Updates a specified user.

Parameters:

id (string) - user ID;
data (object) - new data.

Returns: a promise that resolves with the user object ID.

Request:

PUT http://localhost:3200/users/99
Request Payload
avatar: ""
details: ""
email: "elly.soyer@example.com"
id: 98
name: "Elly Soyer"
registered: "2020-05-31T17:42:34Z"
status: 1
visited: "2020-05-31T17:42:34Z"

Response:

The server returns the user object ID.

{"id":98}

roles()

Is called when user opens the roles list.

Returns: a promise that resolves with an array of role objects.

Request:

GET http://localhost:3200/roles

Response:

The server returns an array of role objects.

[
  {"id":1,"name":"The Creator","color":"#00a037","details":""},
  {"id":2,"name":"Sales","color":"#e7a90b","details":""},
  {"id":3,"name":"Admin","color":"#038cd9","details":""}
]

addRole(data)

Adds new role.

Parameters:

data (object) - role data.

Returns: a promise that resolves with the role object ID.

Request:

POST http://localhost:3200/roles
Request Payload
name: "Manager"

Response:

The server returns the role object ID.

{"id":5}

deleteRole(id)

Deletes a specified role.

Parameters:

id (string)- role ID.

Returns: a promise that resolves with the role object ID.

Request:

DELETE http://localhost:3200/roles/3

Response:

The server returns the role object ID.

{"id":3}

updateRole(id, data)

Updates a specified role.

Parameters:

id (string) - role ID;
data (object) - new data.

Returns: a promise that resolves with the role object ID.

Request:

PUT http://localhost:3200/roles/7
Request Payload
color: "#006EDD"
details: ""
id: 7
name: "Designer"
rules: [7, 1]

Response:

The server returns the role object ID.

{"id":7}

rules()

Is called when user opens rules list.

Returns: a promise that resolves with an array of the rule objects.

Request:

GET http://localhost:3200/rules

Response:

The server returns an array of rule objects.

[
  {"id":1,"short":"CanSeeUsers","long":"Can see user details and access levels"},
  {"id":2,"short":"CanEditUsers","long":"Can modify user details and access levels"},
  {"id":3,"short":"CanAdminProjects","long":"Can create projects"}
]

meta()

Is called when user opens the audit tab.

Returns: a promise that resolves with an object of the category relations.

Request:

GET http://localhost:3200/meta

Response:

The server returns an object containing information on how the categories are related to one another. The structure is as follows:

{
  "RoleRule":[[3,1]],
  "UserRole":[[4,3]], // a user with ID 4 has a role with ID 3
  "UserRule":[[2,6]]
}

avatar(id)

Is called when user uploads a new avatar.

Parameters:

id (string) - user ID.

Returns: an object with the avatar data.

Request:

POST http://localhost:3200/users/95/avatar

Response:

The server returns an object with information about uploaded avatar.

{
  "status":"server",
  "value":"http://localhost:3200/users/95/avatar/photo.jpg"
}

credentials(id)

Is called when user goes to the edit area.

Parameters:

id (string) - user ID.

Returns: a promise that resolves with an array of user credentials.

Request:

GET http://localhost:3200/user/87/credentials

addCredentials(id, data)

Adds a credential to the user.

Parameters:

id (string) - user ID;
data (object) - new data.

Returns: a promise that resolves with the user object ID.

Request:

POST http://localhost:3200/user/100/credentials
Request Payload
record: "test"
source: 1
user_id: 100

Response:

The server returns the user object ID.

{"id":100}

resetPassword(id, data)

Is called upon resetting user password.

Parameters:

id (string) - user ID;
data (object) - new password.

Returns: a promise that resolves with the user object ID.

Request:

PUT http://localhost:3200/user/100/credentials
Request Payload
id: 23
record: "qwerty123"

Response:

The server returns the user object ID.

{"id":100}

deleteCredentials(id, credId)

Is called when user deletes credentials.

Parameters:

id (string) - user ID;
credId (string) - credential ID.

Returns: a promise that resolves with the credential object ID.

Request:

DELETE http://localhost:3200/user/100/credentials/23

Contains the URL segments, the ID of the user and the ID of the credential.

Response:

The server returns the credential object ID.

{"id":23}

logs(type, id)

Is called when user go to the audit area and triggers one of the records (logins, changes to or changes by).

Parameters:

type (string) - record type. Can be login, user or by-user;
id (string) - user ID.

Returns: a promise that resolves with an array of audit objects.

Request:

GET http://localhost:3200/logs/by-user/100

Contains the URL segment, type of the record and the user's ID.

Response:

The server returns an array of audit objects. Below it is audit for the changes to record.

[
  {"id":506,"user_id":1,"target_id":87,"type":5,
  "details":"Berni Mayour","date":"2020-05-21T10:02:06Z"},
  {"id":524,"user_id":1,"target_id":87,"type":6,
  "details":"role Guest added","date":"2020-05-21T14:36:56Z"}
]

logsMeta()

Is called when user goes to the audit area.

Returns: a promise that resolves with an array of the actions performed in User Manager.

Request:

GET http://localhost:3200/logs/meta

Response:

The server returns an object containing the audit of the actions performed in User Manager.

{
  "1":{"name":"User login","target":"user"},
  "2":{"name":"Role added","target":"role"},
  "3":{"name":"Role data changed","target":"role"},
}