Webix 11.1 is out! This time we are very excited to present to you a new Webix widget – Rich Text Editor. We have worked really hard to design a convenient tool that will open advanced opportunities for our users and help them extend the functionality of their projects. We also updated and enhanced our complex widgets with new features – File Manager, Document Manager, SpreadSheet, Scheduler, Diagram, ToDo, Gantt and User Manager. Let’s now go further and take a closer look at all the updates.
Rich Text Editor – a New Webix Widget
We would like to start our Webix 11.1 release overview with the introduction of the brand new widget – Rich Text Editor. The widget is a WYSIWYG tool that helps users create rich content – style text, add images, insert links, use emoji or special characters. So, if you want to implement any content creation functionality to your project or your app implies working with text – Rich Text Editor is what you need.
The widget is built as a Webix Jet app, but you can still choose whether to initialize it as a Jet app or a Webix view. In its basic configuration the UI of the editor consists of a toolbar and a text editor. The widget allows using a menubar together with a toolbar if needed. Both the toolbar and the menubar are customizable – you can add toolbar buttons, leave only the required button groups, use predefined menus and set your custom menu options.
Let’s have a closer look at the possibilities the widget provides:
- classic and document layout modes;
- built-in skins: Material, Mini, Flat, Compact, Contrast;
- convenient text styling: users can choose the font and its size, line height, text color, background and alignment;
- printing functionality;
- bulleted and numbered lists;
- link/image/emoji/special character insertion;
- full screen mode;
- image alignment and editing;
- the possibility to use a menubar together with the toolbar;
- import/export capabilities;
- customization opportunities, including the possibility to set custom locales.
Check documentation for more details about the new widget.
Core Updates
Starting from version 11.1, Webix supports QWERTY (default), QWERTZ and AZERTY layouts for creating hotkeys. This means that the users of the library can now utilize all the characters that the layouts provide for setting hotkeys. For example, a Ctrl+Ö combination that includes a special character Ö will be recognized as a valid hotkey.
File Manager and Document Manager Updates
This time, File Manager received a new feature that facilitates working with large datasets. Now you can set the number of items (files/folders) your app will load when the user opens a specific folder or uses a search bar.
Add the limit property to your File Manager configuration settings and define the number of items you want to load:
view: "filemanager",
url: "path-to-fs",
limit: 100,
});
Once the limit property is defined and the dataset size exceeds the limit – only the part of the data will be loaded and a warning icon 
will appear next to the breadcrumbs in the right part of File Manager (this is the section of the widget where the content of the current folder is displayed). Note that you will not see the icon in case the number of files that are loaded does not exceed the limit.
Move the cursor over the icon and you will see a tooltip indicating how many files out of the total number have been loaded.
When you set a limit property in your File Manager, it does not mean that users are no longer able to load all the files (at least as long as your requirements and specifications allow it – everything is customizable). They can still do it via the UI by clicking the refresh icon and selecting the “Reload without limit” option in the menu (the refresh icon is located in the right part of the widget next to the breadcrumbs).
When the user chooses “Reload without limit”, all the files are loaded to the folder and only usual Refresh without options becomes available until cache fills up. Please, note that the default cache size is only 10 folders.
Load limits are also available in Document Manager. They can be set in the same way as in File Manager.
view: "docmanager",
url: "path-to-fs",
limit: 100,
});
In addition to the limit property File Manager and Document Manager now have a new API method selectFile that allows selecting files by their ID.
In this release File Manager and Document Manager were also enhanced with the capability to display the full path to files. Select a file or folder from a directory, or choose one from the search results. Press the Preview button in the top bar, and you will see the file location in the item’s details (Information section). If you want to navigate to the folder with the selected file, just click on the path and you will get there.
In Webix version 11.1 SpreadSheet API was extended with new methods: addFormat, getFormat, setFormatName and removeFormat. The methods offer advanced opportunities for handling cell formats – adding a format, getting the format’s name, setting and removing a format. The setFormat method, which has been part of the SpreadSheet API since earlier versions and is used to set custom formats for cells, now has the capability to return the name of a format. This method is still available in the API for backward compatibility. Please, check the snippet to see how the new methods work.
One more important SpreadSheet enhancement is the introduction of the XSS safety mode. It limits the use of simple html and html generated by math functions in cells for safety reasons. The mode also imposes some restrictions on inserting images into cells via the IMAGE method (only base64 format and loading from the same domain are allowed).
Add the xssSafe parameter to your SpreadSheet configuration and set it to true to turn the mode on (the parameter is false by default).
view: "spreadsheet",
xssSafe: true,
});
With the XSS safety mode on, SpreadSheet will escape simple html, html generated by math methods and html in numeric format.
The widget provides a number of math functions that can generate html by default. They include IMAGE, HYPERLINK, SPARKLINE, CHECKBOX, RADIO.
You can also use the registerMathMethod that is extended with a new generateHTML argument in this release. If you set the argument to true, your method will be able to generate html in the XSS safety mode (make sure you have only your method and nothing else in a cell after an equal sign, e.g. =IMAGE(…) will work fine, but =IMAGE(…)&”text” will be escaped).
view:"spreadsheet",
xssSafe:true
});
spreadsheet.registerMathMethod("bold", v => `<b>${v}</b>`, null, true);
Other SpreadSheet updates include the possibility to use Ctrl + mousewheel for zooming and UX improvements for formatted dates ( if a cell displays only time without a date, the date editor will open as a timepicker).
Scheduler Updates
This time updates affected the way Scheduler displays categories in the Units mode.
This mode allows grouping events into different categories or units. The names of the categories are located on the horizontal scale of the events grid.
In earlier versions the Units mode did not support horizontal scrolling. So, all the categories, regardless of their number, were placed within the available width. It was not very convenient when the user wanted to group events by many categories. In this case the space for a single unit was becoming smaller and smaller as new categories were added.
In version 11.1 Webix engineers introduced horizontal scroll and the possibility to set the minimal width for the units. By default, the minimal width is 300px. You can change its value or turn it off.
Use the following settings in the configuration if you want to customize the width of the units:
view: "scheduler",
date: new Date(2020, 9, 1, 0, 0, 0),
url: "https://docs.webix.com/calendar-backend",
mode: "units",
units: { minWidth: 120 },
timeline: true,
override: new Map([[scheduler.services.Backend, MyBackend]]),
});
In case you want to turn the minimal width off and have no scroll, set minWidth to 0:
view: "scheduler",
date: new Date(2020, 9, 1, 0, 0, 0),
url: "https://docs.webix.com/calendar-backend/",
mode: "units",
units: { minWidth: 0 },
timeline: true,
override: new Map([[scheduler.services.Backend, MyBackend]]),
});
Other Updates
In addition to the enhancements mentioned in the article here is a brief description of other UX improvements:
- ToDo: improved search indication;
- Diagram: Ctrl+ +, Ctrl+ –, Ctrl+ 0 hotkeys for zooming in, out and resetting zoom;
- User Manager: pointer cursor for clickable checkboxes in matrices;
- Gantt: tasks outside the specified scale now are not displayed on Gantt’s chart area.
You can check the full list of Webix updates on our What’s new page.
To get the library itself, upgrade via npm, Client area or click the big purple button below.
