The second service pack for SpreadJS v14 has a lot of added enhancements to our Designer, as well as new workbook enhancements and framework support. Continue reading to explore some of these exciting new features!
Designer Enhancements for the Developer and End-Users
This release mainly focuses on the enhancements and customizations made to the SpreadJS Designer Component.
The new customization options for the optional Designer Component add on allow you to easily provide an optimal and more localized Designer solution to your customers – offering them more Excel-like features and customizations than ever before.
Single Toolbar Mode
The ribbon display in our Designer has been enhanced with a single toolbar mode. Developers can now add a button that enables the user to switch between display modes to better fit mobile devices and smaller screens.
Custom Localization
The SpreadJS component itself has extensive customization options for localization. With this release, we have extended that functionality to include the Designer Component.
Now all of the UIs in the ribbon can be localized to satisfy your customer's language requirements.
Custom Component Support
Developers can customize the buttons and menus that they added to the Designer, and we have now added support for adding custom components into the Designer ribbon, such as adding a customized date picker control.
Ribbon Collapse
In addition to the single toolbar mode, we have also enhanced the ribbon collapse code to provide a state where developers can check if the ribbon is collapsed or not, and then manually collapse it in code.
Excel-like Go To
With the Go To feature, users can navigate to the Home tab under Editing → Find → Go To... to open the Go To dialog – providing various options for sheet navigation.
Find and Replace
Prior to this release, we supported the "Find" functionality. Now with this release we have included support for Replace and Replace All, which also includes a new menu window.
Similar to the Go-To feature, users can open this window from the Home tab under Editing → Find → Replace.
Name Box Enhancement
The name box in the Designer shows the name of the currently selected cell range. This feature has been enhanced to allow users to select a specific cell range in the workbook when a name is chosen from the drop-down list of that name box.
React Designer Definition File
We have added a user-requested definition file to our SpreadJS Designer Component React wrapper, making it easier to incorporate into users' JavaScript applications.
Sparkline Ribbon Section
The "Sparklines" section of the Insert tab is now similar to "Charts" – featuring a singular button with a drop-down for a variety of sparkline types.
Format Painter
Users can now add and utilize the new Excel-like "Format Painter" button in our Designer. This functions exactly like its Excel counterpart – enabling users to copy and paste formatting with a simple click of a button.
Auto Outline
Creating groups and outlines in SpreadJS is even easier with v14.2 enhancements and features. One example of this is the newly implemented Excel Auto Outline feature.
Simply select a range of cells that you want to outline and click on the Auto Outline button.
Context Menu Sheet Copy/Move
In order to provide a more Excel-like experience, v14.2 has added the Sheet Copy/Move function to the context menu when a user right-clicks on a sheet tab in the Designer.
File Import Event
To assist with customizing file import functionality, we added an event that fires when a file is imported. This makes it easier to implement the custom functionality that occurs when a file is first imported into the Designer.
File Loaded/Reset Events
When resetting or opening a new Excel or SSJSON file, the Designer will now fire a "Loaded" or "Reset" event, which allows users to customize any logic they need when loading a workbook.
Unhide Multiple Sheets
With this release, users can now unhide multiple hidden sheets with a new menu.
Shape Selection Pane
Utilize the new Shape Selection Pane to provide users with the ability to easily select shapes in a sheet, hide them, or show them.
Custom Sort by Color
In v14.2, we added further options to custom sorting within the Designer, including cell, color, and font color sorting.
Close Dialog API
When customizing the Designer, some users found that they needed to programmatically close a dialog to support their customizations. We've now added an API that allows users to seamlessly do so.
/**
* Close an opening dialog.
* @param {string} templateName - The opening template name, the template must be registered in the designer.
* @param {boolean} submitValue - Whether to submit the opening template values after closing the dialog. True is the same as clicking "OK" and false is the same as clicking "Cancel".
* @example Sometimes users want to close the dialog directly without UI, so they can use closeDialog and decide whether to submit the values after closing the dialog.
*/
export function closeDialog (templateName: string, submitValue: boolean): void;
//GC.Spread.Sheets.Designer.closeDialog("myDialog", true);
Ribbon Scrolling Support
Scroll the Designer ribbon to the left and right to optimally show the Designer on smaller screens.
Workbook Enhancements
In addition to Designer enhancements, we have added some enhancements and features to the main functionality of SpreadJS.
Match Excel Keyboard Shortcuts
SpreadJS now supports even more of the same keyboard shortcuts as Excel, including Alt combinations and function keys, such as Shift + Space to select a row, or Ctrl + Home to move to the beginning of a sheet, among many more.
Status Bar FindControl Method
We have exposed an API to find an existing status bar on a SpreadJS instance, allowing you to add your own custom data to that status bar:
// Creating the status bar
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);
// Get the status bar if already created
var statusBar = GC.Spread.Sheets.StatusBar.findControl('statusBar');
Incremental Loading Sheet Names
Using incremental loading, a workbook can be loaded sheet-by-sheet. With this release the name of the current sheet being loaded will be displayed in the status bar, giving your users better information on the loading status.
Workbook Constructor Host ID
Create the workbook quicker and with a smaller amount of code. In previous releases, users would need to use "document.getElementById" to get the host DIV element for the SpreadJS instance, similar to the following:
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
Now, users simply need to pass the name of the host element:
var spread = new GC.Spread.Sheets.Workbook("ss");
Getting Current Localization Resources
With the v13.2 release, we introduced a feature where users could customize the localization resources for SpreadJS with an API to set the custom resource.
However, there was no API to retrieve the current resource in an existing SpreadJS instance. In v14.2, we exposed the getResources API to obtain the current resources of the SpreadJS instance in order to customize it.
///* function static GC.Spread.Common.@CultureManager.getResources(cultureName?: string): object
/**
* Gets the specified or current working resources.
* @static
* @param {string | null} cultureName The culture name to get. If the cultureName is null, will return the current working resources.
* @returns {object} The specified or current working resources. Null if no language is defined.
*/
GC.Spread.Common.CultureManager.getResources(cultureName?: string);
You could use this API to get resources to then customize, like so:
spread.options.showResizeTip = GC.Spread.Sheets.ShowScrollTip.both;
var originResources = GC.Spread.Common.CultureManager.getResources("ja-jp"); // get the specific culture resources
originResources.Sheets.Tip_Width = "宽度： {0} 像素"; // change the culture based on the origin culture resources.
GC.Spread.Common.CultureManager.addCultureInfo("custom", null, originResources);
GC.Spread.Common.CultureManager.culture("custom");
Paste Formatting Enhancement
We have enhanced format pasting so that to provide users with a more Excel-like functionality. This feature now extends the pasted range, regardless of the range.
Change Sheet Index API
Users could always chance the sheet index could manually by clicking and dragging sheets in the UI. In v14.2, we added an API to programmatically reorder sheets:
/**
* Change sheet index and reorder sheets.
* @param {string} sheetName The sheet name.
* @param {number} targetIndex The target index.
* @example
* //This example show how to change sheet index.
* var spread = GC.Spread.Sheets.findControl(ss);
* spread.changeSheetIndex("Sheet1", 2);
*/
changeSheetIndex(sheetName: string, targetIndex: number): void {}
Using this API, you can (for example) move the first sheet to the last position in the workbook using:
spread.changeSheetIndex("sheet1", 2);
Clone Sheet API
In the past, copying sheets could be done in Designer UI, but we have added an API that enables developers to clone sheets in code.
///* field GC.Spread.Sheets.Commands.copySheet: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, targetIndex: number, newName: string, includeBindingSource?: boolean}): void}
/**
* Represents the command used to copy sheet.
* @param context The context of the operation.
* @param options The options of the operation.
* The arguments of the execute method are as follows.
* context {GC.Spread.Sheets.Workbook} The context of the operation.
* options {Object} The options of the operation.
* options.sheetName {string} The clone sheet name.
* options.targetIndex {number} The target index.
* options.newName {number} The new sheet name.
* options.includeBindingSource {boolean} Whether to bind data source to clone sheet
* @example
* //This example clones a sheet.
* spread.commandManager().execute({cmd: "copySheet", sheetName: "Sheet1", targetIndex: 3, newName: "Sheet1 (2)", includeBindingSource: true});
*/
Commands[COPY_SHEET] = {
canUndo: false,
execute: function (context: IWorkbook, options: IWorkSheetOption): boolean {
}
};
Chart Enhancements
Another customer-requested feature is adding line breaks to the chart labels. We originally added this feature in the v14 release to support line breaks in chart titles, X-axis labels, and X-axis titles.
However, we enhanced it to support line breaks in the Y-axis, as well as the chart legend.
New Framework Support
SpreadJS is excited to announce it now supports Vue 3 and Angular 12 JavaScript frameworks in v14.2. We also added support for using SpreadJS on iOS 14 devices. Try SpreadJS v14.2 out for yourself with a free 30-day trial.
Kevin Ashley