If you are a Webix HTML5 framework user, we’d like to give you a hint on how to create a web interface with Webix UI framework quickly and easily. Believe it or not, but you need just 12 lines of JavaScript code. And of course a bit of Webix magic!
Very often you have to design web apps that collect a lot of monotonous data from users, e.g., information about their previous employment, skills, working hours, preferences, etc. This is when you face the time-consuming necessity to write code for many repeated input fields and maintain value processing logic.
Surely, you can solve this issue by allowing users to write anything their heart desires in a textarea. But such an approach has nothing to do with a user-friendly interface. Besides, processing the collected information can become a real headache in this case.
A better solution is creating one dynamic control which you’ll be able to apply multiple times to your complicated forms. Sounds interesting? Read on to learn how to do it.
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.
Reading time: 7 mins
If you want to create applications that let your users build interfaces themselves, read on and find out how you can achieve this with Webix. Building dynamic user interfaces can be partially achieved with Webix Dashboard. In some cases, like building forms, you can use Form Builder. This service uses AbsLayout as the area for UI building. I will show you how to equip AbsLayout with Drag-n-Drop and use it for rearranging, adding, and deleting UI components.
Reading time: 3 mins
If you want to create powerful yet simple forms for complex input, join me. I will show you how to create cascading comboboxes, where the list of options of one combobox depends on the selection in the previous one. This way users can input complex hierarchical data in a convenient way.
Creating projects with Webix Jet has become much more convenient since TypeScript support was introduced in version 1.3, and it requires just a few changes in the project. Change extensions of your source files and configure the toolchain, and you will get a smart autocomplete for Webix methods, hints on their use and code validation.
Read further to find out how to use Webix Jet with TypeScript or grab the typescript branch of the Jet starter pack.
Reading time: 6 mins
Dashboards are good for tracking important information. With Webix Dashboard, you can conveniently place components in a grid and let users change the structure of the application with drag-n-drop. Dashboard panels can be rearranged, resized, removed and created anew. Join me to find out how Dashboard can help you create dashboards for apps.
Reading time: 8 minutes
Webix Hint is a widget for creating guided tours through apps. This is especially suitable for apps with a lot of contents and complex forms. With Hint, you can create guides with several steps. On each step, users will see a focused area and instructions how to work with the specific element of the app.
I’ll show you:
For demonstration, I’ll create a mock service for ordering medications online. I’ll deal with the UI aspect only.
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 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.
Learn about our guest posts guidelines