Currently I am attempting to create a new button on the top row of Flow Designer that performs a certain functionality when clicked. However, I am having a hard time getting the button to appear. Below is the UI script that is handling this.
UI Script:
(function(top) {
// debugger;
try {
setTimeout(function() {
debugger;
if (top.window.location.href.indexOf('/workflow-studio') != -1) {
console.log('#############################################');
var css = "@keyframes spinner{to{transform:rotate(360deg);}}.spinner:before{content:'';box-sizing:border-box;position:absolute;width:20px;height:20px;margin-top:-10px;margin-left:-10px;border-radius:50%;border-top:2px solid#07d;border-right:2px solid transparent;animation:spinner.6s linear infinite;}";
var styleSheet = top.document.createElement('style');
styleSheet.textContent = css;
top.document.head.appendChild(styleSheet);
// debugger;
top.document.addEventListener("DOMContentLoaded", function(e) {
console.log("SDFJLKJFL:SDFKJ:LS#(@)$*#$(#@$$^&*@#$^*&#)");
debugger;
var header = top.document.getElementById("header_right_buttons");
var newButton = Object.assign(document.createElement('button'), {
type: 'button',
role: 'button',
id: 'workflow_highlight_changes',
alt: 'Highlt Changes',
innerHTML: '<span class="sr-only">Highlight Changes</span>'
});
newButton.setAttribute('aria-label', 'Highlight Changes');
newButton.setAttribute('data-toggle', 'tooltip');
newButton.setAttribute('data-placement', 'bottom');
newButton.setAttribute('data-original-title', 'Highlight Changes');
newButton.setAttribute('class', 'btn btn btn-primary');
newButton.onclick = function() {
alert("HELLO!!");
console.log("CLICKED");
};
header.appendChild(newButton);
});
console.log("SUCESSS!")
}
}, 10000);
} catch (error) {
console.log(error);
}
})(top);
Is there no way of injecting CSS and HTML into the DOM in Flow Designer? Or am I just doing something wrong with the script?
