Calculated Fields Form Blog

Tips and cases of use for a successful WordPress website with calculated forms.

Blog / Advanced Equations Editor

Advanced Equations Editor

Equations editor with line numbers to identify easier the code that is being edited, with color highlighting for the reserved words, code completion, auto-closing for parentheses, curly and the square brackets, and with errors detection.

The "Calculated Fields Form" plugin includes a textarea in the settings of calculated fields, to define the equations associated to these fields. The textarea control might be enough for simple equations like mathematical operations, or any other equation with few lines of code. However for complex equations with multiple lines of code, including conditional statements, declaration of variables, etc. the process can become in a really pain, and the textarea would inadequate.

Furthermore, the users that implement complex equations are usually (but not necessarily) web developers accustomed to more advanced editors with syntax highlighting, errors detection, code documentation and more.

To satisfies even to the most demanding public, we have decided to implement the "Advanced Equations Editor" (we have called Fx Editor). The "Advanced Equations Editor" is based in the Monaco editor, and has been implemented to recognize javascript code (the programming language supported by the browsers and used to implement the equations). Applies colors to the reserved words, underlines in red the errors in code. Furthermore, the editor includes a sidebar with the list of fields and operations, as well as details of the fields and the operations' documentation.

For accessing to the advanced equations editor press the "ADVANCED EQUATION'S EDITOR" button below the textarea in the settings of calculated fields:

Advanced Equation Editor Button

The interface of the Advanced Equations Editor

Advanced Equation Editor

The editor includes three main sections:

The top bar

It includes the undo and redo buttons, three color icons to modify the layout's colors of editor (High contrast, Dark or Light), and the button for closing the editor:

Top Bar

The sidebar


It includes the list of fields in the form. To insert the field in the equation, select it from the list, and then press the "Insert Field" button. The field's name will be inserted in the cursor position. Furthermore, when selecting a field, the editor will show additional details:

Fields list and details

The operations' categories, with the list of the operations' modules, corresponding to the version of the plugin installed in the user's website:

Categories List

The list of operations corresponding to the module selected. For inserting an operation in the equation, selects it from the list, and then press the "Insert Operation" button. The operation would be inserted in the cursor position. Furthermore, selecting an operation, the editor will show additional information about it:

Operations List

Pressing the blue arrow, the section with the operation's description is unlinked from the sidebar, to be moved over the editor, making the information more accessible:

Documentation Popup

The documentation's pop-up includes a handle to be moved to the preferred location, and an arrow icon for linking again the documentation to the sidebar.

The editor area

The editor area is where the magic happens. It shown the equation received from the form, and allows to edit it. The editor offers to the developer many interesting features, like:

  • Lines number. Allows to identify easier the code that is being edited.
  • Color highlighting. The javascript reserved words are highlighted using different colors.
  • Code completion.
  • Auto-close the parentheses, curly and the square brackets. Errors detection.

Lines number and color coding

Code errors

Code completion