Apryse WebViewer

Class: SpreadsheetEditorManager

Core.SpreadsheetEditor. SpreadsheetEditorManager

A manager class that controls spreadsheet editing.

new SpreadsheetEditorManager()

Extends

  • EventHandler

Members

<static> Events

Properties:
Name Type Description
SELECTION_CHANGED string Core.SpreadsheetEditor.SpreadsheetEditorManager.selectionChanged
ACTIVE_SHEET_CHANGED string Core.SpreadsheetEditor.SpreadsheetEditorManager.activeSheetChanged
SHEET_CHANGED string Core.SpreadsheetEditor.SpreadsheetEditorManager.sheetChanged
SPREADSHEET_EDITOR_READY string Core.SpreadsheetEditor.SpreadsheetEditorManager.spreadsheetEditorReady
EDIT_MODE_CHANGED string Core.SpreadsheetEditor.SpreadsheetEditorManager.spreadsheetEditorEditModeChanged
SELECTED_RANGE_STYLE_CHANGED string Core.SpreadsheetEditor.SpreadsheetEditorManager.selectedRangeStyleChanged
FORMULA_BAR_SELECTION_CHANGED string Core.SpreadsheetEditor.SpreadsheetEditorManager.formulaBarSelectionChangedEvent
FORMULA_BAR_TEXT_CHANGED string Core.SpreadsheetEditor.SpreadsheetEditorManager.formulaBarTextChangedEvent
FORMULA_SEARCH string Core.SpreadsheetEditor.SpreadsheetEditorManager.formulaSearchEvent
FORMULA_HELP string Core.SpreadsheetEditor.SpreadsheetEditorManager.formulaHelpEvent

<static> SpreadsheetChangedActions

The different action types for the sheetChanged event.
Properties:
Name Type Description
CREATE_SHEET string When the sheetChanged event triggered due to creating a sheet
REMOVE_SHEET string When the sheetChanged event triggered due to removing a sheet
RENAME_SHEET string When the sheetChanged event triggered due to renaming a sheet
HIDE_SHEET string When the sheetChanged event triggered due to hiding a sheet
SHOW_SHEET string When the sheetChanged event triggered due to showing a sheet

Methods

getEditMode()

Retrieves the current edit mode status of the spreadsheet editor.
Returns:
The current edit mode.
Type
Core.SpreadsheetEditor.SpreadsheetEditorEditMode

getSelectedCellRange()

Retrieves the currently selected cell range in the spreadsheet editor.
Returns:
The currently selected cell range as a CellRange object.
Type
Core.SpreadsheetEditor.CellRange

getSelectedCells()

Retrieves the cells in an array from the currently selected CellRange.
Returns:
An array of Cell classes representing the cells in the selected range.
Type
Array.<Core.SpreadsheetEditor.Cell>
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
      const cells = spreadsheetEditorManager.getSelectedCells();
      console.log(cells);
    });
  });

getSpreadsheetEditorHistoryManager()

Returns the current SpreadsheetEditorHistoryManager instance in SpreadsheetEditorManager.
Returns:
The instance of SpreadsheetEditorHistoryManager managing history
Type
Core.SpreadsheetEditor.SpreadsheetEditorHistoryManager

setEditMode(mode)

Sets the current edit mode for the spreadsheet editor.
Parameters:
Name Type Description
mode Core.SpreadsheetEditor.SpreadsheetEditorEditMode The new edit mode
Returns:
Type
Promise.<void>
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
      await spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
    });
  });

setSelectedCellsStyle(styleObject)

Sets the style of the cells in the currently selected cell range in the Spreadsheet Editor.
Parameters:
Name Type Description
styleObject object The style object containing the style key and the value to be applied to the selected cell range.
Properties
Name Type Argument Description
verticalAlignment number <optional>
 The vertical alignment of the cell's content.
horizontalAlignment number <optional>
 The horizontal alignment of the cell's content.
font object <optional>
 The font object containing the font properties to be applied to the cell.
Properties
Name Type Argument Description
fontFace string <optional>
 The font name to be applied to the cell.
pointSize number <optional>
 The font size in points to be applied to the cell.
color string <optional>
 The font color to be applied to the cell.
bold boolean <optional>
 The bold style to be applied to the cell.
italic boolean <optional>
 The italic style to be applied to the cell.
underline boolean <optional>
 The underline style to be applied to the cell.
strikeout boolean <optional>
 The strikeout style to be applied to the cell.
formatString string <optional>
 The format string for the cell's content.
merge boolean <optional>
 Indicates whether the selected cell range should be merged or unmerged. If there is multiple styles being applied, the merge option will be executed at last after applying the other styles.
border Core.SpreadsheetEditor.Types.RangeBorderOptions <optional>
 The border option object. When this option is set, the other options being passed in will be ignored.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
      await spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
      const styleObject = {
        verticalAlignment: SpreadsheetEditor.Types.VerticalAlignment.CENTER,
        horizontalAlignment: SpreadsheetEditor.Types.HorizontalAlignment.CENTER,
        font: {
          fontFace: 'Arial',
          pointSize: 12,
          color: '#FF0000',
          bold: true,
          italic: false,
          underline: false,
          strikeout: false
        },
      };

      spreadsheetEditorManager.setSelectedCellsStyle(styleObject);
    });
  });

Type Definitions

FormulaInfo

Type:
  • Object
Properties:
Name Type Description
name string
description string
details string
parameters Array.<FormulaParameter>

FormulaParameter

Type:
  • Object
Properties:
Name Type Description
name string The parameter name.
detail string The parameter detail/description.

Events

activeSheetChanged

The event that fires when the current active sheet changed.
Parameters:
Name Type Description
activeSheetChangedEventObject object
Properties
Name Type Description
getSheetIndex function Returns the current active sheet index.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.ACTIVE_SHEET_CHANGED, (event) => {
      // console.log('Active sheet index', event.getSheetIndex());
    });
  });

formulaBarSelectionChangedEvent

The event that fires when a formula is selected
Parameters:
Name Type Description
formulaBarSelectionChangedEventObject object
Properties
Name Type Description
getSelectionPosition function Returns the new selection position (0-indexed).
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.FORMULA_BAR_SELECTION_CHANGED, (event) => {
      // console.log('Position', event.getSelectionPosition());
    });
  });

formulaBarTextChangedEvent

The event that fires when the formula bar text input is changed.
Parameters:
Name Type Description
formulaBarTextChangedEventObject object
Properties
Name Type Description
getInfo function Returns an object containing the formula name and details.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.FORMULA_BAR_TEXT_CHANGED, (event) => {
      // console.log('Info', event.getInfo());
    });
  });

formulaHelpEvent

The event that fires when the selection of a formula is confirmed
Parameters:
Name Type Description
formulaHelpEventObject object
Properties
Name Type Description
getFormulaInfo function Returns an object containing the formula name and description.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.FORMULA_HELP, (event) => {
      // console.log('Formula info', event.getFormulaInfo());
    });
  });

formulaSearchEvent

The event that fires when a search of formula is performed.
Parameters:
Name Type Description
formulaSearchEventObject object
Properties
Name Type Description
getFormulaInfoItems function Returns a list of formula info items matching the formula search query.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.FORMULA_SEARCH, (event) => {
      // console.log('Items', event.getFormulaInfoItems());
    });
  });

selectedRangeStyleChanged

The event that fires when the cell style of the selected range changed.
Parameters:
Name Type Description
styleObject object See Core.SpreadsheetEditor.SpreadsheetEditorManager#setSelectedCellsStyle for style object definition.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SELECTED_RANGE_STYLE_CHANGED, (event) => {
      // console.log('Style changed', event);
    });
  });

selectionChanged

The event that fires when the cell selection is changed in the editor.
Parameters:
Name Type Description
selectionChangedEventObject object
Properties
Name Type Description
getCellRange function Returns a CellRange object representing the selected cell(s).
getBoundingCells function Returns an array of one or two Cells representing the top-left and bottom-right corners of the selection.
getSelectionRangeDisplayValue function Returns a string representing the display value of the selected range (e.g. 'A1' or 'A1:B2').
isMerged function Returns true if the entire selected range consists of merged cells only. Returns false if the selection contains any unmerged cells or is a mix of merged and unmerged ranges.
getClipboard function Returns the SpreadsheetEditorClipboard object associated with the current editor instance.
Examples
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SELECTION_CHANGED, (event) => {
      // console.log('Cell range', event.getCellRange());
    });
  });
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SELECTION_CHANGED, (event) => {
      // console.log('Bounding cells', event.getBoundingCells());
    });
  });
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SELECTION_CHANGED, (event) => {
      // console.log('Selected range', event.getSelectionRangeDisplayValue());
    });
  });
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SELECTION_CHANGED, (event) => {
      // console.log('Is merged', event.isMerged());
    });
  });
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SELECTION_CHANGED, (event) => {
      const clipboard = event.getClipboard();
      if (clipboard.canCopy()) {
        clipboard.copy();
      }
    });
  });

sheetChanged

The event that fires when a sheet state changes. See Core.SpreadsheetEditor.SpreadsheetEditorManager#SpreadsheetChangedActions for supported actions.
Parameters:
Name Type Description
sheetChangedEventObject object
Properties
Name Type Description
getVisibleSheets function Returns the list of sheet information that are currently visible in the spreadsheet editor.
getActiveSheetIndex function Returns the current active sheet index.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SHEET_CHANGED, (event) => {
      const { SpreadsheetChangedActions}  = SpreadsheetEditor.SpreadsheetEditorManager;
      if (event.action === SpreadsheetChangedActions.CREATE_SHEET) {
        // console.log('Sheet name', event.sheetName);
        // console.log('Active sheet index', event.getActiveSheetIndex());
        // console.log('Visible sheets', event.getVisibleSheets());
      }
    });
  });

spreadsheetEditorEditModeChanged

The event that fires when the spreadsheet editor mode changed.
Parameters:
Name Type Description
mode Core.SpreadsheetEditor.SpreadsheetEditorEditMode The new edit mode after mode changes.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.EDIT_MODE_CHANGED, (mode) => {
      // console.log('Mode changed', mode);
    });
  });

spreadsheetEditorReady

The event that fires when the spreadsheet document is loaded and ready to be used.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
      await spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
    });
  });