How to work with DHTMLX Suite components: 3 use-cases from our team

Great news for everyone! DHTMLX has released Suite 6.0, an advanced JavaScript widget library that includes 20+ feature-rich components for building robust and stylish web applications.

In this article, we’re going to show you how some elements can be used to develop 3 different types of rich and user-friendly web interfaces. The full list of Suite components and their detailed description are available on our blog.

What is Suite 6.0?

dhtmlxSuite 6.0 is a state-of-the-art UI library, the aim of which is to provide developers with a comprehensive yet flexible tool for building modern web apps with no limits to customization.

The UI component library is compatible with the latest browser versions starting with IE11+. DHTMLX Suite widgets can be used with any server-side technologies and also smoothly integrated into web apps based on React, Angular, and Vue.js frameworks by using specially developed wrappers.

Suitу 6.0 includes 21 JavaScript components, which can be used to effectively build a feature-rich user interface. Widgets can easily integrate with each other since we follow the best practices of using the universal system of data processing with the help of the Data and Tree collection. The architecture allows developers to implement any modern technologies they need.

We create all the UI components on the basis of Material Design style. Moreover, the library unties your hands by enabling complete interface customization by applying new CSS classes.

What Apps You Can Build with Suite UI Library?

The DHTMLX JavaScript UI library allows building various cross-browser web apps within a shorter time frame. Suite offers a rich set of ready-to-use UI components that can be merged in a fully-fledged interface.

We developed some software prototypes to help you better understand how Suite 6 components can be used when building custom applications.

UI Dashboard

Dashboard design is a key part while building business and enterprise solutions. Its main purposes are to make crucial data available at a glance and provide an effortless way to navigate directly to various areas of the app that require user’s attention.

When we talk about dashboards, charts are the first to come to mind. Indeed, accurate charts are an ideal solution for clear data visualization, especially if you have to show multiple types of information and be able to make changes over time.

The showcased UI dashboard is built with the following dhtmlxSuite components: Layout, Chart (SplineArea & Pie 2D charts), DataView, Grid, Tabbar, Toolbar.

You can try out the Dashboard UI demo and download it from our website.

Hotel Management System

The main aim of hotel management software is to streamline and boost day-to-day administrative operations and therefore enhance the overall guest experience. These systems have to store large data sets that need to be visualized, sorted and filtered according to the hotel owner or staff requirements.

Data grids help to achieve effective alignment and consistency with little effort; allow end-users to grasp as much data as possible, as quickly as possible. If necessary, grids can be configured to edit information, add new data and export it in an Excel file.

Our example of a hotel management system is based on the following dhtmlxSuite components: Grid, Layout, Toolbar, Sidebar, Calendar, List, Menu.

The hotel management system template is available on our website.

File Explorer Application

When it comes to file management software, it provides a fast and convenient way to transfer files and folders. Therefore, the file explorer interface should be uncluttered for swift navigation, offer customizable keyboard shortcuts and search for text strings, etc.

We designed this file explorer app with the help of the following dhtmlxSuite components: Grid, Tree, Layout, Toolbar, DataView, Tabbar, Window, Popup, Menu, and Form.

We also invite you to interact with the live file explorer interface and check its possibilities on our website.

Final words

All elements are interconnected with each other and represent a comprehensive toolkit for developing feature-rich web interfaces. DHTMLX library widgets are delivered in one package, however, some components can be evaluated and purchased separately. Those are dhtmlxGrid, dhtmlxTreeGrid, dhtmlxCharts, and dhtmlxCalendar.

We invite all to download the modern updated version of the Suite UI library. The trial period is free for 30 days. Our official technical support team will assist you to get maximum advantages of working with the updated components.