How to Build Web Apps Using JavaScript UI Library

Photo by Kaleidico on Unsplash

The process of creating a proper web application cannot be set aside or ignored since this software solution enables every business to engage with their users over any mobile or desktop device and platform.

This article is specifically designed for those who want to save their efforts while developing a modern web app. It focuses on building an application with a JavaScript UI library of widgets. Besides, you can use ready-made CSS templates thus significantly cutting time spent on your project customization.

Let’s get started!

Navigation

The example above shows the horizontal top header navigation. This placement is ideal for small web apps consisting of up to 7 or 8 pages. The header is separated from the page content, reducing confusion between navigation and content.

The toolbar placed at the top header takes up little space, however, it provides an intuitive look and feel. It can display a branded logo image, title, and action buttons. You can also attach links to settings, notifications, and a user profile thus allowing visitors to access any part of your project in a single click.

Moreover, you can consider sub-navigation and display several links to the web app pages in a tab bar. This is useful when the header space isn’t large enough for all of your primary category links.

The following example is the vertical side navigation. This type is especially useful when you have a lot of content categories in your app architecture. In that case, you can attach a sidebar widget, which also allows adding various interactive elements (e.g. calendar, time picker, etc.) and setting scrolling when the list becomes too long to fit within a window.

Having combined sidebar and list widgets, you can create a double sidebar navigation where you can display sidebar items on the left with some subitems on the right.

In fact, combining several widgets and their placements allows you to build a simple and logical navigation structure. For instance, you can use the toolbar for the primary navigation and the sidebar for the secondary navigation. With a complex project, such as a hospital management system, you’ll find yourself attaching the toolbar for the primary, the tab bar for the secondary, and the sidebar for the tertiary level of your web app navigation.

Working with data

First of all, you can set inline editing to allow users to edit text fields directly in a cell. This functionality is available in grid, tree grid, data view, and list widgets. Secondly, users can edit data via the right panel that will appear after clicking on the desired cell.

Besides, you can add the ability to edit data through a modal window based on a form widget. This method fits for working with large data sets. Users will be able to fill in the form with the relevant information, save it, and edit if needed.

Filtering data

With regard to location, you may add filter controls to the top of the page or to the sidebar. The second method is found to be quite bulky, however, it allows adding a larger number of controls.

About DHTMLX Suite UI library

Besides, DHTMLX suggests using Optimus, a JavaScript micro-framework that simplifies the process of developing web apps based on the Suite UI library. You can start building your web app with DHTMLX Suite right now by downloading a free 30-day trial.

Here we post news about our JavaScript UI libraries. In addition to this, we also share useful tips, news and articles about JavaScript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store