Custom JavaScript Functions

Create custom JavaScript to use as a function in Flow_Studio.

To create a JavaScript function:

  1. Click the heading titled JavaScript function on the Administration overview page.
  2. Click Create new JavaScript function.



  3. Fill in the configuration form:

    • Enter a function name.
    • Enter the function type:
      • JavaScript (ECMAScript 2020)
        • This type supports the most modern JavaScript language features.

        • This type supports a list of primitives as an output type. E.g., addOutput("output", [1,2,3,4,5,6]);

      • JavaScript (ES 5.1)
      • JavaScript (ES 5.1) with D3
        • D3 (Data-Driven Documents) is a JavaScript library that allows for creating visual representations from data in standard web browsers.
        • D3 library version 3.5.17

          Example JS code for creating an SVG function:

          var svgContainer = createSvgContainer();
          var svg = createSvg(svgContainer);
          // ... implementation of filling svg via D3 library
          addOutput("result_field_svg", svgContainer.html());
    • Enter a function description.
    • Enter the limit of execution time in milliseconds. (Not supported with D3)
    • Enter the limit of execution memory in megabytes. (Not supported with D3)
    • Enter an input argument name and select a data type.
      • Add additional input arguments. (Optional)
    • Enter an output argument and select a data type.
      • Add additional output arguments. (Optional)
    • Enter the JavaScript function.

      • Append output fields - Appends lines (e.g., addOutput('a', a);) for all output arguments that don’t exist in JavaScript code.
      • Detect output fields - Adds string fields to the output arguments if they do not already exist.

      Known Issues

      1) Automation Hero strongly recommends not declaring a variable in JavaScript without using a keyword because these global variables can interfere with the next function execution. Hero_Flow is not designed to manage these persistent values in a predictable way. Any users depending on these values may see them disappear unexpectedly when something else affects the execution environment and resets the state. Users should always define local variables with var/let/const.

      2) Single quotes around multi-line strings do not produce the expected result.

      Below is a work around solution for this issue using an XML function.

      var jsonObj = {"Flag":Flag, "Count":Count};
      var jsonOutput = JSON.stringify(jsonObj);
      var xmlOutput = eval("OBJtoXML("+jsonOutput+");")
      addOutput("XMLOut", xmlOutput);
      function OBJtoXML(obj) {
        var xml = '';
        for (var prop in obj) {
          xml += obj[prop] instanceof Array ? '' : "<" + prop + ">";
          if (obj[prop] instanceof Array) {
            for (var array in obj[prop]) {
              xml += "<" + prop + ">";
              xml += OBJtoXML(new Object(obj[prop][array]));
              xml += "</" + prop + ">";
            }
          } else if (typeof obj[prop] == "object") {
            xml += OBJtoXML(new Object(obj[prop]));
          } else {
            xml += obj[prop];
          }
          xml += obj[prop] instanceof Array ? '' : "</" + prop + ">";
        }
        var xml = xml.replace(/<\/?[0-9]{1,}>/g, '');
        return xml
      }


  4. Click OK.

Using JavaScript functions is a great way to add custom functions right into Hero_Flow:

Examples: 

  • Build SVG charts using D3.

  • Refine a string field with regular expressions.

  • Parse special text inputs (like irregular JSONS produced by TEXT parser).

List Data Type Values

All Hero_Flow supported data types are available for use in come JavaScript functions including the list data type. However the Tuple data type can be used only as a part of a list.

When designing a custom function that used a list, a designer could access it like below:

var list = ...
var firstElement = list[0];
var secondElement = list[1];

Example using the list data type:

var result = 0;
for (var i in inputList) {
  result = result + inputList[i];
}
addOutput("result", result);

Example using a list that contains a tuple data type:

var result = 0;
for (var i in inputListWithTuples) {
  var tuple = inputListWithTuples[i];
  result += tuple.right + tuple.left;
}
addOutput("result", result);

So values in a tuple can be access like it is a map. The tuples in the previous list have the structure as follows:

{
 "left": 23,
 "right": 42
}

If the structure is more nested, the dot operator can be applied multiple times:

{
 "left": 23,
 "middle":
  {
    "element1":
     {
      "upper": 7
     },
    "element2":
     {
      "lower": 81
     }
  }
}

Accessing "lower" would be like tuple.middle.element2.lower;