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.
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.
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.
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