Cell Comments

SpreadJS enables rich customization for cell comments, visual styling , layout adjustments, and interactive behaviors. Features like text formatting, box and indicator icon customization, and display modes further enhance usability, empowering developers to tailor comment appearance and interactions precisely to application needs.

Create and Customize Comments

Add a comment to a specific cell by invoking the add method.

// create a comment to cell(5,5)
var comment = activeSheet.comments.add(5,5,"new comment!");

You can customize comment styling through the comment class, enabling granular control over visual presentation.

Below is a simple example demonstrating basic style configurations for the box and text of the existing comment.

// set the style of comment

// box customization
comment.backColor("#ff0000");
comment.borderColor("rgb(46, 119, 183)");
comment.borderStyle("dashed");
comment.borderWidth(4);

// text formatting
comment.fontSize("11pt");
comment.fontStyle("italic");
comment.fontWeight("bold");
comment.foreColor("#e7e6e6");
comment.horizontalAlign(1);
comment.textDecoration(1);

Set Backcolor

SpreadJS offers five input methods for setting cell comment backcolor, providing flexibility and precision in customization:

1. RGB (Hex) – Use a hexadecimal code, such as #FF0000 for Red, to define the exact color you want.

2. RGB (Numeric) – Specify the color using RGB values, like RGB(255, 0, 0) for Red, which is useful for developers familiar with the RGB color model.

3. Predefined Color Names – Select from a fixed set of named colors, which simplifies the process for users who prefer not to work with codes.

4. Theme Colors – Utilize colors tied to the current document theme, like Background 1, to ensure consistency with the overall document design.

5. System Theme Names – Named color from Excel 2019 to ensure seamless compatibility with Excel. Currently, two predefined system theme names are supported: SJS_infoBackground and SJS_window.

   1. SJS_infoBackground: Defaults to #FFFFE1, matching Excel’s infoBackground [80].

   2. SJS_window: Defaults to #FFFFFF, matching Excel’s window [65].

type=note

Note:

Due to the frontend's inability to directly call Excel's system color API, SpreadJS has preset these two color values based on Excel 2019's public color specifications. If the default colors do not match the target scenarios, you can customize the color values of SJS_infoBackground and SJS_window.

This example defines the color represented by SJS_infoBackground and updates the backColor of existing comment box.

// Custom color definition
var infoBkStyle = new GC.Spread.Sheets.Style();
infoBkStyle.name = 'SJS_infoBackground';
infoBkStyle.backColor = '#FFFFE1';

// Add to spread's named style collection.
spread.addNamedStyle(infoBkStyle);

// Set the comment background color
comment.backColor("SJS_infoBackground");

Select Display Mode

The displayMode method of SpreadJS cell comments supports two configuration modes:

​​1. alwaysShown - Comments are permanently displayed adjacent to their target cells.

​​2. hoverShown - Comments appear only when hovering over the cell's indicator icon.

This allows developers to choose between persistent annotations or context-sensitive popups based on interaction requirements.

comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown);

comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.hoverShown);

Customize Indicator Icon

The initialization of a comment will automatically insert a small red triangular icon at the top-right corner of its target cell. You can change the color and size of the comment indicator icon by using the indicatorColor and indicatorSize methods.

Now, let's modify the previous example by enlarging the icon and changing its color to green.

comment.indicatorColor("green");
comment.indicatorSize(15);

Resize/Move/Edit Comments

You can directly resize, move, or edit the comment.

type=note

Note:

Gets or sets the state of the comment through commentState.

The following image displays the resize and move indicator icons. The resize icons are displayed when you select the comment. The move icon is displayed when the pointer is over the comment border.

Resize the comment.

Move the comment.

Edit the comment.

Lock Comments

You can lock the comment events or the comment text if the sheet options isProtected is set to true. The following table displays the comment property values and the result if the sheet is protected.

Dynamic Comment Resizing and Repositioning

Resizing a row or column can cause the comment's location and size to change based on the settings for the dynamicMove and dynamicSize methods. The following table displays the result of the dynamicMove and dynamicSize settings.

Other Tips

You can cut, copy, or paste text in the comment if the comment is in edit mode. The comment is copied with the cell if you copy the cell.

The undo and redo actions apply if you cut, copy, or paste comment text, resize or move the comment, or change the comment's format.

There are some limitations when importing a comment from an Excel-formatted file.

• Some border styles and fonts are not imported.

• The comment location may be different if the sheet range is smaller than what is displayed in the original file.

• Comments are imported from XLSX files.