Reading time: 3 minutes
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.
I also have a demo for you, so grab the sources from https://github.com/webix-hub/student-dashboard-demo.
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:
"<svg viewBox='0 0 140 50'><rect y='20' rx='5' ry='5' width='140' height='11' style='fill:#ccc;' />"
+"<rect y='20' rx='5' ry='5' width='"+data.compl*1.4+"' height='11' style='fill:#aaa;' />"
+"<rect y='20' rx='5' ry='5' width='"+data.achiev*1.4+"' height='11' style='fill:#37bc98;' />"
+"Sorry, your browser does not support inline SVG."
+"</svg>"
)
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:
view:"form",
localId:"bullets",
type:"clean",
padding:10,
rows:this.bullets()
}
let values = {
"English":47,"Arts":56,"Maths":56,
"Geography":66,"Literature":52,"History":55
};
this.$$("bullets").setValues(values);
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:
onAfterSelect: id => {
this.app.callEvent("student:select",[id]);
}
}
Now any part of the dashboard can listen to the event and do something in response:
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:
config(){
return {
view:"tooltip",
template:"#value#"
};
}
showTooltip(tp,pos){
const tooltips = [
{"id":1,"value":"Tip 1"},
{"id":2,"value":"Tip 2"},
{"id":3,"value":"Tip 3"},
...
];
this.getRoot().show(tooltips[tp],pos);
}
}
You can use this class to show tooltips in the dashboard:
this.tooltip = this.ui(TooltipView);
let questions = view.$view.querySelectorAll(".question");
for (let i = 0; i < questions.length; i++){
webix.event(questions[i],"mouseover", e => {
this.tooltip.showTooltip(i, webix.html.pos(e));
});
}
}
Hometask
Just kidding.
I hope the tips I shared with you will help you more than once and inspire good solutions for your tasks. Feel free to use the demo in your projects all you like.
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’.
