Is there a way to change the icons for the report widgets?
The main issue I am having is the fact that the icons are <img>-elements. If it had been a <div> with a background image instead, I could have overridden it through css.
But since css doesn't take into consideration of eventual child nodes, I cannot hide the <img> element and remake the element before. (As the example css I've found supplied by RMP has done) Mainly because different reports have different icons available.
I have tried doing it through java-script instead, but it feels wrong to overwrite the <img> src attribute through such brutal means... Also I am having issues when the report is in a section that starts closed. In that situation, the reports elements aren't loaded until the section is first opened, meaning that my script has already been executed but not found the icons.
Is there a third way to replace the icons in report widgets, that I have missed?
Regards
Svensson, Peter
I have kept trying things with this issue and I believe I might have found a bug or inconsistent behavior?
I have create a simple listener that should trigger whenever a report is updated.
var ReportListener = function(name, newvalue, index, widget) {
if (widget != undefined && widget.getType() === "RMP_Report") {
console.log("Updated reports");
}
}
RMPApplication.addListener(ReportListener);
I never get it to trigger however. :(
Regards
Svensson, Peter
--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "Fujitsu RunMyProcess Developer Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum+unsubscribe@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at https://groups.google.com/a/runmyprocess.com/group/supportforum/.
To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/d872759f-7b1d-41c3-8d78-f2e55383596e%40runmyprocess.com.
For more options, visit https://groups.google.com/a/runmyprocess.com/d/optout.
I am not changing the value. But before someone opens the section the report is hiding within it doesn't exist. It is clear that it is created once the secion is opened.
I was hoping for it to trigger once it had loaded in, so that my script could run at a relyable moment, rather than waiting an unknown amount of time.
My question at its core is "How am I able to change the icons for reports"?
Regards
Svensson, Peter
Regards
Svensson, Peter
--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "Fujitsu RunMyProcess Developer Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum+unsubscribe@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at https://groups.google.com/a/runmyprocess.com/group/supportforum/.
To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/2bfbd130-1d82-4a02-8117-0b409e452276%40runmyprocess.com.
To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/CADHrCayVH8dW%2B017%2BDohCAwbsbtzzyyOUD2wKGR-VAEFAu7YJA%40mail.gmail.com.
In order to clarify, I'll do a bit of "for dummies" step by step to reproduce the issue.
1. Create a section.
2. Make sure that the section does NOT open on launch. It must remain closed.
3. Add the reports within said section.
4. Add the javascript you have supplied. Within the section or outside of it does not matter.
5. When testing, wait for a few seconds before opening the section.
You should find that the icons have not been updated.
This is because the elements have not been created until after the section is opened. And as the scripts timeout triggers after one second, no elements have been updated.
--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "Fujitsu RunMyProcess Developer Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum+unsubscribe@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at https://groups.google.com/a/runmyprocess.com/group/supportforum/.
To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/9ebfdba2-e60b-4b2c-b7d0-d5f26642f781%40runmyprocess.com.
--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "Fujitsu RunMyProcess Developer Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum+unsubscribe@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at https://groups.google.com/a/runmyprocess.com/group/supportforum/.
To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/f98c05ae-3c71-4392-9459-32a3bea941c6%40runmyprocess.com.
For more options, visit https://groups.google.com/a/runmyprocess.com/d/optout.
Sadly, since it does not work fully I don't think we should close this.
Since JavaScript does not work and CSS does not work, what else is there?
Is it possible to request an improvement of the reports widget? So that this kind of thing is easier to do in the future?
Regards
Svensson, Peter
Regards
Svensson, Peter
--
Fujitsu - RunMyProcess
---
You received this message because you are subscribed to the Google Groups "Fujitsu RunMyProcess Developer Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to supportforum+unsubscribe@runmyprocess.com.
To post to this group, send email to suppor...@runmyprocess.com.
Visit this group at https://groups.google.com/a/runmyprocess.com/group/supportforum/.
To view this discussion on the web visit https://groups.google.com/a/runmyprocess.com/d/msgid/supportforum/bd6aa1b4-a674-4ad2-af7e-cb9c6c3719ec%40runmyprocess.com.
Sadly, this is where I started, but it won't work as reports may switch the options off and on as they please.
Since this solution relies on nth-child, it means that if an option is replace by something else, the wrong icon would be displayed.
I'd give a more indepth answer, but I am currently on vacation. I can do a better explanation when I'm back at work, if the above is not enough.
Regards
Svensson, Peter
I'm back from vacation :)
I have added some images to help explain a bit better.
But using CSS nth-child does not work with Report widgets because the icons vary.
While having Filtering activated, there's four icons present, placing the refresh icon as the fourth icon.
But without Filtering, the refresh icon is now the second icon.
This means that a css would only work for one of these cases.
I am trying to build a css-file that can be reused throughout a group of projects. I can't make the assumption that any of these groups will or will not have filtering available.
There's many ways this could be improved, if you are willing to make changes to the widget. Moving the icon specific class "ImageButton-Refresh-only" to the <td> before the <img>-element would've made this a lot easier. Or if the <img>-element were a <div> instead and had it's icons applied through the default css to begin with.
As it stands right now, I don't see a way to resolve this from my side :(
So I have a solution for this issue. I have built a script that should be able to handle most situations in connection with the report icons.
I still feel that this sort of thing should not require an advanced script to solve, but since I've made one I feel I want to share it in case there's anyone else that would need it.
I still urge RMP to improve the widget, though.
To use the script, replace all the [-- Image Data --] placeholders with suitable image sources. Base64 png-files or svg xml's work fine as well as url's.
Regards
Svensson, Peter
var updateReportIcons = function () {
var buttons = document.getElementsByClassName("ImageButton");
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (button.classList.contains("ImageButton-Expand")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("browseFileStyle")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-Collapse")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-filter")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-Refresh-only")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-Edit")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-Print")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-Export")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-SelectAll")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-DeselectAll")) {
button.setAttribute("src", [-- Image data --]);
}
else if (button.classList.contains("ImageButton-Refresh")) {
button.setAttribute("src", [-- Image data --]);
}
}
};
var observeReports = function() {
var targetNodes = document.getElementsByClassName('Report');
var config = { childList: true };
var callback = function(mutationsList) {
for(var i = 0; i < mutationsList.length; i++) {
var mutation = mutationsList[i];
if (mutation.type == "childList" && mutation.addedNodes.length !== 0 && mutation.addedNodes[0].tagName === "TABLE") {
updateReportIcons();
}
}
};
var observer = new MutationObserver(callback);
for (var i = 0; i < targetNodes.length; i++) {
observer.observe(targetNodes[i], config);
}
}
var updateReportsWhenLoaded = function () {
if (!RMPApplication.isValid()) {
setTimeout(updateReportsWhenLoaded, 100);
} else {
observeReports();
}
};
updateReportsWhenLoaded();