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.
\n \nWithin the java script code block you have access to the input table and can use a set of predefined libraries to generate the view.
\n \nAdditionally you can export a static image to the workflow, if the view is generated as an SVG structure.
\n \nThe 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.\n
\n The style rules defined in such a way will override the style rules set in the node's dialog.\n
\n You will find the list of available classes and their description on our documentation page .
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.
","optional":false},{"name":"Create template","description":"All node settings can be stored as a template, which will be available over the 'Templates' tab. See the tab description for more information.
","optional":false},{"name":"Sanitize input data","description":"Sanitizes the input table and available flow variables using a default policy defined by OWASP .
\nSet this option if the script assumes that the input table and used flow variables should be treated as strings or safe HTML strings.
","optional":false},{"name":"Flow Variables","description":"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.
\nFlow 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.
","optional":false},{"name":"Dependencies","description":"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.
","optional":false},{"name":"CSS","description":"Enter optional CSS instructions for styling the view.
\nExample
\nChange the standard font used for rendering for the whole document:
\nhtml, body {font-family: sans-serif;}\nIf 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:
\nknimeService.inlineSvgStyles(svgElement);","optional":false},{"name":"JavaScript","description":"
Enter the JavaScript code to be executed. All HTML elements have to be created in the JavaScript and appended to the <body> element.
\nIf data is available at the input port, a JavaScript object knimeDataTable is automatically created and populated.\n
\n The methods available on this object are:
Example
\nLoop over all values contained in the table object and process only number types:
\nvar rows = knimeDataTable.getRows();\nfor (var rowID = 0; rowID < knimeDataTable.getNumRows(); rowID++) {\n var row = rows[rowID];\n for (var colID = 0; colID < knimeDataTable.getNumColumns(); colID++) {\n if (knimeDataTable.getColumnTypes()[colID] === 'number') {\n var value = row.data[colID];\n // process value\n }\n }\n}\nView settings
\nTo 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.\n
\n For example:
SETTINGS.mySetting = 4;","optional":false},{"name":"Output Flow Variables","description":"
Define flow variables to output. The flow variables have to provide a default value, which is available after CONFIGURE and EXECUTE of the node.
\nIt 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.
\nIt is important to assign values ccording to the specified flow variable type. For example:
\nFLOW_VARIABLES["new integer"] = 4;\nFLOW_VARIABLES["new string"] = "sample";\n
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.\n
\n They are restored, when a view is closed and opened again, but are reset to the default value on reset of the node.
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.
","optional":false},{"name":"Additional wait time","description":"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.
","optional":false},{"name":"SVG JavaScript","description":"Enter the JavaScript code to return the generated SVG as string.
\nExample
\nvar svgElement = document.getElementById("mySVG");\nknimeService.inlineSvgStyles(svgElement);\nreturn (new XMLSerializer()).serializeToString(svgElement);","optional":false}]},{"sectionName":"Templates","fields":[{"name":"","description":"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.","optional":false}]}],"links":[],"kudos":[{"accountId":"account:user:a1c45b80-3e09-42a1-a027-a81d0a6abae7","user":"catalinburtea","date":"2024-06-12T08:50:53+00:00"},{"accountId":"account:user:fd74d1b4-da47-4c58-86e7-4fdd8c45dce0","user":"lukass","date":"2021-08-16T09:53:45+00:00"}],"kudosCount":2,"bundleInformation":{"bundleVersion":"5.12.0.v202605041104","bundleName":"KNIME JavaScript Base Views","bundleSymbolicName":"org.knime.js.views","bundleVendor":"KNIME AG, Zurich, Switzerland","featureSymbolicName":"org.knime.features.js.views","featureName":"KNIME JavaScript Views","featureVersion":"5.12.0.v202605041104","featureVendor":"KNIME AG, Zurich, Switzerland","extensionId":"*0qveOxOA3751S6Vx"},"frequentSuccessors":[{"id":"*S5OtO143pLGNCUMM","factoryName":"org.knime.js.base.node.output.text.TextOutputNodeFactory","probability":0.16666666666666666},{"id":"*Y_8cAJatl5UQNkJy","factoryName":"org.knime.base.node.flowvariable.variabletotablerow2.VariableToTable2NodeFactory","probability":0.08333333333333333},{"id":"*iwDu8kKWK5YB0F_q","factoryName":"org.knime.base.node.util.mergevariables.MergeVariablesNodeFactory","probability":0.05},{"id":"*GN2SBVbWzuK822qv","factoryName":"org.knime.js.base.node.viz.pagedTable.PagedTableViewNodeFactory","probability":0.03333333333333333},{"id":"*czF_b1jv4IgZUqyZ","factoryName":"org.knime.base.node.jsnippet.JavaEditVarNodeFactory","probability":0.03333333333333333},{"id":"*h0_xPCuIhaI9W7us","factoryName":"org.knime.base.node.util.sendmail.SendMailNodeFactory","probability":0.03333333333333333},{"id":"*IpO39g1LT_bEbVll","factoryName":"org.knime.js.base.node.output.image.ImageOutputNodeFactory","probability":0.03333333333333333},{"id":"*JGkO1uOuC3i0u6mZ","factoryName":"org.knime.js.base.node.quickform.selection.single.SingleSelectionQuickFormNodeFactory","probability":0.03333333333333333},{"id":"*jd2U-FYTI8jCbQls","factoryName":"org.knime.base.node.preproc.filter.row.RowFilterNodeFactory","probability":0.03333333333333333},{"id":"*kxEZaYvXuRyXSnCE","factoryName":"org.knime.base.node.image.writeimage.WriteImageNodeFactory","probability":0.03333333333333333}]}