Working with Data

Loading Data

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

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

Data Structure

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;

Jet Services

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

Local Services

// 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
});
  • LocalUsers - stores all user data locally
$$("dm").getService("localusers")
  .users()
  .then(users => {/* Data collection */});
  • LocalTags - stores all tags locally
$$("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

  • Operations - synchronizes the backend data with the client data
// 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:

  • Backend - file system data
  • Users - user-related data
  • Tags - tag-related data

If you do not have a backend server or require custom logic, you can override the Backend services.

Data Operations

All data operations of File Manager work for Document Manager. Document Manager has more operations available.

Getting File System Data

The contents of group folders are stored locally in DataCollections like it's done for regular directories. Each group folder 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);

Once loaded, a collection (directory) is cached, so we can always access it in the synchronous mode.

If you're not sure if the directory is loaded, you can request files asynchronously. Data will be loaded in process:

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

Getting User Data

All users are also stored locally in a DataCollection. To get the collection, call the users() method of the LocalUsers service:

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

The method users() can take the only parameter:

  • force (boolean) - if true requests a user collection from the server even if data are available locally.

Returns:

  • users (promise) - a promise that resolves with a DataCollection.

Getting Tags

All tags are also stored locally in a DataCollection. To get the collection, call the tags() method of the LocalTags service:

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

The method tags() can take the only parameter:

  • force (boolean) - if true requests a user collection from the server even if data are available locally.

Returns:

  • tags (promise) - a promise that resolves with a DataCollection.

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 users and tags methods of the Local Service and passing the argument true to the methods:

const data = $$("fm").getService("local");
data.users(true);
data.tags(true);
Back to top
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of javascript document explorer product.