Dashboards: Tips for Young (and Aspiring) App-Builders

More tips and tricks from Webix await you today! If you want to know more about building good-looking interfaces, read on. You will learn more about creating dashboards, turning simple widgets into something more sophisticated and developing with Webix Jet.

Why Dashboard?

What makes dashboards a good choice for a layout? Dashboards allow collecting a lot of widgets on one page to keep an eye on the current state of affairs in a project, class, process state, station, online-shop, etc. All widgets can be rearranged and resized on the fly. You can create simple static dashboards for viewing data or dynamic dashboards with which users can interact.

What Widgets to Choose?

Keep it simple! Take existing widgets and change them with custom templates according to your needs. For example, that good-looking panel on the left is a simple List, visually transformed with a bit of custom styling. And if you look at the table at the bottom, you will notice nice green progress bars. Webix does not have them out of the box, but you can create them and use in any component:

Webix provides various charts that can be useful in a dashboard. If you feel that you need more, you can build your own complex widgets from existing ones. For example, look at the colorful panel on the right:

These are Bullet graphs grouped in a form. Yes, even charts can be put in a form and be treated as form controls:

Engines that Power Interaction and Data Loading

The dashboard was developed using Webix Jet, and this choice was made for a reason. Webix Jet has certain benefits. All widgets are in separate files, which makes development flexible. You can replace a widget without changing anything in the rest of the app. Same goes for changes in the data loading logic. As it is separated from the UI, you have to change the data file, and all widgets that use it will be up to date.

Let’s look under the hood and see how it works in the dashboard.

Custom events can be used to bind together widgets. For example, this is how an event is dispatched in one widget:

Now any part of the dashboard can listen to the event and do something in response:

init(){this.on(this.app,"student:select", id =>{// do something});}

For common functionality such as loading and updating data, showing tooltips, redrawing chart legends, use custom view methods. For example, in the dashboard you can see tooltips with additional info if you point at ‘question’ isons in the corner of every panel. How many tooltips are there in total?

Only one, shown with different text over different panels. This is a tooltip view with a custom method:

Hometask

You are also welcome to share your thoughts and advice on building UIs with Webix in the comments below. Drop us a line about today’s tips, your developing experience, to ask a question or just to say ‘Hi’.