Custom javascript functions in the HTML page generated by quick forms

KNIME Server
1

Dear,

I would like to generate html pages. I am using the quick forms nodes (text output in particular) and it works well. BUT I don’t know how to include custom javascript functions in these pages in order to add interactivity?

Where can I find documentation on this specific point?

Example: add a button with the onclick option, and behind the onclick parameter have this kind of function (or an alert, or other…)

function updateDiv0() {
$(‘here’).innerHTML = ‘Your text.’;
}

Thanks in advance,

Lionel

2

Hello @lcollia -

Have you checked out the Generic JavaScript View node? If you want to see it in action - and this is maybe a more complicated example than you need - you can check out our recently released Guided Visualization and Exploration workflow, where it is used within several different wrapped metanodes.

3

Hi Scottf,

Thanks for your answer. Yes I saw the Generic JavaScript node and the example protocols you cited.
But to be honest I do not understand how the JavaScript is executed. For example I do not find the JavaScript functions I wrote in the nodes, in the final html page (in the interactive view through the client).
Can I have more documentations about this?
Thanks in advance
Lionel

4

Hi Icollia

The code you put inside a Generic Javascript node, is handled as a string passed as parameter to node’s library (org\knime\js\base\node\viz\generic\knime-generic-view-v3.js) which in turn parses it at run-time with the eval function: this is the reason why you don’t see the javascript code in final HTML.
Moreover, each Javascript node has a dedicated iframe element in the resulting web page.

5

Hi Arofab,

So, if :

  1. in the Generic Javascrip View Node, I put a custom javascript function
  2. in an Text output quick form, I put a button calling the previous custom javascript function

All in a single wrapped metanode.

this should work?

Find attached the workflow I did to test this, that is not working.

Webtask-Test.knwf (19.7 KB)

Lionel

6

The final HTML is a composition of HTML iframe elements, each for javascript node.
Therefore in your workflow you have one iframe for Generic Javascript node, and one iframe for quick form node.
Your example won’t work because you have two distinct document objects, one for iframe.
The problem is that we don’t know the iframes ids, so it is needed to dig into KNIME javascript files to find them.

I had a similar need in the past, so I solved it with an hack based on current KNIME javascipt files, so my method may stop working when KNIME updates them.

I modified your workflow to handle the button onclick event:
Webtask-Test.knwf (21.6 KB)

Regards,
Fabrizio

2 Likes
7

Hi Fabrizio,

Thanks for your explanation about the iFrame generation. I understand now why my workflow could not work!

And thanks for your javascripts workaround. I will look at it carefully.

Best regards,

Lionel