Automatically Change Webportal Pages After an Event

In my Knime routine I’m launching a REST API. This call may take anywhere from 1-15 minutes to complete. What I want to do is deploy a component that will display a “Still Running…” screen while it loops waiting for a signal that the API has completed. Once I receive the signal, I would like the component to finish and move on to the next.

The issue I have is the user has to press the “Next” button in the webportal. Is there anyway to move to the next screen automatically? Or can I disable the “next” button until the signal is received?

Hi @ScottMcLeodPSLGroup,
you can trigger the next button programmatically via JavaScript, e.g. from a Generic JavaScript View. The code for that would be

parent.document.querySelector('.knime-step-next-button').dispatchEvent(new Event('click'));

Similarly, you can use jQuery enable and disable the button using this code:

parent.document.querySelector('.knime-step-next-button').prop('disabled', false) // enable
parent.document.querySelector('.knime-step-next-button').prop('disabled', true) // disable

Kind regards,
Alexander

1 Like

Thanks! I just started reading about this last night on how to customize the webportal using the gold miner sample template. Within that documentation I saw all these could be set but these examples will be very useful to get me started. Again thank you.

2 Likes

I searched the webportal documentation and I can’t find any additional information about topics like this enabling and disabling buttons. Is there a reference page somewhere that shows the names of other elements in the portal that are available for customization and actions. For example I’d love to change the contents of one screen field based on a value selected in another. But I can’t see any documentation on events and objects in the server refernce.

Hi,
I am afraid this is currently not documented as it is not really a supported functionality, but more a side product of being able to execute JavaScript in the Generic JavaScript View. I always use the Chrome Developer Tools to find out about element and class names on the KNIME WebPortal.
Kind Regards,
Alexander

1 Like

Great tip using Chrome!!! That will help figure that out.

Is there any additional code needed or libraries needed? I used a Generic Java Script View with the single line of code to disable the next button as you suggested.

parent.document.querySelector(’.knime-step-next-button’).prop(‘disabled’, true) // disable

It throws an error:

TypeError:parent.document.querySelector(…)prop is not a function at eval.

Hi,
this should work, as it is vanilla JavaScript. It might be that the iFrame with the Generic JavaScript View is loaded before the button is inserted into the page and querySelector therefore returns null. What you can maybe try is attach a listener on the load event to the window.top of the Generic Java Script View:

window.top.addEventListener('load', (event) => {
    parent.document.querySelector(’.knime-step-next-button’).prop(‘disabled’, true);
});

If that does not work, you might have to check if the button itself is also in an iFrame and try something like window.parent.parent.
Kind regards,
Alexander

Your suggestion for looking for the load event worked. However The code does not disable the button. When I look at the web elements its very unusual. They don’t look like typical web buttons.

I created a simple workflow. One node. Two lines of code. Could you look at this and see if you can see what might be the issue? I tried running on different browsers including Chrome, Firefox, IE. No luck.Test NEXT Button disable.knwf (155.2 KB)

Hi Scott,
You are right, it is not a proper button element. Instead, you can use this:

parent.document.querySelector(’.knime-step-next-button’).addClass("v-disabled")

to give the button a disabled look. However, clicking on it will still trigger the action. To avoid that, you can set the CSS property “pointer-events” to “none”. When you want to enable the button again, use removeClass(“v-disabled”) and set pointer-events to “auto”.
Kind regards,
Alexander

Hi Alex,

this doesn’t work for me.
How can i set the button visibility to hidden?

Thx.

Hi,
in that case you need to set the button’s display style property to “hidden”:

parent.document.querySelector(’.knime-step-next-button’).style.display = "hidden";

Kind regards,
Alexander

Hi Alex,

still visible. What i’m doing wrong?

Sorry, my bad. I mixed things up. Either set display to “none” or “visibility” to “hidden”.
Kind regards,
Alexander

Hi Alex,

sorry but this also doesn’t wotk. Button is still visible.
I’m using jQuery.