Dear Webix users. Our team joins the worldwide struggle with the COVID-19 spreading. If you are working in the sphere of health care, developing medical projects or startups, please contact us to learn about special terms of cooperation. 

If you are developing software for the medical industry or your business is struggling financially and you need Webix tools, do not hesitate  contact us to learn about special terms of cooperation. We will agree upon the conditions of the access to the technical support and development tools.

Our team continues operating at full capacity. Webix users are getting technical support, updates and customer help. We are working remotely but with the usual productivity to provide smooth workflow.

Webix team 

The post Webix work during the COVID-19 outbreak appeared first on Webix Blog.

We continue interviewing Webix users on how our products help them implement their ideas. 

Today we have a talk with Bernd Gewehr. He is the head of the IT department at  Vössing Engineering. As a leading engineering firm in consultancy, planning, project management and construction supervision, Vössing has been implementing infrastructure projects of every scale for 40 years. With over 600 employees at 20 locations in Germany and abroad, Vössing plans and designs national and international projects, from concept all the way through to implementation.  

We are impressed to know that such a giant is using our software and hence excited to learn their experience. 

To begin with could you tell us a little about yourself and your company? 

I started my career back in 1997. Our company is in the civil engineering business. There are technicians, engineers, technical constructors who work on civil engineering projects like highways, bridges, tunnels or railway stations. We do not deal with the construction itself. Instead, we are planning, supervising and managing the projects. As far as I know, there are only a few companies in Germany comparable to ours regarding headcount and revenue.   

I’m the head of the central IT department, a core team of 10 people working in Düsseldorf and one IT support engineer at each of our branch sites. We focus on digitalizing the processes in the company by developing a customized digital workplace. 

Sounds impressive! Could you give us a bit more details about what your department is dealing with?

Well, thinking like engineers means we claim to know how things should be. Unfortunately, when we look at the ERP systems on the market, we feel that this is not how things should be done for us. That is why we don’t own any of the classical ERP or CRM systems.   

Our IT department creates our own apps for our business, 100% customized to our needs. Nobody knows our business better than us, so we are building our own customized apps that follow our own methodology of project acquisition and management, customer relations management, or project references.

It is important for our business to have a tool that can easily pick one out of 10000 projects by smart filtering and print a beautiful one pager as a project reference for the next tender process. None of the ERP vendors has something like that. Just to give one example.   

The second challenge we are dealing with is collaborative solutions. Obviously, nobody builds a bridge on his own. So collaboration is the key to our business. We can collaborate with 10 or even 20 companies, with up to 100 people dealing with one project for years. Unfortunately, there is not much to choose from in the digital workplace software when it comes to cross-company collaboration. The complexity of cross-company large project collaboration is one of the least supported features on the market. 

For instance, let’s take the project of building a bridge. There are usually thousands of PDFs written, approved and communicated over a lot of channels on this project. This leads us to endless folders of information in the file system. The steps performed with those documents are recurrent, and we try to make it a business process. We step in and use our software development skills to create smart solutions to those real business problems. Actually, our software team is rather small. We have only four or five developers depending on the workload.   

Those niches are the ones that nobody seems to care about and that’s where we work. We deploy our own software solutions for our users and also integrate with those from others. 

How did you come up with an idea of using Webix?

We have been developing software for over 20 years already. We’re good at business processes and we have the right tools to develop business process apps. But we realized we needed improvements in how to present those apps to our users. We had a very functional technical design, which was usable, but still far from what is called a good user experience. So we started looking for something like Webix. We came across some of the Webix widgets that really impressed us and showed how we wanted our product to look like. We finally decided to change our UIs from handcrafted web interfaces into Webix UIs with the same backend technology. That allows us to create good-looking web UIs quickly and to fulfill our users requirements for usability and prettiness. 

What are the examples of the most challenging tasks you’ve dealt with while developing your own ERP system?

I will pick one where we recently used Webix. We are used to doing our internal accounts payable invoice process all on paper. That is our history and it worked perfectly. Later we taught our Xerox machines to scan invoices right. You put the paper on the top, press the button and the digital invoice process starts with digitizing the paper to a PDF. The PDF runs into a software that we wrote with a Webix UI. Now we’ve got the unprocessed invoice list on the left, the PDF of the selected invoice in the middle and the form to fulfill the steps for invoice approval on the right. Easy to create, easy to use.   

Another one is a supply chain tool to order our workplace machines from our preferred supplier. We have built it as a complete end-to-end business process and we have made a tool for it with the Webix UI that is used by users in all involved companies. We use the Webix Kanban board widget for that. The approved order for the new device creates a new card in the board moving from left to right along the process, from order to production, to delivery, to operation.   

You can look through my posts on Twitter and see how we use Webix in our software. 

Pic. form Bernd’s twitter feed

Do you integrate Webix into any parts of your core business of engineering?   

Yes, as one example, we used the Webix file manager widget. You can also see that on my Twitter feed.   

We created a new HCL Connections community widget based on Webix file manager. It shows the content of an internal network drive folder to internal and external community members. You can share a network drive location inside your HCL Connections project community where you can invite external guests for collaboration.   

But it is not purely sharing a folder but also caring for other processes that happen with the content. It helps to collaborate on the content on our file servers. Also, we use the connections communities to invite foreign people to work with us directly on our business processes. 

Pic. form Bernd’s twitter feed 

Do you have any other widgets on your mind Webix could help you with?   

One thing we urgently need right now is the Webix User Manager widget. I should say that Webix User Manager combined with Kanban for processes and Document Manager is a strong combination that can work really well. 

 Have you experienced any difficulties using Webix?   

Well, first of all I should say that if there is a question, it is usually answered within 1-2 days with support or even in the webix community. That is really cool!   

The thing I would like to change is the necessity to create a specific UI for mobile devices. The Webix position is to create a specific UI design for different platforms. It seems to me it should be done easier. I have to create multiple UIs. It would be okay though if I didn’t have to spend much time caring for them. Every change must be done in several UIs, which is hurtful. I would prefer to have a UI capable of being used fully responsively. Today, there is no grid component in Webix that acts like a bootstrap grid. The table does not know how to break columns into rows when the screen gets smaller. These things could be standard within Webix. I would like to have standard components that adapt to the place they get. This is one of the most important points for me. You can look through the comments on my Twitter account.   

One more point is that Webix does not have a calendar view widget. I have to create a calendar from scratch. I mean a simple calendar view where I can load and create events. 

All in all, Webix has helped us to change the way we create solutions. Robust backend technologies like the HCL Domino web- and database server can still be used while the frontend development happens in pure HTML and javascript with Webix components. That was a big step forward for us. 

The post Webix in Practice: ERP system for construction supervising and projects managing appeared first on Webix Blog.

Amidst the hard times that we are facing now it is important to keep on doing what we do. Thus, today we are especially excited to announce the release of Webix 7.3 that includes two complex widgets: Document Manager and Query, as well as the ability to embed charts and filter dates in Spreadsheet.

Read more to learn the details of these updates.

Document Manager

The successor of File Manager 7.2, the brand new widget opens a way to true document management with the following features:

• marking files and folders as favorite;

• assigning tags to files and using them for searching;

• sharing files with collaborators;

• viewing recently accessed files;

• trashing files and folders before removing them completely;

• editing Excel files from the interface;

• commenting files and folders.

You can start working with your documents just by adding or uploading them to the widget.

Try adding a file and then open it:

View code >>

Document Manager is supplied with a ready-made Golang backend, NodeJS alternative is on the way. Unlike File Manager, it requires a MySQL database on the server side.

Query

The widget comes as a powerful alternative of Query Builder, but presents a more flexible way to filter data wrapped into the neat user interface.

Try adding a filter:

View code >>

It features vertical and horizontal layout of panels and can be easily configured by the end user thanks to the Filter widget behind.

Try changing a rule:

View code >>

The widget benefits from the same Webix Jet-based approach used in File and Document Managers, which makes all the customizations easy. Also, we provide Golang and NodeJS sample backends to create SQL queries to search for data on the server side.

We will keep and support Query Builder, but major updates will be provided for Query widget only.

Spreadsheet Updates: Charts and Dates

Starting from Webix 7.3, you can embed charts and pictures as well as any Webix widgets above grid cells.

This demo shows how:

View code >>

You can configure chart data with the help of a dedicated wizard: select data range from Spreadsheet, define the type of the chart and configure its legend and X axis labels. We plan to develop this functionality and come up with in-detail chart tuning in one of the next versions.

Also, the widget has been given an extra touch upon date formatting and filtering, namely:

• ability to filter dates with Excel filter;
• ability to serialize and parse filter values;
• ability to use date for conditional formatting;
• formatted values resulting from date formulas with operands;
• formatted options in dropdown editors.

Other updates

The Webix library itself was stabilized with numerous bug fixes. The updates include a possibility to keep windows open when the Escape key is pressed, and a set of global filtering helpers.

What’s Next

You can study the What’s new page to find out the full list of updates and fixes. To check out new possibilities and updates, upgrade Webix via npm, Client area or click the big purple button to download it.

Download Webix 7.3

We wish you to stay safe, healthy and open-minded. Better times will inevitably come.

The post Webix 7.3: Document Manager, Query Widget and Embedded Charts in Spreadsheet appeared first on Webix Blog.

We have important news to announce for our Russian Webix users. 

Today we are presenting full documentation of the Webix UI library in Russian. This part of the documentation will be supported and developed simultaneously with the English version, the one you used before. 

For more than 7 years Webix has developed a wide documentation, so we had to translate more than 15.000 pages into Russian. Documentation is available for all 100+ components, complex widgets and Webix API. We are glad Webix has become even simpler and more accessible for the Russian-speaking developers. 

Besides documentation, our clients will get technical support in two languages: English and Russian. 

Webix community forum will keep developing in English. But Russian-speaking developers will have an opportunity to ask questions and share their experience in comments to the articles of the documentation. 

We are really happy that part of our users now can study Webix in their native Russian language. 

The post Webix Documentation – now in Russian appeared first on Webix Blog.

Many UI components contain a built-in search or filtering. Such as, for example, the tool of filtering in the Webix DataTable.


There are search and filtering in numerous Webix data widgets. In this article we will tell you how to improve the existing mechanism of displaying found data, namely, implementing highlighting of found text extracts to make the search/ filtering results more visible. 

Pic.1 Search results with the found data highlighted

In Webix eco environment searching and highlighting can be implemented as a combination of two existing features: 

• common data filtering,
• specific template of the column (for datatable) or of the component (for list and dataview).

In short, all you need to do is: 

1. Remember searched text.
2. Use it for data filtering.
3. Use it in the template to find and mark all text occurences.

In this example, the UI consists of two widgets: a Text view (standalone input for filtering) and a Datatable. 

Step 1. 

First, let’s setup the onTimedKeyPress  handler for the Text input. Here we can get the current value of the input and use it for data filtering. 

Step 2. Filtering and remembering the value. 

The findText will activate filtering and make sure the value is stored somewhere for further usage. We’ll also use a RegExp to escape special characters in the stored value, if there’s any: 

Step 3. Configuring template. 

As we have already called filtering, the Datatable will show the results. This is the moment when the filtered data is rendered according to the related template. 

We’ll use another RegExp to find the searched text and add a span with a specific CSS for it:

You can see the results of this modification in the following demo.

You can find the source text of this note in the GitHub blog. 

You are free to discuss the details or share your experience in the Webix community blog. 

PS 

You may be wondering why this functionality is not implemented in Webix immediately “out of the box”. The thing is that Webix offers web tools, a set of methods and setups for working with data and displaying it. More specific things, such as text highlighting, are left to the discretion of the end users and developers, who decide how their web application should work. The balance of functionality and simplicity makes Webix the product, valued for its speed and visibility of the development. We try not to overload our UI framework with excessive features, but we provide powerful tools for implementing any UX on developer side. If you haven’t tried Webix yet, download the free package to make your own web application. 

The post How-to tips: Text Search and Highlighting appeared first on Webix Blog.

In response to the customer feedback, we decided to unveil a new long-awaited widget before the summer-time official release. So, today we are ready to announce User Manager – a brand-new complex solution available in Webix PRO edition.

Read More

Main features

This widget comes in useful in applications where you need to control various user access rights. But seeing is believing so let’s look through its main features:

• managing user access rights and combining them into roles
  
• audit view: possibility to see who assigned this or that role to a user
  
• matrix view: possibility to see how roles are distributed among users at the moment
  
• possibility to check and edit user details
  

What is more, User Manager is fully adaptive and can adjust to a wide range of screens thanks to its compact mode.

Traditionally, we provide a ready-made Golang backend code for developers.

You can try live demo by the following link:
Live demo

What’s next

User Manager comes within Webix 7.3.5. Click the button below to download the widget. User Manager is also available in the Client Area for users with the commercial licenses.

Download User Manager

For more detailed information on the widget dive into our documentation.

The next major release is scheduled for July, so stay tuned, keep calm and carry on.

The post Meet brand-new User Manager! appeared first on Webix Blog.

We are happy to have one more Webix user ready to share his impressions on our product.

Today we are talking to Anders Rehnvall. Anders is an experienced developer and programmer fully devoted to his job. Currently he is the CEO and system architect at eze System, Inc. (www.ezesys.com). The company works in the Internet of Things space. They develop a hardware device that connects to industry standard sensors and equipment and monitors real-time data.

Hello, Anders! Nice to see you. Could you please introduce yourself for us? What is your IT related career?

Hi! Nice to see you too. Well, my interest has always been distributed system design, mixing real-world hardware with communication systems, data management and making these complex systems accessible for a broad audience. I worked in the electronic security industry for over 15 years, when the world shifted from dial-up services to always-on Internet, and moved me from desktop development to cloud-based applications. Initially the browser support for complex JavaScript wasn’t great, so I did a lot of back-end programming until around 2006 when jQuery came out, which was the key for me to work with front-end and back-end as one application.

Any remarkable milestones?

I’m proud that my company eze System is growing and already has thousands of active systems all over the world, monitoring and controlling everything from oil wells and gen-sets to irrigating farms and supervising water treatment systems. 

Another achievement was the security system I was working on in the early 2000’s which is still in use in millions of homes in the US.

And here’s a funny story. In the mid-90’s me and my friend went on a vacation in Spain and France. I had a web page to where we posted real-time updates from our Nokia soap-bar phones via SMS. So we were ‘tweeting’ around 10 years before Twitter was conceived!

That’s cool! Tell us please about eze System and your role in the company.

I co-founded eze System with two partners in 2009. I am the CEO and system architect.

Eze System provides a unique system for remote monitoring and control of distributed equipment and machinery. The California company was founded in 2009 and now has thousands of systems all over the world. The second generation of the ezeio system is now being launched, which helps our customers scale up faster and further improve efficiency in their operations, saving energy, maintenance costs and having better data for business intelligence. The new system has improved account and user management, mapping features and computing capabilities. Our ezeio® controller is a hardware device that connects to industry standard sensors and equipment. It communicates via cellular networks and is managed from our cloud portal. The ezeio monitors data in real-time, allows for remote control, alarming and automation functions. The portal – using the Webix JavaScript UI framework – allows easy access to one or thousands of field devices for configuration and management.

Our system is cost-efficient enough for simple applications like temperature monitoring, but at the same time so powerful that it can be used in place of industrial controllers (PLCs) to run complex processes – all with full remote access to both data and configuration.

How big is the company?

While we have global clients and a sister-office in Europe, we are a small company. There are three developers in our team. I’m the system lead moving between hardware, firmware, back-end and web. I would say all three of us touch Webix every day, but we have one guy dedicated to only Webix development, quickly becoming our expert.

Tell us a little more about your product. Why did you decide to develop it?

After working on security systems for many years, I wanted to design something that was more interactive. A security system is typically silent until there is an issue to report, but using similar technologies I saw an opportunity to make something that you wanted to interact with – rather than hoping it would never go off.

Our system is unique, as it’s a multi-purpose system that is competitive both with functionality and price to custom designed and single purpose systems. Most remote management systems are either single purpose or they require significant adaptation or customization to be deployable at scale. Our system works out-of-the-box, and can be easily adopted by a wide range of industries and applications.

At the beginning it was a device that you connected to electric meters that monitored electric usage and created simple reports from that. From there we realized we could do more than energy monitoring. We started monitoring other things: flows and levels for such industries as water management, agriculture, oil and gas. We also started controlling equipment with the same systems, so we were able to receive data and send out control commands and update logic in the units. From there the company started blooming out, we grew to 4-5 people. About 3 years ago we realized our platform needed a refresh. We needed something more modern and more capable. That’s when we started using Webix. I needed something to quickly wire frame the functionality. I looked for a short learning curve to be able to quickly prototype different UI elements to work with. What I really like with Webix is that I got it right away. It was like jQuery+++! It got me going so fast! That became a big driver for me. Obviously we are a cloud system, but I wanted it to look like a desktop application. With Webix everything was one big JS file. I loaded it and I had all the resources I needed. I managed to quickly get into it, start creating forms, environments and navigation within the system. So for us it could not compete against anything else.

Are there many competitors in your field?

We work in the Internet of Things space, which is a massive market. There are a lot of segments within it. Many solutions are application specific. One part of them is a big industry for customized solutions. Such as fridge alarms, for example. They monitor fridges only, they don’t do any control or automation. On the other side there are big dragons, like Schneider Electric or Siemens, which offer consultant services. They ask their customers about their needs and start a whole new product from scratch.

We are somewhere in the middle. We have a standard hardware, compatible with other devices. The user of our product can set up everything in the back-end. They navigate our UI by themselves. We take care of the security aspect, the data storage and the communication side. When you use our product, you buy a little box, plug it in and start working with it on the web UI. So we differ from the traditional IoT, as we are not application specific, nor consultancy based. Our typical client is a mid-sized company, something between 20 and 2000 people, not big enough to develop their own IoT solution, but in need of something to work with their equipment. That’s where our product comes in.

It is interesting for us to know your opinion since you deal with IoT. What do you think Webix should have to attract the IoT developers?

The good thing is that Webix offers a client side package. There is no confusion between back-end and front-end. I really appreciate it. Webix states that jQuery is essential to work with it. But what I have noticed is that Webix replaces jQuery. There is something I’d like to make better about your library though. I mean selectors here. In jQuery, for example, you can choose controls based on CSS style or tags. I sometimes miss this feature in Webix. Selectors in jQuery are super powerful. From the IoT perspective, everything we do is cloud based and Webix fits 100%. Some IoT solutions have web server built into the hardware. I don’t know if Webix licensing module would work there. But it might be something to think of if you want to sell Webix that would run on distributed hardware.

What are the plans of your company for the future?

We are focusing on new features and reporting and analytics capabilities of our portal. As the hardware and firmware is now stable and in full production we can focus on the software features. Our next major project is some form of configurable report generator. We’re considering re-using the dashboard in a headless server-side process and feeding it through a PDF generator.

How did you learn about Webix?

Well, I was late night googling and just stumbled on it. It was a random find. I started experimenting with Webix for prototyping our second-generation system, which is a complete re-write from the previous system. Our lead software developer also evaluated Webix vs KendoUI and Extjs, and we soon agreed to use it as the learning curve was much shorter than for example the one of the Extjs.

Webix team are taking efforts to improve our product every day, so any feedback from the customers is very valuable for us. Can you mention any difficulties you had while working with Webix?

Over the three years that we are using Webix, there have been a few minor bugs. For example, the scroll view didn’t work the way we intended. But usually we find workarounds to make things work again.

One thing I would lift up was the inconsistency between JS and CSS packages. Especially when we were using the skin builder. Our idea was to use the skin builder to quickly rebrand the UI for various customers. Change the colors or the logo a bit for example. We are a cloud solution, so we have one platform. But depending on who logs in we want to customize everything a bit. We thought we could use the skin builder to come up with the templates for the customers or even let them design their own schemes. When the JS package was updated, the skin builder wasn’t following at the same time. So we ended up with some instances where the skin builder and the JS package caused a conflict. But actually it seems that you have addressed that, because we haven’t seen those inconsistencies any more. That was probably the biggest issue we have ever had with Webix.

Did you report the bugs to our support service?

We have used the forum for minor things. And I should say that when I ask something, there is always somebody to help me, either from the Webix team or just a user from the forum. So what I want to say is that the forum is very active and hugely valuable. There is a lot of information and it’s undoubtedly a great plus. Besides, I have used the ticketing system once or twice and I also got good answers there.

Have you used any complex widgets? Such as Kanban, Pivot, Spreadsheets.

Our UI is very form heavy. We are using it as a management and configuration tool for the hardware. The hardware dictates what the product does. Our customers buy a small box and plug it into their equipment. So the box has tens of thousands of configuration points. There are lots of things you can configure and program there. So we are heavy on using the form controls. We are using everything from push buttons to some graphical elements, such as sparklines to illustrate the data. Everything is live and updated in the background. When something changes in the field, you can see that in the UI. The most complex widget that we are using is the dashboarding feature. We use dashboards with panels and build the whole thing around them. So we can plug in any application within those panels. We haven’t started using any complex widgets yet, but they will definitely come in handy one day for us.

We are looking for new ideas right now. Maybe you have something on your mind on how Webix can improve?

Yes, there is one thing that is coming up for us. We need to build the report generator. We already have a pretty complex dashboard with the ability to build in any functionality. And now we are looking for various ways to make it a static report, run it on the server’s side and generate PDF files out of it. Some support for report generation would be helpful for us. I can even ask my colleagues to share their ideas on how it would be better to make that.

Do you use other UI libraries inside your solution?

We use Google maps for locating things. We also use ACE editor and other graphing libraries to make things more interactive, to zoom in and out, to handle more points faster. We would like to be more configurable with the gage control. The gage in Webix is very basic. It doesn’t have much control on how you can add marks, tick marks or put the numbers. We use a more configurable gage control. We are looking to have text and numbers, to control whether it goes from side to side, to be able to turn it, or twist it, or make it linear. We lack those features in Webix. We couldn’t have the graph that was interactively loading more data as we were moving it around.

Do you use Webix Jet?

It is easy for me to work with json directly and I don’t need anything else.

That was a very interesting conversation for us. Thank you for your time. Have a good day!

The free online CSS code beautifier takes care of your dirty code and strips every unwanted

The post IoT solution for remote monitoring and control of distributed equipment. appeared first on Webix Blog.

This year we have worked out a new concept of complex widgets and have already released the new ones: File Manager, Document Manager, Query, and User Manager. They were built from scratch as fully configurable Webix Jet app modules, which makes them flexible, powerful… and yet not very easy to master regarding the code. However once you grasp the concept, it opens great opportunities.

Let’s explore the technical features of the new widgets and learn of all the benefits of the Jet-based approach.

Why We Did it in the First Place

Webix complex widgets are basically small applications. While they can cope with their primary task well, it is not easy to customize them for specific purposes, as their public API does not allow to get to the inside logic too much. But people really need this flexibility.

That is why we came up with the idea to use Webix Jet to create complex widgets as mini apps. This solution keeps complex widgets well-structured and very flexible for customization and scalable for new functionality.

What’s New for End-Users

First of all, we have not simply rewritten the code, we have added a lot of new features to the end users. For example, File Manager 7.2 was enhanced with:

• Three-mode interface: list, cards and double view
• Preview of files
• Text editor
• Adding files and folders
• Downloading and uploading files
• Adaptive behavior to serve small screens on mobile devices

Live demo >>

Document Manager went even further and added a number of features outside the scope of simple file-system tasks:

• Trash for storing deleted files and folders;
• Marking files as favorite;
• Sharing files with other users;
• The ability to open recently viewed files;
• Adding tags to files and folders;
• Search by names and tags;
• Commenting files;
• Viewing and editing Excel files.

Live demo >>

Query emerged with a user-friendly design and convenient UX for filtering.

Live demo >>

User Manager – did you hear that? – is an absolutely new widget for managing users and their access rights:

• managing user access rights
• uniting access rights into roles
• permissions and actions audit

Live demo >>

This is what end-users will get from the Jet-based widgets out of the box. Anything that’s outside the scope can be easily added by you, developers.

What’s New for Developers

To the experienced Webix users, the Jet-based widgets can seem a bit unorthodox. They are built differently and require a different approach from a developer. While each widget has its own specific features, they all have these things in common:

• Webix Jet-based structure and OOP
• Reactive properties instead of conventional configuration settings and event system
• Customizable view classes and services instead of classic Webix API
• Overrides as a means of customization

Webix Jet and UI Customizations

Webix Jet takes care of neat code organization and the basic architecture of complex widgets. Its major features are:

• keeping the UI in separate modules (views) and combining them to create the needed interface
• keeping the app logic in special modules (services)
• nothing is private and everything can be reached and modified by code from outside a widget

With classic OOP inheritance, you can:

• extend views and services with new functionality
• override the current functionality
• add new features and components

For instance, to modify the UI, find the necessary view class and override its config method so that it returns a different Webix config. Let’s add a new option to the action menu of the Query widget:

Live demo >>

To change the way specific components of a widget work, you need to override init and other view class methods. For example, to add an action for the above menu option, add a handler for it:

Live demo >>

Reactive State: How to change properties and watch changes

Alongside with the usual configuration settings like width, url, etc, Jet-based widgets have the reactive properties enabled by Jet reactive state. This technique was created to enable straightforward communication between all the widget parts. State properties can reflect the value of any parameter as well as notify about its change, so that any listener can react to it if necessary.

Compared to events and parameters, a reactive state:

• allows to avoid cumbersome current value checks for config parameters
• does not clutter the event bus, which happens sooner or later if you rely on app-wide events too much
• a listener does not have to exist at the moment a parameter changes; it can react to the change once it is created

You can define reactive properties right in the widget configuration:

The reactive state of a widget is available via its getState() method:

After that you can:

• subscribe to a parameter and run your custom logic upon changes at any moment

• change parameters, and the widget will react to the change

You can change several state properties at once:

You don’t need to refresh the widget afterwards. All listeners of the reactive state will do it on their own.

Live demo >>

Overrides and Services: Customizing widget logic

Jet-based widgets do not have the usual public API, that’s why you won’t be able to customize them in the old way. Instead, widgets have service modules with the methods for the inner logic. You can redefine any service, e.g. the Backend service, if you require another logic of server-client communication.

Any method can be called directly, e.g.:

…and any method can be redefined. For example, you can redefine files to load the contents of directories in a different way:

Live demo >>

Common Customizing Guidelines

To know what exactly to override to get the result, you need to read the source code. However, there are basic guidelines on what to look for:

• changing the UI: look for a view class that contains the component (you can also consult class maps in the docs, e.g.) and redefine the config method of the view class: example
• changing the way the UI works: look for a view class that contains the component and redefine the init method or other class methods: example
• changing or adding functionality: add or redefine methods of view classes and services; e.g. Operations would be the service you want to look for if you want to handle app actions in a different way: example
• adapting the widget to your custom backend code: look for the Backend service or other services that deal with backend (e.g. Tags, Users), their local data counterparts (e.g. LocalData, LocalUsers, LocalTags) and override their methods: example

Nothing is properly private in Jet-based widgets. You can get to any method, property or component and change them. This is both a blessing and a great responsibility.

Flexibility is Responsibility

Flexibility means that you do not have to invent long and convoluted ways to change components and behavior. Everything is open to customization and improvement.

Flexibility also means responsibility …and the love for reading the source code. Since there is not much of the conventional API, we did not document every single method of any view or service – except for the Backend service that is the first candidate for customization We also provide general configuration guides and ‘How to’ pages with the ideas for the common tasks.

We are of course updating the documentation when our users find it insufficient. However, to truly understand how Jet-based widgets work, what the views and services are, etc, you will need to read the source code. If you have any problems, feel free to contact us. We are always happy to help you.

What’s Next

Meanwhile, we are already working on several Jet-based solutions to extend the collection of Webix complex widgets. If you are waiting for a specific tool, please share your ideas in the comments section.

Stay tuned for the updates and stay safe

The post New Strategy of Complex Widgets: Why Webix Jet appeared first on Webix Blog.

Today we have a rare opportunity to learn how the business of one of the most experienced Webix users is developing. We talk to Valery Kuznetsov, an author of the cloud platform for developing software solutions WizXpert. 

A year ago, we interviewed Valery. He told us about the experience of creating a new platform, his own version of the cloud IDE. Today we will discuss the changes and how the development of this project is progressing. 

Valery, we are happy to see you again. What has changed over the past year?

We have made significant progress, and the functionality of our system (WizXpert) has expanded. Our customer base has also widened. In particular, I can mention large agricultural holdings HarvEast and MenorahAgro that have become our clients. We are still in good standing with our customers and despite the high competition, we successfully maintain our positions.  

How has the functionality of your cloud platform changed?

There are many changes. First, we have added multi-window support for working with source code. Now you can edit the module code with two editors in one window by analyzing the code and selecting widgets in it. To make it easier to navigate inside JavaScript code that is rich in interfaces, widgets are highlighted inside functions.  

We also have a library of our own components now, that allows us to quickly find and reuse successful solutions and modules. System modules can now be linked into complete solutions. 

In addition, we have added comments in the form of json objects. This allows you to comment on the code inside the module in a more structured way. When you add such a comment, the module text is analyzed and notes are extracted from it. Based on them, a certain structure of the document is built with the ability to quickly go to the note.  

Second, we have developed a single mobile application that covers the needs of all our customers through a universal approach, which we call WizXpert. This is our unique product that is in demand.  

For backend tasks, we have implemented a mechanism for working with scheduled scripts (cron). This allows us to conveniently manage them and get information about their purpose, schedule and business needs in general.  

The WX SmartPlatform mobile platform has appeared as a separate project. This is a full-fledged environment for rapid development of hybrid mobile applications. WX SmartPlatform is based on Cordova, and Webix is used to create the user interface. Developers with no native part experience can use it to create mobile apps. Hybrid mobile apps created with Cordova combine the stability of a native mobile app with the advantages of a web solution. The system itself provides an additional bonus in the form of cross-platform and rapid implementation of solutions. 

Can you give examples of business tasks that customers set for you?

This can be anything, from quality and deadlines control, theft prevention and crisis management, to data accounting and post analysis, business intelligence and quick access to information. 

We provide full integration with existing systems and data in the client’s company. For example, with accounting and reference data of the 1C system, or integrated client’s ERP system, LDAP authorization services. 

These are difficult and complex tasks. Let’s take, for example, the automation of controlling the processing of fields in an agricultural enterprise. This implies obtaining reference data from the 1C software package, importing information about the processed land area, time resources and fuel costs, and analyzing data for making management decisions. 

Sounds complicated and confusing! 

Yes, it’s not that simple. It should also be taken into account that in modern realities, the system should be as mobile as possible and accessible from anywhere in the world, from any device. And the new elements of the system, such as smart phones, require their own remote administration tools. 

Is WizXpert used by any third-party developers, or is it just your internal tool?

At the moment it is our own toolkit. Our colleague, Denis Stovbun, is involved in the development of the backend. We are developing and improving it to increase our work performance and reduce costs. When developing new solutions, all the specialists of the company actively use the system functionality.  

WizXpert turns out to be your main competitive advantage, doesn’t it?

It’s one of them I’d say. It gives us an undeniable advantage in terms of speed and flexibility over constantly changing business processes. 

Our expertise contributes greatly here as well. It has created a good reputation and the image of a reliable and experienced partner. 

Overall, undoubtedly, our methodology and platform architecture provide a unique approach to work. In practice this means a high speed of development and customization of solutions to meet the needs of our customers. In the shortest possible time we create mobile applications, web portals, and backend solutions. This is my own IDE ideology. It is somewhat similar to the FoxPro architecture. But the main business idea around which WizXpert was built is to bring a client and a developer as close as possible. We have reduced the waiting time between setting a task and ‘shipping’ new functionality to the client. Here we are talking about a full cycle of production and support of client-server solutions, starting from the server part and to the mobile application client. 

Are you still using Webix?

Yes, absolutely. The ideologies of Webix JavaScript UI Library and WizXpert are remarkably similar, both of these solutions perfectly complement each other. Webix is used both inside WizXpert and in WX SmartPlatform. 

Tell us more about WX SmartPlatform.

Using WX SmartPlatform, programmers without experience in developing JavaScript and PHP (Node.js) applications can quickly create working cross-platform solutions for mobile devices.  

We have selected the necessary functionality for working with the hardware of the device and creating user interfaces, and connected the Webix library. We have created a mechanism for loading javascript modules with the customer’s business logic into this wrapper application.  

We have developed algorithms for remote maintenance of mobile apps and devices. The result is a unique product. 

The mobile app itself is a hybrid, based on the Cordova platform, which combines the stability of the native app and the advantages of a web solution.  

I see great potential in this product and I would like to promote it as an independent project.  

The successful combination of Cordova and Webix allows you to quickly create mobile business applications much easier and clearer than it is done in Ionic, Telerik AppBuilder. 

Currently we are all experiencing the global consequences of the pandemic. Has this affected your business in any way?

The agricultural industry in our country is export-oriented. Due to the imposed restrictions, the work of seaports has been hindered, there have been delays in the shipment of agricultural products, as a result, this leads to a delay in payments along the entire chain of contractors. This has not happened before. But agribusiness is resistant to disasters. Its products will always be in demand. It just takes some time for things to get back to normal. 

The post Webix in practice: WizXpert – summing up a year later appeared first on Webix Blog.

Webix manages to trully connect people from around the globe. Today we have a talk with Nikhil Sharma. Nikhil is a full stack developer at Transportation| Warehouse Optimization company. 

The companyis a provider of end-to-end supply chain solutions. The goal of their products is to enhance the existing systems of the customers. The T|WO organisation integrates with a wide range of logistics systems. Over the past 25 years T|WO has helped numerous Fortune 500 companies in a variety of industries reduce their total logistics costs. 

Good morning, Nikhil! Thank you for being with us today! To begin with, could you please tell us about your career in IT? 

I am a Computer Science graduate and I started my career as a web developer in a startup in 2015. Since then, I’ve been working as a full stack developer. For the past 3 years now, I’ve been working as a remote developer, started with some freelance projects and then joined T|WO in October 2018. 

 
What are the main remarkable milestones of your career? 

The major milestones of my career has been the gradual shift from a backend developer to a backend + frontend developer and finally learning DevOps to become a full stack developer. Now I am able to deliver an end-to-end solution from scratch. 

What is your role in the Transportation| Warehouse Optimization? 

I’ve been in the company for 1.8 years now, since October 2018. I’m a senior full stack developer, using Node and Webix stack. I work remotely from India. 

Tell us about your company. What does it deal with? 

Transportation | Warehouse Optimization company develops add-on-analytics supply-chain software that saves money for companies that pick, load and ship products. Our solutions include cutting transportation costs by increasing the payload on trucks and containers, eliminating wasted activities in a warehouse by orchestrating all activities within capacity constraints or minimizing product loss by building damage-free, optimized stacks of product that fit into the truck. 

Our products have been tested in high-volume locations from the United States to Russia. They are battle-tested, ultra-reliable, and already saving money for companies across the globe. You can learn more about our products on our website. 

How many developers are there in the company? 

We have an international team. There are 2 developers and a tester from India. Also, there are people working from New Zealand and Mexico. Around 8 to 9 people work on technical background, there are some specialists in the support guidance. Overall we have a team of around 20 people, and we are currently hiring more. 

How have you learnt about Webix? 

It was Ivan Konovalov, who picked Webix for UI development. He has been working in T|WO for around 5 years. Now he is dealing with back-end algorythms, while I focus on the front-end with Webix UI library. We needed to change our UI at that moment and Ivan showed us Webix. 

What are the widgets that you use most often? 

They are Datatable, TabView, PortletView, Window. We haven’t tried any of your complex widgets yet, but we plan to use Kanban in the near future. 

Were there any difficulties you faced with while using the Webix UI library? 

Mostly there were issues with the documentation. I couldn’t find docs for old versions. We need them until we migrate to a new version. All we get is the migration guide, but not the full docs. It is available for the latest version only. 

Also, if we could get a solution like setState in React.js to update multiple UI components at once, it would be great. Now the only way to do that is $$(id) for every component, which is a pain for complex layouts. 

 
Did you have any adaptation or compatibility problems with mobile devices? 

Our app is desktop only, so we don’t have mobile device requirements. 

What other libraries do you use along with Webix? 

Webix only, we are not using any other UI library. Webix facilitates the development greatly. And it was crucial for us as we wanted to migrate quickly. 

Do you use Webix Jet? 

It’s next in the list for us! 

 
Do you think you will use Webix in future in your personal projects? 

Webix is a great option for me right now. When I came to the company, Webix was already used there. And now we continue working with Webix. There were a few issues with it, but apart from them, I can for sure keep on using it. 

We are always looking for new ideas and valuable feedback from our users. Do you have any suggestions on how Webix can improve itself? 

Well, the library is already full of widgets now. For me it is complete.

One more question for you regarding the modern world. Is the current situation with coronavirus affecting your company in any way? 

Actually, T|WO is a completely remote organisation. So this fact saves us from any negative consequences. Nothing has changed in the way we work with the pandemia. I believe that remote work is a future trend for the world in general. The transition to working from home that many companies are experiencing now will show if people want to continue working remotely.

Thanks for your time, Nikhil! Stay safe and have a great day! 

This document was edited with the instant web content composer. Use the online HTML converter to convert the documents for your website.

The post Interview: Webix in practice: Transportation and Warehouse Optimization solutions appeared first on Webix Blog.

Seven year ago on July 7th, Webix was released for the first time. During these years the library grew up into the mature eco-system for building web applications and gathered a large audience of developers. We are happy to deliver quality code and support you in your business solutions. Hope it is so

To keep up with the tradition, today we are ready to present Webix 7.4 with the emphasis on complex widgets.

Chat widget

First and foremost, we have worked out a solution for messaging on the base of the existing Comments component. With the new Chat widget you can:

• display the list of users and visualize their statuses
• create private chats with one user
• create chats with multiple users for group discussions
• edit chats: set pictures, titles and modify the participants

Live demo >>

The widget comes with the ready-made backend tuned for live updates, so you can start using it straight out of the box with the minor changes needed to enable the real user logging.

Get Chat widget

Managing tags and edit version in Document Manager

We continue to enhance our file and document management tools with the two updates for Document Manager.

In addition to tagging documents, now users get the ability to create new tags at runtime, modify them, set colors as well as delete the unneeded tags.

Also, with text (.js, .html, .txt) and Excel files, you can browse the edit history, compare the versions and restore any edition.

Full control over embedded charts in Spreadsheet

Embedded charts in Spreadsheet were enhanced with a number of user controls to tune their look and feel in detail.

Live demo >>

Now you can set specific data ranges for chart series, its xAxis and legend as well as control each graph separately and set its data, color, and the appearance of its points.

Moreover, extra stylistic controls are now provided to set the legend position, axis lines and titles.

Export of embedded charts and images

From now on, you can export not only the main Spreadsheet data, but also its embedded charts and images. You can download PDF/PNG and Excel files for charts and PDF/PNG files for images.

Prompt window

And there’s a small yet a frequently asked update to the Webix Core itself. Now you can easily show prompt windows to users with a built-in Webix modal box:

Live demo >>

And as usual, Webix Core and Widgets were stabilized with a number of bug fixes.

One more widget in the middle – User Manager

You might have already noticed that we released one more complex widget at the beginning of June. It is User Manager, a tool for controlling user access rights, user roles and permissions in applications.

Checkout User Manager features and license terms by the following link.

What’s Next

If you are interested in Webix Jet approach we use for the new complex widgets, go to the related blog article where we share the ideas on the strategy.

For more information on Webix 7.4 features and updates, go to the What’s new page. To get the library itself, upgrade via npm, Client area or click the big purple button to download the library.

Download Webix 7.4

Enjoy summer – with the social distancing recommended for your country, stay healthy and share your feedback and ideas in the comments section.

The post Birthday Release of Webix 7.4: Chat Widget, Updates for Document Manager and Spreadsheet appeared first on Webix Blog.

Webix continues to grow its community of users from around the world.  

From this interview, you will learn how to connect 16 cameras of one bus and how DevOps was called in the previous century.  

We have a conversation today with a Webix user from Israel. Kiril Serebnik is a development operation engineer at Lumissil Microsystems company. The company is a division of Integrated Silicon Solutions Inc. (ISSI). They produce audio amplifiers, LED drivers, touch sensors, and other analog semiconductor products. Their solutions are provided for automotive, IoT, and industrial markets.  

Nice to see you, Kiril. Please, tell us a bit about your career. 

Hello. Well, I graduated from Jerusalem College of Technology, where I studied software engineering. I started my career at Motorola company. I was a software engineer there. Hard to believe it was in the previous century already! Then I worked at Intel and at Marvell Technology group. In that company, I spent 14 years mastering my skills in DevOps. Actually, at that time it was called configuration management. It included automatization of the software development methodology. Since 2010 this profession has been called DevOps. Currently, I’m dealing with automatization of basically everything that can move.  

Such a great experience you have! What does the company you are working in now deal with?  

Lumissil is a young subsidiary of ISSI, which is a well-known American company. I’m an automation lead. Our team includes about 50 people.  

In Israel specifically, we deal with home networking and modems for Automotive Industry. These modems can transfer data via any media, such as electric wires or communication cables. The benefit of our product is obvious. You can use existing infrastructure to transmit the data, you don’t need any additional cables or wires.  

Could you recall any interesting recent tasks? 

Well, for example, I can mention one project with an international bus company. We were tasked to install numerous video cameras inside and outside their buses. We prepared a demo for them with 16 cameras, the information from which was sent via power cables to the central computer. The whole solution did not require the installation of any additional cables to make that happen. 

That’s fascinating! Does Lumissil company offer ready solutions to the customers or you work with each client individually? 

We have a reference design. So we offer ready-made solutions, but any solution can be customized to the desires of the client. 

Let’s talk about Webix now. Where is it used in your products? 

Any automated process should have a front-end. That is my approach. It may be a Windows application or web application. I have chosen a web application as I’m using Python-based backend server Django. I got to know Webix in 2015. I tried it and started using it, as it seemed technologically full. Later more requirements appeared and we decided to purchase the license. So Webix is our sole front-end JavaScript platform. 

Do you use complex widgets? 

Yes, we are using the Query builder. It’s very helpful to build queries for our database. 

We are planning to use the File Manager as well. There are many dumps from test runs in the file system. And we want to make the interface of the file system to search logs and dumps easier.  

We may also use Kanban in the future. Though we are not going to use it ordinarily. We think the movable cards of Kanban may help us in our automated tests.  

So thanks to Webix license we may expand our possibilities significantly. 

Were there any difficulties with Webix? 

I should say that all the issues that appear I usually solve through the documentation. It’s really helpful. The Webix forum is also very worthwhile. All the replies are practical. The support is handy. 

In general, I can say that all the issues are solved in one day. I haven’t been stuck with anything for a long time so far. 

The thing I like most about Webix is that I can implement any design that I wish. I imagine something and then I go to Webix and implement my ideas. There are no limits to my imagination with Webix. 

We are pleased to hear that! Do you use any other libraries in your projects? 

No. I stick to Webix only. 

What about Webix Jet? 

No, I haven’t heard of it yet. 

Has anything changed in your company due to the COVID pandemic? 

Practically nothing has changed. We worked remotely for 2 months but it hasn’t affected our performance. We have managed to cope with all the issues successfully.  

You can learn more about the company Lumissil and its products on their website. Also, you can follow Kiril Serebnik at https://www.linkedin.com/in/kirilserebnik. 

If you have something to share with us about your own experience of using Webix products, do not hesitate to contact us here. 

The post Webix in practice: When does DevOps need the front-end appeared first on Webix Blog.

Moving on with learning the experience of Webix users all over the world.  

We have a conversation today with a young and promising web developer from West Africa. Emmanuel Onah is now studying IT in Estonia and he has already got acquainted with Webix. Let’s see how helpful Webix can be for those dealing with the translating documents projects. 

Hello Emmanuel, nice to see you! What can you tell us about your experience? 

Currently, I am studying software development at the Estonian Entrepreneurship University of Applied Sciences. Before entering, I had a vocational course in Java and I had already been involved in android development. I worked as a freelancer for a couple of companies. Basically, I worked with front-end development. Now I am working in a company Cognovis GmbH (Hamburg Germany)  that focuses on distant document translation. I am a JS front-end developer.  

What is the domain your company is operating at? 

Our company is B2B.  We have 3 applications: a section for a customer, a section for the project manager, and the one for a freelancer. Customers upload their projects and project managers assign them to freelancers. So we have three products. Currently, we are migrating from ExtJS to Webix.  

When a customer who needs translation comes, the project-manager checks available freelancers for that specific task. One person is assigned to do the translation and the second to proofread it. When the freelancers accept the timing and the project we upload the document for them. So every participant of the process has their profile, where they can find the information about all the projects done and in process. Now with Webix, we are looking for a possibility to have a chat system so that the managers and customers can have a conversation and figure out all the issues concerning the project.  

That’s interesting! How have you learned about Webix? 

One of our senior full-stack engineers offered it and I gave it a try. I was used to working with React and Webix looked similar for me, so I quickly got used to it. The tutorial section on the Webix site appeared quite helpful too, though there was not much information there.  

What Webix widgets do you use? 

Tables, File manager, User manager, and Webix Jet so far. And we are going to use the Chat widget. So we are getting the most out of the Webix Pro. 

Do you use any other libraries? 

There was a moment when I needed some additional Rich Text editors. But in most cases, Webix has everything I need.  

What can you say about Webix compatibility with mobile devices? 

Everything is fine here. 

Do you use Webix design skins or custom designs? 

I use Webix design skin modules but I can change them a bit. If I need to change the colors for example. So I can say that I do both. I use Webix styling and sometimes do my own CSS improvements.  

Have you experienced any performance issues? 

Well, I had some trouble with loading Webix a few times. But I think the internet speed is very demanding from Webix, so maybe that is the reason.  

Do you agree that Webix speeds up web development? 

Yes, but depending on what you need. Frameworks are a sweet table for specific tasks. Webix is perfect for enterprise resource planning software. Something connected with project management, e-commerce, and so on. And if you just need a web display application, I don’t think such heavy architecture is needed for that. 

Thank you, Emmanuel, for this interesting talk.  

If you are ready to tell us about your product and how you use Webix in it, please contact us through the form.  

The post Webix in Practice: Resources and Project Management platform for freelancers appeared first on Webix Blog.

Webix has recently shared with the world a bunch of new features and updates. If you haven’t checked them out yet – go forward! And now we are excited to look ahead and announce even more business solutions planned for the September release.

So let’s get acquainted with the future Webix and its widgets.

Widgets for time and tasks management

Planning matters whether it is personal or business. That’s why we decided to work out new time and task management solutions.

Fully-Featured Scheduler

The new Scheduler is going to replace the existing one and promises to have the following features:

• UI for desktop and mobile devices
• several display modes: day, week, month and agenda
• ability to add and manage several calendars
• ability to create single as well as recurring events

Gantt Chart

Webix Gantt will help users to enhance the workflow and optimize corporate time management.

Report Builder

The widget emerged thanks to the high customer interest in this tool. The Report Builder widget can help to visualize and analyze large amounts of data. With this tool you will be able to:

• Build tabular reports based on the incoming data
• Configure filtering, grouping and editing capability through the UI
• Manage columns visibility
• Export the resulting tables

Empowered Math in Spreadsheet

We aim to update multi-sheet math processing. Starting from Webix 8.0 Spreadsheet will fully support working with multi-sheet formulas.

Query instead of Query Builder

Query will completely replace its predecessor. The old widget has not been developed since the Query release, so in September we will completely remove it from the family of Webix complex widgets.

Even more in Webix Core

New features and improvements will also be added to the library Core:

• Extra controls for precise color and time selection;
• Horizontal mode for timeline
• Usability update for tooltips
• Material-based icons in all skins
• Fixes of painful bugs, performance and usability updates

What’s next

So, this is our roadmap for the September release. Now we are already working hard to deliver all the above-mentioned solutions in Webix 8.0.

You can also influence the future of the Webix library by sharing your ideas in the comments below.

Dream big. Shine bright. Stay tuned.

The post Webix 8.0 Teaser: Exploring Would-be Features and Updates appeared first on Webix Blog.

Date and time selection is a frequent task in modern web-development. It is important to do it in a simple and intuitively clear way to ensure successful communication between your application and users.

So let’s explore what Webix can offer for retrieving date and time from users.

Simple date and time selection via Calendar

Webix Calendar is shipped with all the basic functionality and comes useful if you need an unsophisticated date/time selection (e.g. when filling a form). You can use Webix Calendar for setting dates into input fields with the help of Webix Datepicker

What’s more, you can switch Calendar or Datepicker to the “time-only” mode to select only time with just one line of code:

As easy as that.

View code >>

If you need date and time ranges, please consider the DateRange and DateRangePicker widgets.

Benefits of this approach

As users are limited in their choice by the UI there is no place for picking invalid dates or time. Even if you make inputs editable, Calendar will try to parse its text.

What’s more you can disable picking particular dates or time with the blockDates and blockTime functions and filter the desired values using the Date module as in the example below:

It is also possible to specify minimum and maximum date and time values. Anything beyond those values will be blocked:

View code >>

Limitations of this approach

However, UI limitations here is a double-edged sword as they don’t allow selecting time with high precision. Users can only pick a time with a 5-minute precision or more.

Selecting time from predefined options

But what if users need to pick a time down to the minute? Let’s explore other Webix tools that are not meant to deal with time management yet will help to select exact values. Webix Combo (or its non-editable sibling, Webix RichSelect) allows setting predefined options so you can use them to specify the accurate time units.

Try to select time:

View code >>

Benefits of this approach

You can specify time accurate to the minute. It is also possible to define options with a 5-minute increment thus blocking the rest

View code >>

Limitations of this approach

Sometimes the list of options can be a bit longish (e.g. in case of minutes) and users will have to scroll through all the options.

Manual time selection with Slider

Another way to ensure time precision is to use is Webix Slider. You can combine it with Webix text inputs to make time selection even more flexible.

You can try it yourself:

View code >>

Benefits of this approach

Time can be selected from both slider and input that make it easier for mobile users to pick a value. You can also tune time steps (e.g. to 5-minutes)

View code >>

Limitations of this approach

Blocking specific values can be problematic.

What’s next

There are lots of tools for time and date management in Webix and each solution has its pros and cons. So you are to decide which of them is best for your application.

Please share your ideas about tools you want to see among the other controls for date and time management in Webix library. Or simply ask questions if any

The post Managing Date and Time with Webix appeared first on Webix Blog.

You may have heard about a volatile election campaign that is currently taking place in Belarus. We are grateful to everyone who cares about us and worries about Webix. We are happy to inform you that we continue to develop Webix and provide technical support to our users.  

All our servers and services continue to work properly. Our technical support team may have difficulty accessing the Internet. This may cause some delay in processing requests. If you do not receive a response from the support service within the agreed time frame (according to your technical support plan), please wait a little longer, and we will answer all your questions as soon as we can. We are taking all measures to resolve technical problems as soon as possible and continue to provide technical support as normal. 

Our work has not undergone any significant changes. 

We continue to work, develop, and support Webix. 

The post Important information from the Webix team for the users appeared first on Webix Blog.

Webix offers several ways for editing tabular data of various types. Most common practices to do it is via built-in Datatable editors or with the help of a standalone Webix Form. But the question remains – how to put it all together to deliver good UI and UX to users?

Editing with inline editors

Let’s imagine we have a table with some data. To provide a better user experience we make it editable so that users can make changes to the data right in the table.

Try editing some data:

View code >>

Everything seems to work fine. However, this approach is not that efficient because every time a user saves a value in the editor the Datatable sends it to the server. To overcome this peculiarity, we can edit the entire row with the dedicated editRow method. We can define an icon in the last column that will trigger this method upon clicking on it:

Now you can edit the entire row:

View code >>

You probably noticed that after selecting an option from Combobox, all the editors got closed. It happens because Webix finishes all the current editings when a user selects an option from Combobox. The same goes for clicking outside a row being edited – the row gets closed. But what if we need to start and end editing strictly on clicking a particular control?

Editing with Webix Form

A simple and straightforward solution is to implement a modal window with a form inside. Right like in the demo below:

View code >>

Editing now works as expected and looks not so bad. However, we can take a step forward and deliver even better user experience by sticking this form to a row being edited.

Combining form and inline editing

We can combine form and inline editing. As far as the form is going to be inside Webix Window we can tune its appearance so that it won’t differ from the Datatable built-in editor.

That’s how it looks:

View code >>

Exactly what we need!

What to pay attention to

There are some details you should pay attention to while implementing this solution.

Grid

You should specify a template for the last grid column to switch its icon depending on the current editing status: “wxi-dots” if editing is not active and “wxi-check” if editing is active.

The edit property of a data item represents its status and gets switched by the dedicated editStart and editEnd functions described further.

Window and Form

When styling the window make sure to hide everything that makes it a window. You should disable its header and hide the borders. Make sure to put the window inside the grid container to provide its correct positioning during scroll.

The height of the form should coincide with the row height (in our case it’s 50px) and the width of the controls should be the same as the column width. Specify the form controls depending on the type of data they are used for. If some fields are not supposed for editing use Webix labels as it is shown below:

Editing lifecycle

Start editing

In our case editing fires upon a button click (the “wxi-dots” icon). The starter function retrieves the values of the active row and sets them into the form. When editing is active the “wxi-dots” icon is replaced with the “wxi-check”.

It is also important to place the window right above the row so you can make use of its show method. Note that the “x” and “y” properties are calculated with regard to the table offset to ensure correct positioning in any layout.

The showForm function is also called after every scroll. It is done to stick the editor window to its row while scrolling.

End editing

When you click on the “wxi-check” icon the form validates its values and saves them if they match the validation rules.

Note that you can check whether the form has been changed with the help of the isDirty method. If it is the case you should call the updateItem method to render new values in the grid and send them to the server. If there were no changes – just change the icon back to the “wxi-dots” with the refresh method. That’s it.

Solution for horizontal scroll

If you want to implement a horizontal scroll make sure to wrap the table in scrollView with the scroll property set to “X” to position and render the editing window correctly.

You should also take into account how much the user has scrolled the table. You can retrieve the current scroll position with the help of the getScrollState method and then position the window based on that. In the example below the scroll position is available as state.x:

Datatable with horizontal scroll:

View code >>

What’s next

How would you solve this task? Share your thoughts about this solution and feel free to propose your own ideas in the comments section below.

The post Exploring Different Techniques for Datatable Editing appeared first on Webix Blog.

Quite often programmers face the necessity to filter large datasets by various periods of time whether it is a decade, year or a custom period. A vivid example here would probably be Webix Inventory App where we implemented such a solution with the help of the DateRangePicker and Richselect components. So in this tutorial we are going to build a control that will help you to filter multi-page data by certain date intervals.

This is what you are going to build:

View code >>

So let’s do it step by step.

Building the interface

The control is a combination of other controls, namely:

• DateRangePicker for date selection
• Richselect with predefined time intervals
• arrows to switch the intervals back and forth

As far as several controls are engaged you need a container to nest them in. Webix Toolbar seems to fit perfectly. So let’s define a toolbar and populate it with the controls. The date picker should be at least 220px in width. For sake of convenience specify the initial date range with the help of the value property. To hide all the buttons in the popup calendar add the suggest property to the config and inside its body field disable buttons and icons as it is shown below:

On either side of the date picker add an arrow to be able to page back and forth through intervals.

You also need a list with predefined date intervals. In the demo they are a year, month, 12 months, and a custom interval. While with the first three periods the values are pretty clear the last one needs the $empty property to reset the current value. So let’s create Richselect and pass the options to it.

By this point you should have a ready-made interface.

Code of this step >>

Implementing logic

The interface is ready, so it’s the right time to define the necessary behaviour for the controls.

Tuning Richselect

You have created a list of predefined options and now let’s breathe life into them. Richselect will set a date interval of DateRangePicker (a month, a year, or last 12 months). Let’s handle the onChange event to track changes in the select box and set dates for the date picker accordingly:

The setRange function takes the ID of the selected option as a parameter and switches the value of the date picker according to that ID.

Code of this step >>

So the two components are bound and changing value in the select box will change the one of the date picker .

Setting custom mode

In the demo it is the date picker that deals with custom intervals. So when the user selects a date range that does not coincide with any of the predefined ones, you should reset Richselect value. Let’s add the onChange event listener that triggers every time the user selects a date range.

As far as the user can pick a month/year/etc. manually уou should check whether the selected value matches any of the predefined time intervals stored in the array called “ranges” (all the values are in ms). If it’s the case, change the value of the select box value to the matched one (year, month, etc) if not – the value of the select box is reset.

Code of this step >>

Paging with arrows

Now let’s implement paging where the arrows will switch DateRangepicker value. You can add a common function that will be called upon a click on either arrow.

This function receives a parameter (1 or -1) and steps forth or back correspondingly.
First, you need to disable the arrows until both start and end date are selected in the date picker. Apart from that copy the date to avoid changing the original object.

Now you need to calculate the date according to the current Richselect option (or lack thereof) and the argument passed to the changeRange function. If no option is selected (the “Custom” option is selected) then the step will be based on the current date picker value. Basically, you need to shift the start and end date by this step. So it makes sense to use the add method of the webix.Date module that serves this purpose.

Try selecting a range:

View code >>

That’s it! The control is fully armed and you can check it out in action e.g. for filtering some data.

Using the control to filter data

The resulting control can be used to filter data by date intervals e.g. to look for specific chunks of data. We are going to filter the Datatable by comparing the start field of the data items with the time interval from the date picker.

View code >>

To sum it all up

We combined Daterange, Richselect, and icons into a small but useful tool that will help to pick date intervals as well as step back and forth through them. Originally this control was implemented in the Inventory App (right time to check it out if you haven’t yet). The resulting tool can be used for filtering large datasets by certain date intervals.

Have you ever faced such a task? How would you solve it? Share your thoughts with us in the comments section below.

The post Filtering Data Using DateRangepicker with Paging and Preset Intervals appeared first on Webix Blog.

Today we talk with Tore Hvidegaard. He is the founder and CEO of 3dbyggeri, a digital construction company in Denmark. The company was established in 2007 and since that time they have become experts in digital construction of building materials and procurement rules. An architect himself, Tore has managed to create a dynamic company with the leading position in its business domain.

Nice to have you, Tore with us today. Tell us about yourself and your career.

Hello. So, I don’t have an IT background, I’m an architect by profession. The 3dbyggeri company was founded 13 years ago by myself and two developers. Everything I know about IT architecture, setting up and developing systems I have learnt from the guys I work with.

Could you tell us more about the scope of your work?

We work within the construction industry. We do consultant work. For the last 2 years, we have been developing IT systems for internal use to improve our processes within the company. With time people figured out we had the software they needed and they wanted to buy it from us. So we had to transform it a little to make it useful for the people. For those who don’t have time to set up a lot of things. Today we have software that can be applied for different types of industry, but it is based around the same core, which is basically accessing and using databases.

How did you decide to work in this particular business?

We started using the tool for our tasks. Building owners hired us and we had some repeating tasks that we wanted to optimize. We began developing tools to get the overview. People began looking at what we could do and asked if they could buy the software from us. So we started investigating the market and the potential of offering our services there.

Who are your customers?

They are manufacturers of building materials, architects, and engineers.

Are there a lot of competitors?

We are first movers. The market is high and we are moving in front of it. So when we started we couldn’t just copy what other people had done before. We had to figure out our own solutions.

How big is your team?

There are four people. But they are very specialized within certain kinds of software. In the web development part, two people are doing different stuff.

What’s your system platform like?

We develop on Ruby on Rails and add different libraries. We try to make the process organization as lean as possible to let people do what they want to do. Our main platform is called Glasshouse. It makes the building processes transparent. All information is gathered in one place. We use different kinds of algorithms to align the material to make sure that things that are being built fit the supplier. When building large projects like hospitals and schools, commonly, people work with different information. Documents are usually stored in PDFs, Word docs, and Excel spreadsheets. We collect everything in one place to make things visible and transparent.

How is Webix used in your solutions?

The central part of our software is one big table that the user sees. The information from many different places is in one place and it is convenient. Huge js spreadsheets are interesting but difficult to work with. At the same time, there is a high demand for them. If you are used to working in Excel with simple editing and information grouping options, you want nothing else. We experimented with some prototypes of simple table setups. People were quite happy with that. But the better we did, the more they demanded. They saw the potential and the ideas kept flowing. Doing everything by hand was close to impossible, so we began investigating different libraries and setups that could handle the features and functions that we wanted. It was one of our clients that showed us two libraries, saying “they probably can do what you want”. At first, we had our view on another one, not Webix, but we dug into, tested what could be achieved with them and how easily. We ended up selecting Webix and made implementations to make sure everything that was shown was possible to do. It was a mix of general and very specialized features that we needed, combined with how easily we can implement the documentation. Those things let us choose Webix UI framework. So far we’ve been using the Tables mostly. We looked at other parts of the library to know that we can develop further if we need it. The library is huge. We are currently using like 10% of it and planning to use 20-30%.

Are there any difficulties with Webix?

It’s quite easy to find examples and snippets in the documentation to figure out what to do. I like the concept of the forum, where you ask something regarding a specific problem and the customer support will answer and make a snippet for how it works. So you can actually see how it works. It really helps those noncoding technical guys like me. Coders may write something but sometimes it’s difficult to understand what they mean. Those snippets save us a lot of time. Coders like it as well, as they usually spend a lot of time explaining what they mean. 

We still have a need for printing things from the system. When people see something they like, they want to make a PDF. We’ve been experimenting with that, but that’s not the superstrong side of Webix.

What can you say about the mobile compatibility of Webix?

We are very reliant on big screens. Users don’t have a big need for mobile apps right now. But we are discussing the possible solutions of how Excel and Google sheets can work on mobile platforms.

Thank you for this talk. It was nice meeting you. 

You can find more information about Tore at his LinkedIn account and on the 3dBuilding website. 

And if you would like to tell us about your experience of using Webix, do not hesitate to contact us through the form.

The post Webix in Practice: Digital construction routine appeared first on Webix Blog.

In the middle of the yellow leaves season we are excited to announce the annual grand release of Webix. In version 8.0 you can find new complex widgets for planning and scheduling: Scheduler and Gantt. Also, the release includes updates for Spreadsheet, horizontal Timeline, new controls for time and color selection, dynamic tooltips and enhanced Datatable performance.

Read more to consider each feature in detail.

Scheduler Reborn

We are really happy to present the reborn Scheduler widget, which comes to replace the existing mobile one and can work in both modes – desktop and compact. With this widget you can enjoy all the necessary features for planning:

• view events by day, week, month or as an agenda list
• create and edit events in the side panel
• drag and resize events to change their date and time
• group events into separate calendars
• switch off editing by going into the read-only mode

Live demo >>

The widget is supplied with NodeJS and GoLang backend and preserves the data format from a Mobile Scheduler for convenient migration.

But please note that the new Scheduler has the totally new API and structure. So if you are an active user of Mobile Scheduler, do not upgrade directly, but first study the documentation and play with a trial version.

Gantt Chart

Together with Scheduler, the new Webix Gantt widget comes to life. You can use it to manage projects via the convenient interface, namely:

• create, view and edit tasks
• establish links between tasks and remove them
• drag and resize tasks to modify their start date and duration
• configure scales with cells by day, week, month or year

Live demo >>

The widget also boasts desktop and compact modes. Moreover, Scheduler and Gantt are tuned to work with the same data, so you can use them together to visualize the same workflow.

Updates for Spreadsheet

In Webix 8.0 several small yet important updates were made to make Spreadsheet widget even more convenient.

Firstly, you can export Spreadsheet data to PDF with all its sheets and cell styles.

Live demo >>

Secondly, there are several additional options in toolbar menus, which help tuning the grid. Now you can set cell border type alongside with its color and reset row height or column width to default sizes.

Now let’s browse the updates in Webix Core.

Horizontal Timeline

In response to frequent requests, the Timeline widget has been extended with an ability to align timeline items horizontally. Here you can place items to the top or bottom of the scale or in turn.

Live demo >>

New palette for Color Board

With an updated ColorBoard you can select colors from the modern Material palette. Additionally, there’s a possibility to remove a line of gray shades.

Live demo >>

The new color palette is incorporated into the ColorPicker and color editors. However, if you are used to the old palette, you can get it back by a single setting.

Widgets for precise color and time selection

Color Selector

However, the ColorBoard always has a fixed color range. With the new Color Selector widget you can set an arbitrary color by changing its hue and shade.

The widget can be used standalone or as a dropdown of ColorPicker:

Live demo >>

Timeboard

The TimeBoard widget allows setting time units via the convenient interface. You can drag sliders to set minutes, hours and seconds.

Live demo >>

The widget can be used standalone or as a dropdown of DatePicker:

Overflow-Only tooltips

Webix tooltips became even more flexible. Starting from 8.0 you can show them only if there is not enough space to display text in the target area.

Live demo >>

Enhanced performance for Datatable header

This is rather an invisible update, but it significantly enhances Datatable performance. We have removed the HTML table from the header, and as a result, wide Datatables render much quicker. Also, this update fixes the frequently reported bug with zooming in Chrome.

However, please consider the breaking changes it brings: you may need to adjust header styling and custom header elements in your Datatables.

What’s Next

For more information on Webix 8.0 features and updates, go to the What’s new page. To get the library itself, upgrade via npm, Client area or click the big purple button to download the library.

Download Webix 8.0

We had to delay Report Builder and upgrades for Spreadsheet to deliver them fully featured and tested. They are still on the way and most likely to be released at the end of November, just before the wintertime snow covers the land and Christmas rush comes to the streets.

Stay healthy and tuned for the updates and feel free to share the feedback and ideas in the comments section below.

The post Webix 8.0: Scheduler and Gantt, New Controls in Webix Core appeared first on Webix Blog.