Generic JavaScript View (JavaScript)

Executes JavaScript code to generate a view. The code in the script editor is executed when displayed in the view (right-click -> Interactive View) or in the KNIME server web portal.

Within the java script code block you have access to the input table and can use a set of predefined libraries to generate the view.

Additionally you can export a static image to the workflow, if the view is generated as an SVG structure.

The node supports custom CSS styling. You can simply put CSS rules into a single string and set it as a flow variable 'customCSS' in the node configuration dialog.
The style rules defined in such a way will override the style rules set in the node's dialog.
You will find the list of available classes and their description on our documentation page.

Options

JavaScript View

Maximum number of rows

If a data table is connected at the input port a knimeDataTable object is automatically created and populated. Use this setting to limit the number of rows extracted.

Create template

All node settings can be stored as a template, which will be available over the 'Templates' tab. See the tab description for more information.

Sanitize input data

Sanitizes the input table and available flow variables using a default policy defined by OWASP.

Set this option if the script assumes that the input table and used flow variables should be treated as strings or safe HTML strings.

Flow Variables

The list contains the flow variables that are currently available at the node input. Double clicking any of the entries will insert the respective identifier at the current cursor position in the JavaScript editor.

Flow variable identifiers are replaced literally by their content during view generation. In particular, this means that a string flow variable has to be wrapped in "" to use it as a string in JavaScript, but a flow variable containing a JSON string can be used without the need to parse the string in JavaScript.

Dependencies

Choose from the list of available JavaScript library dependencies. Any entries selected here are available at runtime of the view. Note that this list will be expanded in the future.

CSS

Enter optional CSS instructions for styling the view.

Example

Change the standard font used for rendering for the whole document:

html, body {font-family: sans-serif;}

If this node is used to also generate an image, style rules defined here need to be present in the svg as well. You can use a utility script in the image generation JavaScript to do so: 

knimeService.inlineSvgStyles(svgElement);
JavaScript

Enter the JavaScript code to be executed. All HTML elements have to be created in the JavaScript and appended to the <body> element.

If data is available at the input port, a JavaScript object knimeDataTable is automatically created and populated.
The methods available on this object are:

  • knimeDataTable.getNumRows(); Retrieve the amount of rows contained in the table.
  • knimeDataTable.getNumColumns(); Retrieve the amount of columns contained in the table.
  • knimeDataTable.getColumnNames(); Retrieve the column names in a string array.
  • knimeDataTable.getColumnTypes(); Retrieve the converted JavaScript column types in a string array. These can be Boolean, Number, String, SVG, PNG or Undefined.
  • knimeDataTable.getPossibleValues(); Retrieve an array with possible values from the data table spec.
  • knimeDataTable.getRowColors(); Retrieve a string array with CSS-style color information for each row.
  • knimeDataTable.getRows(); Retrieve an array comprising all rows of the data table.
  • knimeDataTable.getColumn(columnID); Retrieve an array of all values contained in the column with the given ID. Note that this operation can be computationally expensive as data is stored per row and has to be converted.

Example

Loop over all values contained in the table object and process only number types:

var rows = knimeDataTable.getRows();
for (var rowID = 0; rowID < knimeDataTable.getNumRows(); rowID++) {
    var row = rows[rowID];
    for (var colID = 0; colID < knimeDataTable.getNumColumns(); colID++) {
        if (knimeDataTable.getColumnTypes()[colID] === 'number') {
            var value = row.data[colID];
            // process value
        }
    }
}

View settings

To save view settings you can use the automatically created SETTINGS object. This object can be stored temporarily and will be restored, when the view is opened again. Settings will be lost, when the node is reset.
For example:

SETTINGS.mySetting = 4;
Output Flow Variables

Define flow variables to output. The flow variables have to provide a default value, which is available after CONFIGURE and EXECUTE of the node.

It is possible to use and define flow variable values in JavaScript. To do so use the automatically created FLOW_VARIABLES object. The appropriate object field is also automatically inserted in the JavaScript when double-clicking the Script Field cell in the table.

It is important to assign values ccording to the specified flow variable type. For example:

FLOW_VARIABLES["new integer"] = 4;
FLOW_VARIABLES["new string"] = "sample";

Flow variables are only updated when the view is opened and the settings are applied. In the WebPortal this happens implicitly when a page is displayed and a user clicks the 'Next' button.
They are restored, when a view is closed and opened again, but are reset to the default value on reset of the node.

Image Generation

Create SVG image at outport

If an image is supposed to be rendered during execute for the outport. Disable this option if image is not needed or creation is too time consuming.

Additional wait time

To compensate for initial layout delay or animation set an optional wait time in ms. This is time is added after the view initialization and before the image retrieval.

SVG JavaScript

Enter the JavaScript code to return the generated SVG as string.

Example

var svgElement = document.getElementById("mySVG");
knimeService.inlineSvgStyles(svgElement);
return (new XMLSerializer()).serializeToString(svgElement);

Templates

You can define reusable templates with the "Create templates..." button. Templates are stored in the user's workspace by default and can be accessed via the "Templates" tab.

Input Ports

Icon
Data table with data to be converted in JavaScript object available to the view.

Output Ports

Icon
Generated SVG image if view implementation is producing and exporting it.
Icon
All previously and during view generation defined flow variables.

Popular Predecessors

Popular Successors

Views

Interactive View: Generic JavaScript View
The generic view executing the entered JavaScript.

Workflows

Links

Developers

You want to see the source code for this node? Click the following button and we’ll use our super-powers to find it for you.

Installation

To use this node in KNIME, install the extension KNIME JavaScript Views from the below update site following our NodePit Product and Node Installation Guide:

v5.3

A zipped version of the software site can be downloaded here.

Plugin provider: KNIME AG, Zurich, Switzerland
Plugin version: 5.3.0.v202402011404
On NodePit since: 2024-07-09
Last update: 2024-11-21
KNIME versions: Since v3.6

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!