General
When properties are configured, or values set in actions of a workflow conditions can be created with scripts. To create scripts a JavaScript Editor is used. The JavaScript Editor is based on the Monaco editor that is used by Visual Studio Code. Currently it’s used when editing JavaScript in properties, document settings, most of the workflow actions and certain email scripts with the goal of replacing all the text editors used in Integrator.
Note: Be aware, object names are case sensitive! See Appendix and “Script Editor Object class definitions” for more information of objects and properties for each of the class objects or properties listed below.
Its features are quite extensive and allow us to customize the editor to a much higher degree than before.
The most significant being that it can mostly keep track of what type variables and objects are which allows for much better autocompletion/IntelliSense that is filtered on what type of object you’re trying to manipulate.
Note: a limitation to the autocompletion is that it loses its types if you’re inside a function because of the limitations in the JavaScript language.
How to use Autocompletion
Suggestions will pop-up automatically as you type but it’s also possible to trigger it manually by pressing ctrl+space.
With all of the suggestions you get a detailed overview of the item on the right side along with what data it requires and returns.
There is also autocompletion of the various properties that has been configured with it’s own detailed view describing the various settings of the property like max length, default value, what source property it’s mapped to and so on to give an easier overview of how its setup.
JavaScript Editor Toolbar
In the upper right corner of the editor a toolbar i located. It contains common functions of the editor for those unfamiliar with Monaco/VSCode.
From left to right these buttons are “Find”, “Find and Replace”, “Toggle Comments” and “Format Code”.
Find
Find is simple enough, it finds text within the script. It has some settings on right of the text denoted by “Ab”, “ab”, and “.*”. In order these are “Match Case”, “Match Word” and “Regular Expression”.
- Match Case, is used to match only if upper/lower case also matches with the search text.
- Match Word, matches only on complete words. Ex. A search for “component” wouldn’t match the word “components”.
- Regular Expression, is used to find via the use of regular expressions. This is far too involved to explain here but basically, it’s a complex search via patterns.
Find and Replace
is the same as find except that you replace whatever you found with a new text.
The two buttons next to the bottom text field are in order replace one and replace all. Where replace one, replaces the first instance of the found text and replace all, replaces all occurrences of the text in the script.
Toggle Comments
comments out or returns the selected code to normal.
Format Code
formats either the selected code or the whole document if nothing is selected to the JavaScript standard, within reason.
Settings/Full Screen
On the top right next to the X button there is a cog for settings and a square for activating full screen mode.
In the settings there are the options for switching the theme of the editor and a toggle to show symbols for whitespace in the script instead of blank. These settings are saved in the browser.
Test/Save/Close buttons
Lower right in the editor are the test and various save/close buttons. The Save/Close buttons do what they indicate. The Test button runs the script using a randomly generated data set and may not always be available depending on what type of editor it is.
Script Library
On the right side of the editor there’s a Library button that when hovered over will pop-out the new script library. This contains a default set of helpful functions and examples of how to write scripts. When hovering over any button a small description of the function is displayed.
On the bottom of the settings menu there’s now a Script header that contains the page for managing the library.
The script library comes with a set of standard items but also allows for adding new ones to facilitate users to maintain their own libraries with code they wish to reuse. In this spirit there’s also an Export/Import feature which allows users to transfer their script libraries between servers.
A library item contains various settings which are:
- Name, The name of the script displayed on the button, also required to be unique as it’s used as the key for when exporting/importing scripts to see if scripts should be replaced or not.
- Category, The group under which the item is in the library in the editor. You can either use an existing category or type in a new one.
- Types, For which editors should the script be available to. If none is specified, then it’s valid for all the different types of editors.
- Language, What programming language is the script for. Currently only JavaScript supported with more coming.
- Version, Used for importing to see if a script should be replaced or not when importing scripts with the same name.
- Description, The description shown when hovering over the button in the editor.
- Script, The actual script that’s pasted into the editor when pressing the button.
Note: when creating new scripts, make the name unique to prevent it from being overwritten in the future by updates since more standard scripts will be added over time. For example, put the customer’s name or your initials in the script name to prevent this.