Recently, GrapeCity officially released the latest version of SpreadJS, V17.1, bringing a series of compelling new features and enhancements to the front-end form control market. The update is designed to further enhance the user experience in the calculation engine, report generation and analytics, and to provide more powerful tools to support developers in a variety of industries.
Main update highlights
Workbook Enhancement
right justification
Setting the style's textDirection property to rightToLeft changes the direction of the text in the cell to right-to-left. This accommodates languages and scripts that are written and read from the right and ensures that data from those languages is displayed correctly and naturally.
At the same time, you can configure rightToLeft to be true for a particular worksheet, which will form a right-to-left format in terms of overall appearance, as shown below:
Rich Text Support Bulleted Lists
The use of unordered bullets and ordered numbered lists is now supported as part of the rich text format. List items have type, level and richText as their attributes.
File Upload Cell Type
In this new version, we have introduced a new FileUpload CellType that allows the user to select any file by clicking the FileUpload button inside the cell.
Users can also perform operations on these files, including previewing, downloading, and clearing. The default upload button is displayed in the cell as shown below:
Document Customization Properties
SpreadJS now supports setting custom properties for workbooks, including title, author, subject and other data. These properties can be managed in the workbook using the API or in the SpreadJS table editor using the Advanced Properties window:
Drag through the row and column headers
Columns and rows can now be moved or inserted by dragging the header. This can be enabled by setting the allowDragHeaderToMove enumeration of the alignment options to rows, columns, or both. This can also be enabled in the SpreadJS designer:
Copy shapes and diagrams as images
Shapes, charts and slicers can now be copied to the clipboard and saved as images. We've added a new API called toImageSrc to the Shape and Shape Base classes, as well as for charts and slicers. For SpreadJS Designer, there is also a new "Save as Image" option when right-clicking on any of these objects:
Report plug-ins
Adaptive row height and column width
The SpreadJS Reporting Plugin now supports automatic resizing of rows and columns. This allows the user to specify whether the size of a row or column should change based on the text in it. This gives the designer a new API for setting the AutoFit property and a new interface setting:
Page total
function of the Reporting plug-in generates the value of the overflow cell in the worksheet. In the new version, another parameter has been added to specify the current page. For example:
=SUM((C2, "CurrentPage")) will generate the sum of all overflow values in the current page. Its template is:
The first page will then look like the following:
computational engine
Performance Enhancements for Formula Tuning
Internal logic has been updated in the new version to improve performance when inserting/deleting rows/columns. Calculations will take less time than before when using these operations.
Calculation of increments
The new version supports incremental calculations, where the entire calculation is split into multiple segments during execution. This allows you to respond to user actions when the calculation task is large, thus preventing the UI from becoming unresponsive when the workbook contains many formulas. Developers simply set the incrementalCalculation property of the Workbook class to true. there is also a status bar item that shows this calculation process.
Hidden formulas in protected states
The visibility of formula cells in a protected worksheet can now be controlled using the hidden property of the Style class or the hidden method of the CellRange class. When enabled, when the hidden cell is active, no data will be displayed in the edit field, the input editor will be empty in edit mode, and the formula editor panel will not display formulas.
With this feature, formulas in some cells can be protected from being seen or modified by the user.
diagrams
Chart table structure citation
The new version has support for structured reference formulas and now supports them as chart data sources in tables. If the chart is bound to a complete table or to some columns of a table referenced using a table structure, any updates in the table will automatically update the chart's series or data values at runtime.
Chart Data Label "Cell Value"
Chart data labels now support the use of cell references to display values for a selected range of cells. Users can select specific cell ranges for chart data labels.
a meter (measuring sth)
Custom Styles
In the new version, SpreadJS allows users to customize the style of the table
summary tables
predefined column
The new version of SpreadJS Set Tables supports adding, updating and deleting columns with meaningful column types to help design tables easily. The column types are listed below:
| Column Type | data type | descriptive |
|---|---|---|
| numerical value | numerical value | Used for most values with a specified format |
| copies | copies | For common text |
| formulas | Depends on the outcome | Calculate values based on other fields in the record |
| find | Depends on relevant fields | Find specific fields in related records |
| dates | dates | Easy to enter date values |
| checkbox | genuine or fake | Used for checking/unchecking, data type TRUE/FALSE |
| checkbox | Depends on options | Selecting options from the preset list |
| Currency | numerical value | Indicating currencies in a cultural format |
| percentage | numerical value | Indicates numbers in percentage format |
| telephones | copies | Validating Indicator Digit Strings with Masks |
| mails | copies | Validating Indicator Email Addresses with Masks |
| link (on a website) | copies | Indicates the URL text |
| Creation time | dates | Setting the date when creating a record |
| Modify Time | dates | Setting the date when a record field is updated |
| attachment (email) | boyfriend | Allows attaching files directly to records |
| barcode | Depends on the input | Generate the specified barcode from the field |
Withdrawal of Redo Support
The new version of the setlist adds undo and redo support, allowing users to undo/redo operations in the following categories:
- Configuration changes: filtering, sorting and other configuration settings
- Runtime UI operations: similar to worksheet operations, such as cell editing, adding/deleting rows/columns, clipboard operations, dragging/moving rows/columns, etc.
- Tabular API: most API operations that change data or settings (except setDataView methods)
Similarly, undo redo is supported in the form editor.
Outline grouping
In this new version, the SpreadJS integration table now supports outline grouping, where multiple fields can be defined in the groupBy method to create an outline group. This multiple grouping allows users to expand or collapse fields and include aggregates, headers and footers.
Grouping also supports sorting between grouped and base columns.
Table Editor
Customizing the Save File Dialog
In the new version, users can set the file format and file name when saving through the API, as shown in the following code:
Print Border Options
The showBorder method already exists in SpreadJS to control whether or not borders are shown during printing. In this version, we have added this option to the form editor:
Conditional Format Rule Manager supports the currently selected region
In some cases, workbooks may have a large number of conditional formats, which can complicate finding specific formats. The Rule Manager dialog now supports displaying rules for specific areas, such as the current selection or a specific worksheet:
perspective table
Custom Styles
As with the custom table style enhancements mentioned above, SpreadJS now enables users to add, remove and modify pivot table styles at runtime.
Pivot Table Grouping Compatibility Update
Excel changed the way pivot tables are grouped, so we updated the grouping strategy for SpreadJS pivot tables to match. It has been improved to enhance usability, flexibility and clarity:
| sports event | old behavior | new behavior |
|---|---|---|
| Default field source name | Default field source names are derived directly from intervals (e.g., year/month/quarter). For example, grouping by year generates a field named "Year". | The default field source name combines the original field name and the interval. For example, if the original field is "battleDate" and is grouped by year, the resulting field will be named "battleDate". |
| Original Field Type | When a field is grouped, it is considered a grouped field. | Even after grouping, the original fields remain as normal fields. |
| Date field regrouping | Regrouping requires the exact name of the original field to be used. | Regrouping requires either the original field name or the generated grouped field name. |
| Ungrouping function | Use only the original field names to ungroup. | You can ungroup using the original field name and the generated field name. |
The release of SpreadJS V17.0 Update1 marks a new level of front-end form control. GrapeCity will continue to be committed to providing users with more powerful and flexible tools to help developers in various industries to innovate and develop in data management and report generation.
For more information about SpreadJS V17.0 Update1, please visit the official Grapevine website.
/developer/spreadjs