The fall is coming to an end and we are entering the winter season with a rich harvest of new features of the Webix library. In the 11.0 release Webix engineers introduced a number of updates for the Webix core and complex widgets, including SpreadSheet, Report Manager and File Manager.
The support of the PDF.js recent version has been added to the library core. SpreadSheet received new functionalities allowing to export images to Excel, get cell reference from cell id in a table, import filters from Excel and it is just the beginning of the list. Report Manager now has the ability to show reports as standalone widgets, File Manager – extended filters for searching files.
Can’t wait to see all the new features? Well, we can’t wait to present all of them to you. So, let’s start.
Core Updates
In Webix 11.0 the support of the recent version of PDF.js, a third-party library for parsing and rendering PDFs, has been added. Now, users have access to its latest features (up to v4.7.76) and annotations, including widget signature, FreeText and Popup. This allows taking all the advantages of the PDF.js library when working with PDF Viewer.
The next update is the possibility to use mode:”auto” in webix.print(). As some web browsers do not provide the orientation option for printing documents in case size property is specified in styles, e.g. @media print { @page{size:A4 landscape, …}, Webix equipped users with this new option.
Now, you can use mode:”auto” in webix.print() settings and have the page orientation option (landscape or portrait) available in a browser:
rows: [{
view: 'button',
value: 'Print',
click: () => {
webix.print($$("table"),{mode:"auto"});
},
},
{
view: 'datatable',
id: 'table',
autoConfig: true,
data: data
}
],
});
Please, note that when you have mode:”auto” on, some other properties are ignored, e.g. the paper size paper:”A3”.
There are also important сore updates enabling users to export images (for SpreadSheet and the сore), as well as frozen rows and columns to Excel (for SpreadSheet and DataTable). We are going to consider these new features in detail a bit later in the paragraph about SpreadSheet updates.
Report Manager Updates
Report Manager received the capability to show reports as standalone widgets – now users can create separate table, treemap or chart reports without initializing Report Manager. The new widgets render the provided data as a tree map, table or chart based on the report configuration. You can utilize them, e.g. in case you need to isolate the report depending on the access level.
File Manager Updates
File Manager is enhanced with extended filters for searching files that significantly facilitate working with big data sets. Previously, users could search for files by name in the current and all nested folders. Search results were displayed in Cards mode only without the possibility to sort them. To make interaction with data more convenient Webix engineers added extended filtering for loading more precise results from big data sets.
From now on, it is possible to choose the way search results are displayed – it can be the Cards or Table mode. And what is even more notable, users have access to advanced filtering possibilities that allow:
- looking for different types of files and folders;
- defining the time period for searching;
- choosing the size of files and folders;
- selecting a location – it can be Global Search, This Folder or Custom Location.
Use the ‘Filter’ control in the snippet below to test the new functionality of the File Manager:
SpreadSheet Updates
The new version of Webix allows users to export SpreadSheet images to Excel.
To make it possible, a new image parameter has been introduced: the parameter is true by default and can be set to false, disabling export of images if needed:
Check the snippet below to see how it works:
Live demo>>
This feature has originally been developed for SpreadSheet, but it is customizable for the Webix core. This means you can customize other Webix views adding the possibility of image export to Excel: use $exportView or $getExportValue for this purpose. You can find the snippets showing how to implement this feature into a DataTable and Chart below.
Here is the demo of the DataTable with images inside cells which can be exported to Excel:
Here is the snippet demonstrating the possibility of exporting a Chart as an image to Excel. Please, note that the chart is exported as an image with no charting functionality:
This time SpreadSheet was also enhanced with the capability to get a cell reference from a cell id in a table. This is made possible by introducing two methods – posToRef() and refToPos().
The posToRef(row1,col1,row2,col2,sheet) method receives columns and rows indices, as well as the name of a worksheet as arguments. It returns a string indicating a specific cell/cells of a worksheet. This means that the method converts a position of a cell into a cell reference using Excel reference style:
To do the opposite, you can use the refToPos(ref) method and get the name of the sheet and a position of cells from an excel-style reference:
If you need to convert a cell name into an index and vice versa for some purposes, please, check this snippet showing how to do it with the help of the posToRef() and refToPos() methods.
The next SpreadSheet feature we are going to talk about is the possibility to import filters from Excel. Although users were able to import files with the filtered rows before, SpreadSheet did not support the import of the filters themselves. Now, when you want to use a source Excel file you do not need to worry about the filters as they are imported into the SpreadSheet together with the corresponding document.
Here is the demo to check the new feature – use the ‘Import from Excel’ control to add your file to SpreadSheet and see the result:
In this release SpreadSheet functionality was extended with a possibility to export frozen rows and columns to Excel. This is done via the freeze parameter in export options:
With the help of the snippet below you can test the new option – use the ‘Export to Excel control’ to download the file containing frozen cells and columns:
Note, that the possibility to export frozen rows and columns to Excel is a core feature that is available in other Webix complex widgets, e.g. in the DataTable (check this snippet to see how to add this new functionality to the widget).
Now, in addition to a wide variety of supported elements and settings for Excel import and export, Spreadsheet has the capability to work with even more of them:
- zoom – accepts a number which represents percentage or can be set to auto, e.g. zoom: 100;
- headers (indicates header visibility) – accepts a boolean value or can be set to auto, e.g. headers: true;
- gridlines (indicating grid lines visibility) – accepts a boolean value or can be set to auto, e.g. gridlines: true;
- formulasMode (for displaying formulas or values) – accepts a boolean value or can be set to auto, e.g. formulasMode: true.
In case the parameters are set to auto mode, e.g. gridlines: ‘auto’, the value is inherited from the state of the Spreadsheet corresponding method, e.g. hideGridlines().
The above-mentioned settings can be utilized in the Webix core – here is the demo suggesting a customized solution for the DataTable.
Check the snippet below to test new parameters and see the corresponding Spreadsheet methods:
Let’s pass to one more new feature that significantly facilitates searching for and replacing data in cells. Now it is available by default via the ‘Find and Replace’ control. Press the control and easily set the search and/or replace parameters for a specific Sheet or Book. The feature can work within the current Sheet or the whole document; look in formulas or values; search for results that match the case and the entire cell contents.
For your convenience, we have divided math methods into categories since this allows working with them through UI and having control over which categories you make available to the users.
The categories you can choose from are as follows: common, date, text, number, financial. Common methods are available by default, which means you do not need to add any extra parameters to have them at your disposal.
If you want to utilize other groups of methods you need to include the methods parameter with the name of the category into the code, as in the example below:
view:"spreadsheet",
methods:["date", "text"],
toolbar:"full",
data:spreadsheet_data
});
The methods parameter can accept a string with the name of a single category, e.g. methods:”date” or an array with the names of several categories, e.g. methods:[“number”,”text”]. You can also use the methods:”all” value to import all the categories at a time.
The users can now filter methods by category and search for specific methods inside the category. But note, that you need to explicitly specify the methods parameter to have this possibility, otherwise the category field will be hidden.
There are some more updates regarding categories in SpreadSheet – users have received the possibility to indicate categories for their custom methods. Check this demo showing how to create a custom category with a custom method.
Let’s continue and see what else SpreadSheet can do.
The widget received improved highlights for math:
- when you edit a cell with the liveEditor turned on, the text of a formula is highlighted (you can see that related cells are highlighted as well – this feature was introduced earlier);
- when you edit a cell without the liveEditor, the related cells are highlighted, but the text of a formula is not. This happens due to the limitations of datatable inline text editors in cells when working with the tabular editor;
- when you select a cell and have formulas mode (showFormulas) turned on, the text of a formula and the related cells are highlighted, irrespective of whether you use the liveEditor or work without it (previously, this functionality was supported only with the liveEditor turned on).
Other Updates
Visit the What’s new page to see the full list of updates and fixes that have been introduced by the Webix Team this time. To get the library itself, upgrade via npm, Client area or click the big purple button below.
We really hope that the implementation of the new features developed by Webix engineers will empower you to create innovative projects providing users with advanced functionalities that help make complex things understandable and easy to deal with.
