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 a function description.
    • Check the box to include 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 the limit of execution time in milliseconds.
    • Enter the limit of execution memory in megabytes. 
    • 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.

      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;