WEBIX BLOG

New Webix 5.0 includes the JavaScript GeoChart widget created with Google Maps API. GeoChart is a pretty neat service for creating map charts for presenting data associated with countries and regions. I’ll show you how to use the main features of the widget to create an interactive world map. If you are not yet familiar with the widget, I hope that GeoChart will become your faithful friend after I introduce it to you. If you already love GeoChart as much as I do, you will probably gain a better insight into things you can do with it.

This is a guest post by Dragos Stoica.

The initial task

My objective was to design and implement a simple application allowing me to manage my freelance business. The application is called iFact and is available on github. The basic activity consists in getting contracts with clients, performing the work or service and invoicing the client. Also, I needed to manage the invoice flow and to have a minimal dashboard for cash flow control. The volume of invoices is low: from one to a couple of invoices per month. The number of clients and contracts per client is low, it means 5 to 10 clients with 1-3 contracts per client, normally one single contract active at any given moment in time.

Webix team is proud to introduce the newly released Webix 5.0. It includes the updated Webix Jet framework, three new widgets and some useful feature upgrades, such as export of widget styles to Excel. Enjoy!

This week’s adventure is another visit to the kingdom of the Most Recognizable User Interfaces. Trello provides one of the best interfaces for task management. A single glance reveals all the latest tasks, who’s working on them and what tasks are planned. Let’s look at how the same interface can be created with Webix UI library.

The kingdom is populated by UI architects and builders, so during this trip, you’ll watch the construction of a small but amazing castle. The main unit for the castle will be Webix Kanban. You can see the live demo and get the blueprints from GitHub. And now the adventure begins.

As a rule, companies work with a lot of data and already use Excel files in their workflows. Among other things, business process automation requires shared access to files. For sharing, Excel files can be published as web pages or uploaded to web services like Google Docs. And still, there is a problem because such services do not allow you to embed spreadsheets into web applications and web sites. I’ll show you how Webix UI library can help you with this task.

Software can make your routine simpler and with better results. For instance, making clear and good-looking reports would turn into a real battle without a helpful tool. One of these tools is Excel, a well-known mega-beast of valiant deeds and immortal glory. Yet, if business-warriors have to make some custom report, it’s developer-warriors who get their share of the job. This might be a problem. Every time you have to involve extra people in routine procedures, it’s costly and time-consuming (to say nothing of the fact that developer-warriors have a lot of other battles to fight).

It would be good to design a report engine — another mega-beast that is as powerful and helpful. The complex widget SpreadSheet, one of the components of the Webix UI library, is a relevant core element for a decent mega-beast to win the deathmatch and save your end-users from extra expenses. Join me, developer-warriors, and I’ll show you how to enhance SpreadSheet and make it serve business-warriors well in their battles. Together we’ll create a spreadsheet-based report engine that will allow your end-users to make a custom report themselves by choosing templates from a list and editing them to their liking.

An app logic well done is only half a job accomplished. The other half is designing such a UI that would enhance the functionality of the app and make it rational and easy to navigate. Besides, it’s important to create a nice-looking interface to make apps recognizable and visually appealing.

Gmail has one of the most recognizable interfaces on the web. It’s neat and clean and can be used to rationally organize the massive app contents. In fact, Gmail UI can be used not only for email management but for other tasks as well. If you would like to know how to recreate such an interface and don’t know where to begin (or in case you are just curious), follow me. I’ll show you how to implement Gmail’s approach to designing interfaces with the Webix UI library.

When the content of your web app gets bigger and bigger, it’s a good idea to split it into multiple screens. This, in its turn, demands convenient navigation, so that users could quickly find what they need. User experience isn’t supposed to turn into the quest for the Holy Grail.

Numerous navigation patterns have been designed to achieve this honorable goal. So if you are looking for ways to make your apps more handy and good-looking, join me on my ship, and together we’ll find our way in the sea of In-App Navigation and visit four remarkable islands of the Webix Archipelago: Sidebar, Tabbar, Top Menu, and Winmenu.

I guess, the master-details pattern needs no special introduction for practised web developers who create business apps that work with users, sales and such. Nearly any real life app has such a relation model and demands clear and easy navigation and inspection of information. Whether you plan to develop an email app, an address book, an RSS reader, a CRM, a social net app or any other app that is based on a list-details layout, the master-details pattern is a relevant solution.

Webix UI Library provides a number of ways to implement this technique: from simple to more complex, from pretty awkward to really handy ones. I’ll demonstrate them all while creating a mock email management app, and at the end of it all, you’ll see the most efficient, reliable and good-looking solution. Well, without further ado, let’s get down to the details of our master plan.

No one is exempt from making mistakes and getting browser crashes. This can be really annoying, if you have worked hard for a long time filling in an extremely complicated form, looking for data in a big spreadsheet with complex filters or have just set a nice and convenient layout scheme to work on a web page — and everything is lost just because the page is reloaded or closed. It is a good idea to save and store temporary data to rescue your users from such a disappointing experience and help them not to lose their time doing everything all over again or readjusting their working space every time they open the same page.

If you create applications with forms, tables and complex layouts and want to help your end-users restore the data that haven’t been saved locally or sent to a server due to some accidents and mistakes (page reloads, browser crashes, laptop shutdowns, etc) or just want to let them preserve the state of an app for any other reason, I will show you how.