Improving long formula editing in SpreadJS with the Formula Editor Panel

Working with long or complex formulas can quickly become challenging when using only a narrow, single-line formula bar. To make formula editing clearer and more efficient, SpreadJS offers a more powerful and user-friendly solution: the Formula Editor Panel. This feature expands formula visibility, improves readability, and provides a smoother editing experience overall.

How It Works

The Formula Editor Panel is provided as a SpreadJS plugin, which requires the following:

1. Including the gc.spread.sheets.formulapanel.x.x.x.min.js script file in your project.

2. Creating an instance of FormulaEditor.

3. Binding it to your Workbook using the attach() method so both stay synchronized.

Below is a complete code snippet demonstrating how to initialize the workbook, set up the Formula Editor Panel, and bind them together.

let workbook = new GC.Spread.Sheets.Workbook("spread-host");
let formulaEditor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor("formula-editor-host");
formulaEditor.options.formatWidthLimit = -1;
formulaEditor.options.tabSize = 4;
formulaEditor.attach(workbook);
......
<!--DOM element-->
<div id="spread-host" style="width:100%; height:250px;border: 1px solid gray;"></div>
<div id="formula-editor-host" style="width:100%; height:300px;border: 1px solid gray;"></div>

By including the plugin script and attaching the editor to your workbook, you can immediately improve the way users work with formulas in your SpreadJS application. For more information, visit the section of the SpreadJS documentation dedicated to the Formula Editor Panel.