Change Refresh Button Widget look

I am trying to create a dashboard app where there are multiple numbers/images. I want each to be clickable and change what is displayed. Is there a way to modify the look of the Refresh Button Widget. I was hoping this could be done with CSS, but there the refresh button widget doesn’t seem to accept CSS stylesheets like most of the widgets do.

I know that some of the other selection widgets now have the option to refresh on change. Is there a way to implement this same functionality in a JavaScript view node?

A little playing around I found the answer. To get the same functionality the refresh button needed to be setup as if I was going to use it. Meaning, it needed to be connected properly in the workflow to where I wanted it to go.

I then created a generic JavaScript View where I created a new button and attached the same functionality as the refresh button. To complete the illusion I then had to hide the actual refresh button from being displayed. See the code below.


var body = document.getElementsByTagName('body')[0];
var html = '<button id="testButton1">Test Refresh 1</button>';
body.innerHTML = html;
document.getElementById("testButton1").onclick = refresh;
parent.document.getElementsByClassName("refresh-button button primary compact")[0].style.display = "none";


function refresh() {
	parent.document.getElementsByClassName("refresh-button button primary compact")[0].dispatchEvent(new Event('click'));
}

Now I have a button that I can configure with traditional CSS anyway I want. Using this method I should be able to attach this functionality to whatever I want whether it be a text or image.

4 Likes

Hi @rbjacob1,

that’s a great solution!! I’ve also tried it in my workflow and it works perfectly!
Many thanks for sharing it!

I was wondering: using almost the same code, it would be possible also to disable/hide the “Next” button, for instance (I would like to have this functionality for my use case).

I’ve tried many times to add a Javascript code (I’m not an expert so far) that can do that, but it seems not to work.

The code that I would use would be the following:

parent.document.getElementsByClassName("button primary")[2].style.display = "none";

I already tried in the Javascript console in the browser and it works perfectly ones executed, but I do not see how to use it inside the Javascript node in order to trigger, whenever the page is loaded, the disable/hiding of the button.

Do you have any idea in this case?

Thanks again!

Best,
Alessandro

It is important that when you search for the specific elements, that you have a way to identify the proper one. In the case of the example you use, there may not be 3 primary buttons and therefore nothing would happen. This is where jQuery comes in. I’ll admit that I am still working on learning jQuery myself.

But if you take the previous examples and make simple modifications and instead of searching by class name, you use the jQuery that @rsrudd gave you it works.

Here is the code I used. I haven’t tried for the back button but I assume it would work as well.

var body = document.getElementsByTagName('body')[0];
var html = '<button id="nextButton1">Next Button 1</button>';
body.innerHTML = html;
document.getElementById("nextButton1").onclick = next;
parent.document.querySelector('.right-button-subcontainer .button.primary').style.display = "none"


function next() {
	parent.document.querySelector('.right-button-subcontainer .button.primary').dispatchEvent(new Event('click'));
}

Thanks

Reed
1 Like

@rbjacob1 I did not consider searching by jQuery (also because I’m still learning too), I was continuously hitting my head searching by class name.

Thank you very, very much for the clarification, now I understand and it works like a charm!

Best,
Alessandro

Hi @rbjacob1 is it possible you can attach a dummy workflow that uses the script you wrote? Thanks!

@badger101,

No problem. I am attaching the dummy one that I used and it has both a refresh button and next button via JavaScript.

Test-Refresh Button.knwf (29.9 KB)

Take a look.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.