Change Refresh Button Widget look

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.

6 Likes