Adding HTML to interactive view

KNIME Analytics Platform
,
2

Hi @camaalm,

while not having an example, I can maybe give a hint on how it could work. Two ideas:

The hopefully sufficient path would be to use the existing Table View and do CSS Styling on it until you like the result. The CSS Style Sheet can come from the CSS Editor, which you can pass as a flow variable to the Table View: see this example on how it works:

Also check out the Related Workflows & Nodes Section of the CSS Editor to find more examples.

Note that the Table View “understands HTML”, so if you modify the cells (or column names!) to be HTML code. Cells containing HTML code like <a href="www.example.com" target="_blank">This will be rendered as a link</a> will actually be rendered as clickable links - very useful.

Going down the rabbit-hole, the more advanced and flexible requires JavaScript coding: Given your right side data visualization selects the rows, you can “retrieve” these rows on the left hand side in a Generic JavaScript View Node via

tableId = knimeDataTable.getTableId()
rowIDs = knimeService.getAllRowsForSelection(tableId)

If you want to dive into more details on the selection mechanism, @blaney posted a very useful compendium.

Maybe useful to access the available data could be these lines:

var dataTableRows = knimeDataTable.getRows(),
    knimeRowColors = knimeDataTable.getRowColors(),
    columnNames = knimeDataTable.getColumnNames();

As for how to populate the html: If you freshly drag in the Generic JavaScript View it comes with some example code. In there, the variable html is defined, which is the HTML-string that will be display. Depending on your desired HTML, you can e.g. loop over the selected rows (rowIDs) and add lines to the html via html += '...'. Also check out the Templates tab, they also have great example code. And of course, feel free to ask questions here :slight_smile:

Happy KNIMEing (and Coding, in this case)!
Lukas

3 Likes