Manage cell comments in Spreadsheet Editor

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features.

Web SDKPackage: Spreadsheet EditorLive demo

Spreadsheet Editor lets users add comments and threaded replies to specific spreadsheet cells. You can then collaborate with comments by asking questions, flagging issues, and replying right where the work is happening. This is useful when reviewing reports, checking calculations, or working on a forecast across teams.

Legacy notes are supported but are converted to the comment threads upon load. Saving will not retain legacy notes since they have already been converted.

A resolved comment thread with replies on a spreadsheet cell.

Manage comments via API

This section covers the APIs for working with cell comments and replies. You create, change, and delete comments through the CommentManager class. Each comment is returned as a read-only SpreadsheetComment object.

Get the comment manager

Use the SpreadsheetEditorManager.getCommentManager API to get the comment manager. The CommentManager class contains all APIs needed to get, create, edit, resolve, and delete comments and replies. The following code sample gets the comment manager once the editor is ready.

JavaScript

WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      const commentManager = spreadsheetEditorManager.getCommentManager();
      console.log(commentManager);
    });
  });

Get comments

Use the CommentManager.getComments API to retrieve all comments in a workbook. Each comment is a read-only SpreadsheetComment object that contains the comment's message, cell address, state, author, and replies. The following code sample counts the comments in the workbook and logs the details of the first one.

JavaScript

WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      const commentManager = spreadsheetEditorManager.getCommentManager();
      const comments = commentManager.getComments();
      console.log(`Found ${comments.length} comment(s)`);
      
      const comment = comments[0];
      if (comment) {
        console.log(comment);
        console.log(comment.getId());
        console.log(comment.getMessage());
        console.log(comment.getCellAddress());
        console.log(comment.getState());
        console.log(comment.getReplies());
      }
    });
  });

Add comments or replies

Info: Edit mode must be enabled.

Use the CommentManager.addComment or CommentManager.addReply APIs to create a new comment or reply, respectively.

JavaScript

WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      const commentManager = spreadsheetEditorManager.getCommentManager();
      const author = 'Guest';

      // Add a comment to cell A1.
      const comment = commentManager.addComment('This is a comment.', {
        sheetName: 'Sheet1',
        cellString: 'A1',
        author: author,
      });

      // Add a reply to the newly created comment.
      const replyMessage = 'LGTM!';
      const replyAuthor = 'Reviewer';
      commentManager.addReply(comment.getId(), replyMessage, replyAuthor);
    });
  });

Edit comments or replies

Info: Edit mode must be enabled.

Use the CommentManager.setCommentMessage API to update a comment or reply message.

JavaScript

WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      const commentManager = spreadsheetEditorManager.getCommentManager();
      const comment = commentManager.getComments()[0];
      if (comment) {
        const updatedComment = commentManager.setCommentMessage(comment.getId(), 'Updated comment text.');
        console.log(updatedComment.getMessage());
      }
    });
  });

Resolve comments

Info: Edit mode must be enabled.

Use the CommentManager.setCommentState API to resolve or re-open comment threads. Available options are under the SpreadsheetCommentState enum.

Adding replies or editing a resolved comment will automatically change the state back to OPEN.

JavaScript

WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      const commentManager = spreadsheetEditorManager.getCommentManager();
      const comment = commentManager.getComments()[0];
      if (comment) {
        commentManager.setCommentState(
          comment.getId(),
          SpreadsheetEditor.SpreadsheetCommentState.RESOLVED
        );
      }
    });
  });

Delete comments or replies

Info: Edit mode must be enabled.

Use the CommentManager.deleteComment API to delete a comment or reply. Deleting a comment will also delete its replies. Deleting a reply will not delete its parent comment or sibling replies. The following code sample deletes the first comment in the workbook.

JavaScript

WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      const commentManager = spreadsheetEditorManager.getCommentManager();
      const comment = commentManager.getComments()[0];
      if (comment) {
        commentManager.deleteComment(comment.getId());
      }
    });
  });