JavaScript is one of the scripting languages that Boomi uses within the platform. The most common place to use JavaScript within Boomi is in a map shape. Writing in JavaScript allows a developer to write code that is faster to execute than Groovy. Yet, the downside of using JavaScript is that it does not have access to any of the Java libraries that Groovy has access to. When writing JavaScript code within Boomi the logic usually will not be too complex and is just a series of if/else statements. If you need to test those scripts, then usually any online JavaScipt tester can work incredibly well. This article gets a little geekier and goes further, because sometimes the logic is more complicated or maybe you just prefer to have an IDE installed locally to code.

The setup outlined within this article will have you install VS Code, which is a code editor. We will install three extensions that will make VS Code more of an IDE environment where JavaScript can be ran. We will use one extension to run the code, one to analyze our code (a linter), and a third to format our code. The extension that will be installed to analyze our code will be a linter. Boomi’s JavaScript runtime supports ECMAScript 5.1 (ES5), but there are also newer versions. When using an online JavaScript tester, it allows you to write and debug code with ECMAScript 6 (ES6) methods, but unfortunately, they sometimes will cause errors within Boomi because they fall outside of ES5 specifications. The linter will help with writing JavaScript code within the ES5 version. There are also other options which you can convert ES6 to ES5, but I like starting off in ES5 instead of converting it later.

Getting Started – Install VS Code

First VS Code needs to be installed. After it is installed, open VS Code, and open Extensions (side bar, View->Extensions, or Control + Shift + X on windows).

Figure 1. Extensions location in VS Code.

Install Code Runner

Next install Code Runner through extensions. Code Runner will allow for the JavaScript code to run within VS Code and the results printed to the Output console.

Install Node.js

Next install Node.js. This takes awhile, so feel free to make some tea. Node.js is the program that will be used to run the JavaScript code. When it’s complete, restart your computer.

Install ESLint and Prettier

The JavaScript engine that Boomi supports is ECMAScript version 5.1, or also know as ES5. To help make sure we are writing our code in ES5, we are going to install a linter, which will help analyze your code. There are some methods, like includes(), which is supported is ES6, but not in ES5. So, if you are looking at Stack Overflow for how to do something, it might be slightly confusing why a method does not work in Boomi. ESLint will help determine if the code that is being written in VS Code will work within Boomi. ESLint will inform you if there are any methods that are not supported by ES5. Additionally, we are going to install Prettier, which is to help clean the code up and make it easier to read. Prettier isn’t required, but it does make coding easier.

Install ESLint and Prettier within VS Code Extensions

Create a folder to keep everything in. I created C:\VS Code\boomi. The root folder needs to be URL safe (boomi in this example). VERY IMPORTANT: Everything that is being setup is to only run JavaScript files that are within this folder. So, when you are testing JavaScript code, all of the files must be in this folder. The packages do not need to be re-installed, but the config files are local to the directory.

Open up the boomi folder within VS Code (File->Open Folder)

Within VS Code, open a terminal. For me, PowerShell was set by default. I switched to the Command Prompt to run all of these commands below. To do that, click on View->Terminal, and it will open a window on the bottom left. If the drop down at the top of the Terminal window does not read cmd, then click the drop down and Select Default Shell, and then select Command Prompt. Finally, click the plus next to the terminal drop down to open a new session. Type the commands below.

This command will create an empty project file, package.json. npm (Node Package Manager) gets installed with Node.js

npm init -y

Install packages

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node eslint-plugin-es5

• eslint - The linter that we will use.
• prettier - A code formatter.
• eslint-config-prettier - This package allows prettier and eslint to work well together by turning of specific rules.
• eslint-plugin-es5 - The package that allow JavaScript linted with ES5.

Prettier config file

To override Prettier’s defaults, create a file called .prettierrc within the boomi folder, and copy and paste what is below into the file. This will default to single quotes instead of double quote and will make the line length to 100 characters, which is my preference. You do not need to create or include these options, but are possible options to consider. Additional options can be found here: Prettier Options.

{
    "printWidth": 100,
    "singleQuote": true
}

ESLint config file

Create a config file within the boomi folder by executing the following code in the command prompt.

eslint --init

It will ask the following questions and select the subsequent answers.

• How would you like to use ESLing: To check syntax and find problems
• What type of modules does your project use? CommonJS
• Which framework does your project use? None of these
• Where does your code run? Browser and Node
• What format do you want your config file to be in? JSON

The questions ultimately do not matter because you will be updating the config file with the json below.

Update the contents of .eslintrc.json file

Within the boomi folder, open the .eslintrc.json file and copy and paste what is below into the file, and click save.

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:es5/no-es2015",
        "prettier"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": [
        "es5",
        "prettier"
    ],
    "rules": {
        "es5/no-arrow-functions": "error"
    }
}

Format on Save

It can be helpful to have VS Code automatically format your code on save. If you are missing a semi-colon at the end of a line, or the spacing is off, it will automatically be corrected when you save the file. Go to Settings (File->Preferences->Settings) and search for Format on Save and check the check box to be checked. Next search for Default Formatter and select esbenp.prettier-vscode.

Figure 2. Format on Save

Figure 3. Default Formatter

Simulate Boomi in VS Code

Since JavaScript does not have access to the Java classes on the atom, JavaScript will often be more useful when used within the map shape than within the data process shape. To get started, create a .js file. Write your code it in, save it, and press Control + Alt + N, or click play in the top right, to run Code Runner. It will write the errors and results to the console.

Declare variables that would normally be set as the input and output variables:

var my_example_variable = 12;

Write to console to see what the output value would be:

console.log(my_example_variable);

Article originally posted at Boomi Community.