Connecting a button widget to the Next/Back buttons

Hi everyone,
this is my first question here in the forum, hope that someone can help me solve my task.

My idea/task would be to use a “Refresh Button Widget” in order to trigger the “Next” or the “Back” button at the bottom of the page on the server.

My goal is to give the user an easy way of going back and forward in my workflow, through different components: I have other buttons on a specific page and I have been requested to specifically guide the user via buttons, instead of using the “Next” or “Back” button to navigate the workflow.

In another post (Web Portal's "Next" page botton - #4 by AlexanderFillbrunn) I have seen that something similar is possible.
Can anyone let me understand if it is still possible and guide me on how to do that?

Thanks!

Alessandro

Hey @alessandro_mac,

So yes, you will still want to use the generic javascript view node, and I was able to get it working with this as the code inputted in my Javascript window (see below). Then I was able to skip to next page, the same process should be available going backwards as well. I do not think this will work with the refresh button widget, but you can style your button to look similar to the refresh button widget and accomplish this functionality.

var body = document.getElementsByTagName('body')[0];
var html = '<button id="coolButton">Button Text</button>';

body.innerHTML = html;

//either way below is acceptable syntax
//document.getElementById("coolButton").addEventListener("click", next);
document.getElementById("coolButton").onclick = next;

function next() {
	//add functionality here
parent.document.querySelector('.right-button-subcontainer .button.primary').dispatchEvent(new Event('click'));
}
3 Likes

Hi @rsrudd,

thank you very, very much for your fast reply.
That’s amazing, exactly what I was looking for!!
I was able to also trigger the back button thanks to you!

Just another quick question: if I would like then to disable the original “Next”/“Back” button (exactly because now I have a custom one(s)), is it possible/suggested to do that?
Following the thread at Automatically Change Webportal Pages After an Event, I understood that it would not be that difficult, but once I try to integrate the code, it does not really do anything (I’m missing something, for sure).

Can you show me the way (if exists), please?

Thank you very much, have a nice day!

@alessandro_mac,

I am not aware of how to disable portions of the HTML (e.g. next / back / cancel) thats embedded into the data app through a workflow.

Regards,
Ryan

@rsrudd,

no problem, the help that you gave me was already enough for my use case.
Thank you very much again, your answer was extremely helpful!

Best,
Alessandro

2 Likes

If someone is interested in the final result, here the KNIME workflow that contains the triggering of the Back and the Next buttons with some styling to make them similar to a KNIME button:

triggering_next_button.knwf (16.8 KB)

Any suggestions are welcomed!

Thanks again to @rsrudd for the solution!

3 Likes

@alessondro_mac

I have found a way to apply this to the refresh button widget. See the topic I started and later answered myself. I used the code from @rsrudd’s answer as a basis.

https://forum.knime.com/t/change-refresh-button-widget-look/47385/2?u=rbjacob1

1 Like