Working with Data

Loading Data

Document Manager is a backend-oriented component and expects data loaded by the URL:

view:"docmanager", url:"remote/data"

Data Structure

Files

Document Manager expects a JSON array, where each element (data item) contains the following fields:

• value - the name of a file or folder (including the extension)
• id - the item id, represents the path to the file/folder
• size - the size in bytes
• date - a JS Date object, a string formatted according to webix.i18n.parseFormat or a timestamp of a Date
• type - file type:
  • "archive" for .zip, .rar, .7z, .tar, .gz files
  • "audio" for .mp3, .ogg, .flac, .wav
  • "code" for .html, .htm, .js, .json, .css, .scss, .sass, .less, .php, .sh, .coffee, .txt, .md, .go, .yml files
  • "document" for docx, doc, odt, xls, xslx, pdf, djvu, djv, pptx, ppt files
  • "video" for .mpg, .mp4, .avi, .mkv, .ogv files
  • "image" for .png, .jpg, .jpeg, .webp, .gif, .tiff, .tif, .svg files
  • "file" (none of the above)
  • "folder" for directories
• star (boolean) - defines whether a file/folder is added to Favorite or not;
• users (array) - an array of ID's of the users that can access a file/folder.

Folders

Document Manager expects JSON data where each array element (folder) contains the following fields:

• value - folder name;
• id - folder ID. Represents the path to the folder;
• size - folder size in bytes;
• date - a JS Date object, a string formatted according to webix.i18n.parseFormat or a timestamp of a Date;
• type - "folder" for directories;
• data - array of data items the folder contains.

Data Services

Document Manager inherits all public services of File Manager and has several of its own:

Local Services

1. Local Data

• stores data on the client side in Data Collections
• provides methods for getting, removing and repainting the data
• provides methods for getting and repainting the directories

// update the file data on the client side
const data = {
    value:"myadventures.txt",
    date: new Date(),
    size:1231,
    id:"/myadventures.txt",
    type:"code"
};
$$("docs").getService("local").updateFile(data.id, {
    size: data.size, date: data.date
});

2. LocalUsers

• provides a method for getting users collection

$$("dm").getService("localusers")
  .users()
  .then(users => {/* Data collection */});

3. LocalTags

• provides a method for getting tags collection
• provides methods for adding/updating/removing tags

$$("dm").getService("localtags")
  .tags() // access to tags data collection
  .then(t => {
    // t is a DataCollection with all tags
    const tags = t.serialize(); // an array with tags
  });

Operations Service

4. Operations

• provides methods for adding/removing/updating data
• provides methods for manipulating data (e.g. copy, open, move, etc.)

// open a file in a new browser tab
const file = {
    value:"pixeljuice.pdf",
    date: new Date(),
    size:7231,
    id:"/pixeljuice.pdf",
    type:"document"
};
$$("docs").getService("operations").open(file);

Backend Services

These services work with the backend server:

5. Backend

• provides methods for issuing requests to the backend to fetch data and save the changes back

const back = $$("dm").getService("backend");
back.folders(id).then((data) => console.log(data));

6. Users

Provides methods for issuing requests to the backend for:

• sharing/unsharing files with users
• getting/adding/updating/removing file comments
• getting user avatar

const users = $$("dm").getService("users");
users.comments(commentID); // retrieving file comments

7. Tags

Provides methods for issuing requests to the backend for:

• getting and setting tags
• adding/updating/removing tags

const tags = $$("dm").getService("tags");
tags.removeTag(id) // removes a specified tag from the server

8. Versions

Provides methods for issuing requests to the backend for:

• getting and restoring versions of a file
• reading text and excel files

const versions = $$("dm").getService("versions");
versions.versions(id); // getting version history of a specified file

Data Operations

All data operations of File Manager are applicable to Document Manager. It also has its own API.

Getting File System Data

The contents of group folders are stored in DataCollections. Each collection is accessible via its source. To get the current source, call the getState method:

const source = $$("dm").getState().source;

To get files from a group folder, call the files() method of LocalData with the following parameters:

• path (string) - for a group folder always "/";
• sync (boolean) - if true, we assume that the directory is available on the client.
• source (string) - points to a group folder (favorite/recent/trash/shared) or to the root directory ("files").

const source = $$("dm").getState().source;
const data = $$("dm").getService("local")
  .files("/", true, source);

If you're not sure whether the directory is loaded, you can request files asynchronously:

const data = $$("dm").getService("local")
  .files("/", false, source)
  .then(files => {
    /* files is a data collection */
  });

Getting User Data

All users are stored in a DataCollection. To get the collection, call the users() method of the LocalUsers service. The method can take the only parameter:

• force (boolean) - if true reloads a user collection beforehand.

$$("dm").getService("localusers")
  .users()
  .then(users => {/* Data collection */});

Getting Tags

All tags are stored in a DataCollection. To get the collection, call the tags() method of the LocalTags service. The method can take the only parameter:

• force (boolean) - if true reloads a tags collection beforehand.

$$("dm").getService("localtags")
  .tags() // access to tags data collection
  .then(t => {
    const tags = t.serialize(); // an array with tags
  });

Clearing Data

Clearing files and folders

Document Manager supports all operations available for File Manager.

Clearing Group folders

You can remove all elements from the currently opened group folder by calling the clearAll() method of its collection:

const data = $$("dm").getService("local");
const path = $$("dm").getState().source;
 
data.files("/", false, source).then(collection => 
  collection.clearAll());

Clearing user and tag data

You can also clear users and tags local collections:

data.users().then(collection => collection.clearAll());
data.tags().then(collection => collection.clearAll());

Reloading Data

Document Manager supports all operations available for File Manager.

Reloading Group Folders

To refresh contents of a group folder, call refresh() of LocalData:

const data = $$("dm").getService("local");
const source = $$("dm").getState().source;
data.refresh("/", source);

Reloading Users and Tags

You can reload users and tags by calling the users() and tags() methods of the Local Service and passing the argument true to the methods:

const data = $$("dm").getService("local");
data.users(true);
data.tags(true);

Back to top