FormulaEditor
A monospace field for writing formulas and rules, with a toolbar that inserts fields, operators and functions and checks the syntax.
Master
Switch size and label position. Insert a field, operator or function, then Check syntax or Calculate. The editor is live.
Runs when the invoice is created.
Usage
Use FormulaEditor for calculated fields, rules and validations. It is one form field: pass label, hint, error and help as props, same as Input, and it takes labelPosition from an enclosing Form. The toolbar inserts at the cursor. fields adds an Insert field menu that inserts {!Field.Id}; functions replaces the default function list. Check syntax runs onCheckSyntax, or a built-in bracket and quote check. onCalculate adds a Calculate button that shows its result under the field. See contracts/formulaeditor.json for the full contract. A label set at the start goes back on top of the field when the box around it is narrower than 554px, since a 234px label column would leave too little of the field to type in.
Do's
- Calculated fields, pricing rules and validation rules.
- Any expression people build from fields, operators and functions.
Don'ts
- Do not invent CodeEditor, ExpressionInput, a formula toolbar or a Textarea with buttons above it.
- Do not use for prose or notes. Use Textarea.
- Do not use for one-line values. Use Input.
- Do not put page actions like Save in the toolbar. They belong in the Form actions.
- Do not use raw hex.
<FormulaEditor
label="Discount formula"
labelPosition="top"
size="sm"
defaultValue="{!Amount} * (1 - {!Account.Discount})"
fields={[
{ id: "Amount", label: "Amount" },
{ id: "Account.Discount", label: "Account discount" },
{ id: "Invoice.Quantity", label: "Quantity" },
]}
onCalculate={calculate}
hint="Runs when the invoice is created."
/>