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 Issue

      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;