The formula editor provides an advanced editing environment for creating, editing, and understanding formulas. Its core features include:
Syntax Highlighting: Enhances readability and usability by marking up different syntax elements in the formula.
Formatter: Automatically adjusts the formula indentation, spacing, line breaks, etc. to make the formula more readable and maintainable.
IntelliSense: Provides formula auto-completion, function parameter hints, etc. to improve efficiency of writing formulas.
Lint: Performs syntax and error checking on the formula to reduce errors and vulnerabilities, and provides error prompts.
Theme: Provides multiple Themes and allows customizing Themes to change the appearance of the editor.
Example
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-formula-panel';
import './styles.css';
export function AppFunc() {
let initSpread = function (spread) {
initData(spread);
let editor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor(document.querySelector('.editor-container'));
editor.attach(spread);
document.querySelector('.format-width-limit').addEventListener('change', (e) => {
let value = e.target.value;
editor.options.formatWidthLimit = value === 'auto' ? value : parseInt(value);
editor.format();
});
document.querySelector('.panel-width').addEventListener('change', (e) => {
let v = +e.target.value;
v = Math.max(30, Math.min(90, v));
document.querySelector('.formula-panel').style.width = v + "%";
document.querySelector('.spread-container').style.width = 100 - v + "%";
spread.refresh();
editor.refresh();
editor.format();
});
document.querySelector('.format').addEventListener('click', (e) => {
editor.format();
});
document.querySelector('.save').addEventListener('click', (e) => {
editor.commandManager().execute({ cmd: 'commitContentToActiveCell' })
});
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<div class='spread-container'>
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div class="formula-panel">
<div class="buttons">
<label>Format Width Limit:</label>
<select class="format-width-limit">
<option value="auto">Auto</option>
<option value="-1">-1</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
<option value="999">999</option>
</select>
<label class="panel-width-label">Panel Width:<input class="panel-width" type="number" min="30" max="90" defaultValue={36} /></label>
<button class="format">Format</button>
<button class="save">Save</button>
</div>
<div class="editor-container"></div>
</div>
</div>
</div>);
}
function initData (spread) {
spread.suspendPaint();
spread.options.allowDynamicArray = true;
var sheet = spread.sheets[0];
sheet.setValue(0, 0, 'Grade');
sheet.setValue(0, 6, 72);
sheet.setFormula(0, 1, '=LET(score, G1, IF(score >= 90, "A", IF(score >= 80, "B", IF(score >= 70, "C", IF(score >= 60, "D", "F")))))');
sheet.setValue(1, 0, 'Most Frequent');
sheet.setArray(1, 6, [[1, 2, 6, 6, 6, 5]]);
sheet.setFormula(1, 1, '=LET(data, G2:L2, unique_data, UNIQUE(data), count_data, COUNTIF(data, unique_data), max_count, MAX(count_data), most_frequent, INDEX(unique_data, MATCH(max_count, count_data, 0)), IF(max_count > 1, most_frequent, ""))');
sheet.setValue(2, 0, 'GUID');
sheet.setFormula(2, 1, '=CONCATENATE(DEC2HEX(RANDBETWEEN(0, 4294967295), 8), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), "-", DEC2HEX(RANDBETWEEN(16384, 20479), 4), "-", DEC2HEX(RANDBETWEEN(32768, 49151), 4), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), DEC2HEX(RANDBETWEEN(0, 4294967295), 8))');
sheet.setActiveCell(0, 1);
sheet.setColumnWidth(0, 100);
spread.resumePaint();
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-formula-panel';
import './styles.css';
const Component = React.Component;
export class App extends Component {
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<div className='spread-container'>
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div class="formula-panel">
<div class="buttons">
<label>Format Width Limit:</label>
<select class="format-width-limit">
<option value="auto">Auto</option>
<option value="-1">-1</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
<option value="999">999</option>
</select>
<label class="panel-width-label">Panel Width:<input class="panel-width" type="number" min="30" max="90" defaultValue={36} /></label>
<button class="format">Format</button>
<button class="save">Save</button>
</div>
<div class="editor-container"></div>
</div>
</div>
</div>;
}
initSpread(spread) {
initData(spread);
let editor = new GC.Spread.Sheets.FormulaPanel.FormulaEditor(document.querySelector('.editor-container'));
editor.attach(spread);
document.querySelector('.format-width-limit').addEventListener('change', (e) => {
let value = e.target.value;
editor.options.formatWidthLimit = value === 'auto' ? value : parseInt(value);
editor.format();
});
document.querySelector('.panel-width').addEventListener('change', (e) => {
let v = +e.target.value;
v = Math.max(30, Math.min(90, v));
document.querySelector('.formula-panel').style.width = v + "%";
document.querySelector('.spread-container').style.width = 100 - v + "%";
spread.refresh();
editor.refresh();
editor.format();
});
document.querySelector('.format').addEventListener('click', (e) => {
editor.format();
});
document.querySelector('.save').addEventListener('click', (e) => {
editor.commandManager().execute({ cmd: 'commitContentToActiveCell' })
});
}
}
function initData(spread) {
spread.suspendPaint();
spread.options.allowDynamicArray = true;
var sheet = spread.sheets[0];
sheet.setValue(0, 0, 'Grade');
sheet.setValue(0, 6, 72);
sheet.setFormula(0, 1, '=LET(score, G1, IF(score >= 90, "A", IF(score >= 80, "B", IF(score >= 70, "C", IF(score >= 60, "D", "F")))))');
sheet.setValue(1, 0, 'Most Frequent');
sheet.setArray(1, 6, [[1, 2, 6, 6, 6, 5]]);
sheet.setFormula(1, 1, '=LET(data, G2:L2, unique_data, UNIQUE(data), count_data, COUNTIF(data, unique_data), max_count, MAX(count_data), most_frequent, INDEX(unique_data, MATCH(max_count, count_data, 0)), IF(max_count > 1, most_frequent, ""))');
sheet.setValue(2, 0, 'GUID');
sheet.setFormula(2, 1, '=CONCATENATE(DEC2HEX(RANDBETWEEN(0, 4294967295), 8), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), "-", DEC2HEX(RANDBETWEEN(16384, 20479), 4), "-", DEC2HEX(RANDBETWEEN(32768, 49151), 4), "-", DEC2HEX(RANDBETWEEN(0, 65535), 4), DEC2HEX(RANDBETWEEN(0, 4294967295), 8))');
sheet.setActiveCell(0, 1);
sheet.setColumnWidth(0, 100);
spread.resumePaint();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
body {
position: absolute;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.sample-spreadsheets {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
overflow: hidden;
}
.sample-tutorial {
height: 100%;
}
.spread-container {
width: 64%;
height: 100%;
vertical-align: top;
}
.formula-panel {
width: 36%;
height: 100%;
display: flex;
flex-direction: column;
}
.formula-panel .buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-right: 125px;
position: relative;
border-bottom: 1px solid black;
height: 22px;
}
.panel-width-label {
position: absolute;
right: 0px;
}
.panel-width {
width: 40px;
}
.formula-panel .editor-container {
height: calc(100% - 22px);
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
