Tips and cases of use for a successful WordPress website with calculated forms.
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:
The editor includes three main sections:
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:
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:
The operations' categories, with the list of the operations' modules, corresponding to the version of the plugin installed in the user's website:
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:
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:
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 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:
