DHTMLX Vault is a developer-friendly JavaScript tool designed to facilitate content management on a web page, namely uploading and managing various file types in the most convenient way. And here comes a major update for this helpful product to version 5.0.
Following the example of Suite and Spreadsheet libraries, this release brings onboard numerous styling capabilities. First of all, there are four new built-in themes: Light, Dark, Light High Contrast, and Dark High Contrast. Moreover, these themes can be customized following your project requirements and support dynamic color change. Another significant novelty in v5.0 is the ability to customize the file uploader appearance with templates. On top of that, now you can also use three updated Vault integration demos with React, Angular, Vue, and the new one with Svelte.
In this blog post, we provide a detailed overview of this release.
New Customizable Themes
In version 5.0, we empowered the Vault component with four new built-in themes developed in accordance with international standards. The list of available options now includes Light (default), Dark, Light High Contrast, and Dark High Contrast themes. With the introduction of high-contrast themes, our Vault component becomes accessible for end-users with visual disabilities.
When it comes to the practical application of new themes, you have two ways to do that. First, you can make use of the dhx.setTheme() method to set a certain theme in your JavaScript file uploader. This method takes the following string parameters:
- theme (required) – names the theme (built-in or custom) that should be applied (default value – “light”),
- container (optional) – allows using an HTMLElement, a container ID (or a Layout cell ID), or a document.documentElement (default value) as the container, where the chosen theme will be used.
Alternatively, you can apply the desired theme with the data-dhx-theme attribute. Here you have two possible options:
- specify the data-dhx-theme attribute for a particular container:
<div data-dhx-theme="dark" style="height: 100%" id="vault"></div>
- specify the data-dhx-theme attribute for an HTML element:
Check out this page to learn more about setting Vault themes.
Now, we want to draw your attention to some points that should be taken into account when configuring Vault themes.
Key Aspects of Configuring New Themes
If you take a look under the hood of the updated JavaScript file uploader component, you’ll see that the CSS variables of the default theme come with variables of the color scheme.
--dhx-h-primary: 200;
--dhx-s-primary: 98%;
--dhx-l-primary: 40%;
/* other variables */
These variables make it possible to change the color scheme of other Vault themes automatically. In practice, if you decide to change any value of the CSS variable from the color scheme in the root element of the Light theme, it will also be instantly calculated for three other built-in themes.
Here is an example of how you can simultaneously override the primary colors for all Vault themes:
:root {
--dhx-h-primary: 0;
--dhx-l-primary: 30%;
}
</style>
Other CSS variables based on the primary colors will be recalculated accordingly. For instance, that’s how it works for the focused color:
Using this sample, you can test how to dynamically change colors in Vault themes. If you want to make any changes in just one theme, you should resort to using the data-dhx-theme attribute. Find more information on the matter in this section of our documentation.
And that is not all, because with Vault 5.0 you are also able to create a custom theme with a unique color scheme. All you have to do is override the values of internal CSS variables and specify a name for your theme via the data-dhx-theme attribute.
More details on creating custom themes are provided on this documentation page.
Using new Vault themes, you have a great opportunity to deliver a JavaScript file uploader with a consistent and visually appealing design and simplify the whole styling process.
Templates for Customizing the Appearance of Vault Elements
DHTMLX Vault is known for its flexible structure and numerous customization capabilities. In v5.0, we boosted the customization potential of this JavaScript library by introducing templates for modifying the Vault appearance. This novelty allows adjusting the look and feel of the Vault layout in the list and in the grid modes as well as the progress bar.
To take advantage of templates in your JavaScript file uploader, you should employ a new templates configuration property. It is an object that may include optional template functions such as list, grid, and progressBar for modifying the corresponding Vault elements.
In the example below, you can upload your files, and the progress bar will show you the total size of files that are currently being uploaded and the size of completely uploaded data. By default, the progress bar shows the total percentage of currently uploaded files. Moreover, there is also a possibility to show previews (if they are available) of uploaded images in the list mode.
Apart from that, you can assign event handlers to HTML elements of a custom template of Vault items by using the eventHandlers configuration option.
Programmatically, you can apply templates for Vault elements and event handlers in the following way:
return "<div class='class_name'>" + item.name + "</div>";
}
const vault = new dhx.Vault("vault_container", {
uploader: {
target: "https://docs.dhtmlx.com/vault/backend/upload"
},
downloadURL: "https://docs.dhtmlx.com",
templates: {
list: listTemplate
},
eventHandlers: {
onclick: {
class_name: function(event) {
console.log("You clicked on " + event.target.tagName);
// return false;
},
},
onmouseover: {
class_name: function(event, id) {
console.log("Item ID: " + id);
},
}
}
});
vault.data.load("https://snippet.dhtmlx.com/codebase/data/vault/01/dataset.json");
Check out the documentation for detailed information on using templates and event handlers with Vault elements.
Live Integration Demos For React, Angular, Vue, and Svelte
All DHTMLX products are known to be compatible with popular front-end JavaScript frameworks and back-end technologies, and the Vault component is not an exception. In version 5.0, we stepped forward in this direction by delivering updated integrations with React, Vue, Angular, and a new integration option with the much-hyped Svelte framework. The full information on these live integration demos can be found in this section of our documentation.
Moreover, we also created GitHub repositories for Vault integration demos with Angular, React, Vue, and Svelte.
The “What’s new” section provides a quick revision of all the novelties included in Vault 5.0.
Want to try DHTMLX Vault 5.0 in your web application? Download a free 30-day trial version and get down to it. Our existing clients can get access to the latest Vault version via their Client’s Area.
And lastly, we encourage you to share your opinions on this release in the comments section below.