Replacing icons for Report widget.

404 views
Skip to first unread message

stor...@gmail.com

unread,
May 18, 2018, 8:33:12 AM5/18/18
to Fujitsu RunMyProcess Developer Community
Hi again.

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

how_the_icons_look.PNG
how_I_want_them_to_look.PNG

stor...@gmail.com

unread,
May 25, 2018, 4:15:23 AM5/25/18
to Fujitsu RunMyProcess Developer Community, stor...@gmail.com
So currently the following JavaScript is my "solution".

What it does is simply replacing the Report img-icons as soon as possible.
However if the Report is in a closed Section widget, it is not yet loaded at start. Thus I have added an on-click method to all Sections (because I don't know which section has a Report or which doesn't). Sadly there is no feedback at this point. I cannot look at the widget and check it's "loading" status. Instead I have to rely on a timeout, which will trigger to early if there's even the slightest of lag on the page and not update anything. Or trigger to late if everything runs perfectly smoothly, making the icons quickly blink between the old icons and the new.

Does anyone have a better solution to this?




var updateReports = function () {
var buttons = document.getElementsByClassName("ImageButton");
if (buttons.length === 0) {
setTimeout(updateReports, 100);
return;
}

for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (button.classList.contains("ImageButton-Expand")) {
button.setAttribute("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gUOCh4f67lflgAAAKBJREFUSMfdk8EKgCAQRGfFU1+cHoo6VF/sMbskSGRW2mYtCCq6w4xPGofG4mYp3RMAnOkhAaBWHV0VmcbW+oJHYkr3JNZ5FThTecOdFUfuQvvukgkIGW/M694ci3JvLbcxpJaLMeSQv1IojFLHIS64kpIxB7keVV75E5+Ijo26d2F4wnU5eOciks7EtG1edHRsuJeN9x3XZTnKgTv9LroFlpRJ3ZdAKDUAAAAASUVORK5CYII=");
}
else if (button.classList.contains("browseFileStyle")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Calque_1' data-name='Calque 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Ctitle%3ESans titre - 1%3C/title%3E%3Cpath d='M25,6.27a3.37,3.37,0,0,0-2.47-1H12v-.5a3.37,3.37,0,0,0-1-2.47,3.37,3.37,0,0,0-2.47-1h-5A3.37,3.37,0,0,0,1,2.27,3.37,3.37,0,0,0,0,4.74v15a3.37,3.37,0,0,0,1,2.47,3.37,3.37,0,0,0,2.47,1h19a3.52,3.52,0,0,0,3.5-3.5v-11A3.37,3.37,0,0,0,25,6.27Z' transform='translate(0 -1.24)' fill='%23a30b1a'/%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-Collapse")) {
button.setAttribute("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gUPBiQzTW5zDQAAAJVJREFUSMfVlTEOwCAIRSvh0LWDph3EW9upi9FqCRDLphg+Xx/RUQplY4Y/LtfapxRKnYNNOJ7GawOgIdJag5ZIvQ+aIrN53dBSRytxnD24+9NxRTLFgiMHvaEUcSRVnHV1mWL5BXVgNTZo5Rq5HX7BfQpvKSJxVKj1iZm90dK4r403xzVKdfyGexdvDdyHQqrfhAbuN74AU989G3j6AAAAAElFTkSuQmCC");
}
else if (button.classList.contains("ImageButton-filter")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.12 24'%3E%3Ctitle%3E2%3C/title%3E%3Cpath d='M23.56,3.24C23.56,1.11,17.74,0,12,0S.44,1.11.44,3.24a1.64,1.64,0,0,0,.83,1.29l8,10.88v8.1l0,.49h.67l4.85-4.85V15.41l8-10.88A1.64,1.64,0,0,0,23.56,3.24ZM12,.92c6.49,0,10.63,1.37,10.63,2.31S18.49,5.55,12,5.55,1.37,4.18,1.37,3.24,5.51.92,12,.92Z' transform='translate(-0.44)' fill='%2387867e'/%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-Refresh-only")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.42 24'%3E%3Ctitle%3E2%3C/title%3E%3Cpath d='M2.73,10A1.92,1.92,0,0,0,4.49,8.86a8.15,8.15,0,0,1,7.51-5,8,8,0,0,1,4.94,1.7l-1.07.17a.84.84,0,0,0-.22,1.59L21.55,10a.84.84,0,0,0,1.18-.76l0-6.5a.84.84,0,0,0-1.53-.47l-.81,1.22A12,12,0,0,0,.94,7.34,1.93,1.93,0,0,0,2.73,10Z' transform='translate(-0.79)' fill='%2387867e'/%3E%3Cpath d='M22.89,14.84a1.92,1.92,0,0,0-3.38.31,8.15,8.15,0,0,1-7.51,5,8,8,0,0,1-4.94-1.7l1.07-.17a.84.84,0,0,0,.22-1.59L2.45,14a.84.84,0,0,0-1.18.76l0,6.5a.84.84,0,0,0,1.53.47l.81-1.22a12,12,0,0,0,19.47-3.89A1.93,1.93,0,0,0,22.89,14.84Z' transform='translate(-0.79)' fill='%2387867e'/%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-Edit")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3E2%3C/title%3E%3Cg id='Pencil'%3E%3Cpath d='M22.71,1.29a4.41,4.41,0,0,0-6.23,0L3.22,14.47a.74.74,0,0,0-.18.28L0,23a.75.75,0,0,0,.71,1A.74.74,0,0,0,1,24l7.46-2.29a.75.75,0,0,0,.31-.19l14-14a4.41,4.41,0,0,0,0-6.23ZM7.57,20.37l-2.79.86A3.2,3.2,0,0,0,4,20a4.05,4.05,0,0,0-1-.72l1.28-3.51H6v1.5a.75.75,0,0,0,.75.75H8.07Zm11-10.87L9.47,18.64l.26-1.24A.75.75,0,0,0,9,16.5H7.5V15a.75.75,0,0,0-.75-.75H5.57l8.92-8.87h0A2.91,2.91,0,1,1,18.61,9.5Zm3-3-.7.7a4.39,4.39,0,0,0-4.12-4.11l.7-.7h0a2.91,2.91,0,1,1,4.11,4.11Zm-4.93-.25-7.5,7.5a.75.75,0,1,0,1.06,1.06l7.5-7.5a.75.75,0,0,0-1.06-1.06Z' transform='translate(0)' fill='%2387867e'/%3E%3C/g%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-Print")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.81 24'%3E%3Ctitle%3E2%3C/title%3E%3Cpath d='M19.86,4.92h-.62V3.55A3.55,3.55,0,0,0,15.7,0H8.25A3.55,3.55,0,0,0,4.7,3.55V4.92H4.14A3.55,3.55,0,0,0,.59,8.47v5.72a3.55,3.55,0,0,0,3.55,3.55H4.7v4.5A1.77,1.77,0,0,0,6.47,24h11a1.77,1.77,0,0,0,1.77-1.77v-4.5h.62a3.55,3.55,0,0,0,3.55-3.55V8.47A3.55,3.55,0,0,0,19.86,4.92ZM6,3.55a2.21,2.21,0,0,1,2.2-2.2h7.44a2.21,2.21,0,0,1,2.2,2.2V4.92H6ZM17.89,22.24a.43.43,0,0,1-.43.43h-11A.43.43,0,0,1,6,22.24V14.82H17.89Zm4.17-8a2.21,2.21,0,0,1-2.2,2.2h-.62V14.82h.89a.67.67,0,0,0,0-1.34H3.71a.67.67,0,0,0,0,1.34h1v1.57H4.14a2.21,2.21,0,0,1-2.2-2.2V8.47a2.21,2.21,0,0,1,2.2-2.2H19.86a2.21,2.21,0,0,1,2.2,2.2Z' transform='translate(-0.59)' fill='%2387867e'/%3E%3Cpath d='M7.67,18.13h8.55a.67.67,0,0,0,0-1.34H7.67a.67.67,0,0,0,0,1.34Z' transform='translate(-0.59)' fill='%2387867e'/%3E%3Cpath d='M16.27,19.53H7.72a.67.67,0,0,0,0,1.34h8.55a.67.67,0,0,0,0-1.34Z' transform='translate(-0.59)' fill='%2387867e'/%3E%3Cpath d='M19.84,7.56H18.48a.67.67,0,0,0,0,1.34h1.36a.67.67,0,0,0,0-1.34Z' transform='translate(-0.59)' fill='%2387867e'/%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-Export")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.32 24'%3E%3Ctitle%3E2%3C/title%3E%3Cpath d='M23.52,19.81l-3.17-3.17a1.16,1.16,0,0,0-2,.82v.48a.21.21,0,0,1-.2.2h-.32V4.92a.48.48,0,0,0-.14-.34L13.25.14A.48.48,0,0,0,12.91,0H.82A.48.48,0,0,0,.34.48v23A.48.48,0,0,0,.82,24H17.36a.48.48,0,0,0,.48-.48V22.16h.32a.21.21,0,0,1,.2.2v.48a1.16,1.16,0,0,0,2,.82l3.17-3.17a.48.48,0,0,0,0-.68ZM13.39,1.63l2.81,2.81H13.39ZM16.88,23H1.3V1H12.44v4a.48.48,0,0,0,.48.48h4V18.14h-1a.48.48,0,0,0-.48.48v3.06a.48.48,0,0,0,.48.48h1ZM19.67,23a.2.2,0,0,1-.35-.14v-.48a1.16,1.16,0,0,0-1.16-1.16h-1.8V19.1h1.8a1.16,1.16,0,0,0,1.16-1.16v-.48a.2.2,0,0,1,.35-.14l2.84,2.83Z' transform='translate(-0.34)' fill='%2387867e'/%3E%3Cpath d='M3.71,8.32h7.91a.48.48,0,0,0,0-1H3.71a.48.48,0,1,0,0,1Z' transform='translate(-0.34)' fill='%2387867e'/%3E%3Cpath d='M14.47,10.52H3.71a.48.48,0,0,0,0,1H14.47a.48.48,0,1,0,0-1Z' transform='translate(-0.34)' fill='%2387867e'/%3E%3Cpath d='M14.47,13.67H3.71a.48.48,0,0,0,0,1H14.47a.48.48,0,1,0,0-1Z' transform='translate(-0.34)' fill='%2387867e'/%3E%3Cpath d='M14.47,16.83H3.71a.48.48,0,0,0,0,1H14.47a.48.48,0,1,0,0-1Z' transform='translate(-0.34)' fill='%2387867e'/%3E%3Cpath d='M14.47,7.36H13.42a.48.48,0,0,0,0,1h1.05a.48.48,0,1,0,0-1Z' transform='translate(-0.34)' fill='%2387867e'/%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-SelectAll")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Calque_2' data-name='Calque 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.46 511.2'%3E%3Ctitle%3E2%3C/title%3E%3Crect x='256' y='462.29' width='251.46' height='48.91' fill='%2387867e'/%3E%3Cpolygon points='20.53 85.34 81.92 146.72 199.01 29.64 223.04 53.67 223.04 0 0 0 0 105.87 20.53 85.34' fill='%2387867e'/%3E%3Cpolygon points='112.32 177.12 112.32 177.12 85.42 204.02 55.02 173.62 55.02 173.62 0 118.61 0 223.04 223.04 223.04 223.04 66.4 112.32 177.12' fill='%2387867e'/%3E%3Crect x='256' y='174.13' width='251.46' height='48.91' fill='%2387867e'/%3E%3Crect x='256' y='90.51' width='251.46' height='48.91' fill='%2387867e'/%3E%3Cpolygon points='20.53 373.5 81.92 434.88 199.01 317.8 223.04 341.83 223.04 288.16 0 288.16 0 394.03 20.53 373.5' fill='%2387867e'/%3E%3Cpolygon points='112.32 465.28 112.32 465.28 85.42 492.18 55.02 461.79 55.02 461.79 0 406.76 0 511.2 223.04 511.2 223.04 354.56 112.32 465.28' fill='%2387867e'/%3E%3Crect x='256' y='378.67' width='251.46' height='48.91' fill='%2387867e'/%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-DeselectAll")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Calque_2' data-name='Calque 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.46 511.2'%3E%3Ctitle%3E2%3C/title%3E%3Crect x='256' y='174.13' width='251.46' height='48.91' fill='%2387867e'/%3E%3Crect x='256' y='90.51' width='251.46' height='48.91' fill='%2387867e'/%3E%3Crect x='256' y='462.29' width='251.46' height='48.91' fill='%2387867e'/%3E%3Crect x='256' y='378.67' width='251.46' height='48.91' fill='%2387867e'/%3E%3Cpath d='M0,0V223H223V0ZM201.71,202.38H16.6V17.27H201.71Z' fill='%2387867e'/%3E%3Cpath d='M0,288.2v223H223v-223ZM201.71,490.54H16.6V305.43H201.71Z' fill='%2387867e'/%3E%3C/svg%3E");
}
else if (button.classList.contains("ImageButton-Refresh")) {
button.setAttribute("src", "data:image/svg+xml;charset=utf8,%3Csvg id='Capa_1' data-name='Capa 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 493.13 512'%3E%3Ctitle%3E2%3C/title%3E%3Cpath d='M246.56,0C124,0,0,23.71,0,69,0,79.28,6.43,88.43,17.71,96.46L187.39,328.68V501.53L188,512h9.86l4.51-.18,82.19-82.15a133.84,133.84,0,1,1,119-234.91L475.41,96.5c11.29-8,17.72-17.18,17.72-27.46C493.13,23.71,369.09,0,246.56,0Zm0,118.35C108.09,118.35,19.72,89.15,19.72,69s88.37-49.27,226.84-49.27S473.41,48.93,473.41,69,385,118.35,246.56,118.35Z' fill='%2387867e'/%3E%3Cpath d='M325.66,194.55A109.78,109.78,0,1,0,435.45,304.33,109.78,109.78,0,0,0,325.66,194.55Zm55.26,194.22-55.65-55.65L270,388.38,240.84,359.2l55.26-55.26-55.65-55.65,29.17-29.17,55.65,55.65,56-56,29.17,29.17-56,56,55.65,55.65Z' fill='%2387867e'/%3E%3C/svg%3E");
}
}
};

var updateReportsWhenLoaded = function (widget) {
if (widget.isLoaded()) {
updateReports();
} else {
setTimeout(updateReportsWhenLoaded, 100, widget);
}
};

var findReports = function (widgets) {
for (var i = 0; i < widgets.length; i++) {
var widget = widgets[i];
if (Array.isArray(widget)) {
findReports(widget);
}
else if (widget.getType() === "RMP_Report") {
updateReportsWhenLoaded(widget);
break;
}
}
};

var bindSections = function () {
var sections = document.getElementsByClassName("rmpSection");
for (var i = 0; i < sections.length; i++) {
var section_header = sections[i].querySelector(".rmpSection tbody tr:nth-child(1) .header");
section_header.addEventListener("click", function() {
setTimeout(function() {
findReports(RMPWidgets.getAllWidgets());
}, 250);
}, true);
}
};

var updateWhenLoaded = function () {
if (!RMPApplication.isValid()) {
setTimeout(updateWhenLoaded, 100);
} else {
findReports(RMPWidgets.getAllWidgets());
bindSections();
}
};

updateWhenLoaded();

stor...@gmail.com

unread,
Jun 4, 2018, 3:00:29 AM6/4/18
to Fujitsu RunMyProcess Developer Community, stor...@gmail.com
Hi again.

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

Pankaj Kumar

unread,
Jun 6, 2018, 3:44:03 PM6/6/18
to Fujitsu RunMyProcess Developer Community, Peter Svensson
Hi Peter,

"RMPApplication.addListener" method works whenever a value is changed. Kindly share details on how you are changing/updating a report in a web-interface.

Please find below reference link:-


Thank you,
Pankaj Kumar
Fujitsu RunMyProcess Support


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

stor...@gmail.com

unread,
Jun 7, 2018, 2:36:09 AM6/7/18
to Fujitsu RunMyProcess Developer Community, stor...@gmail.com
Hi there.

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

Pankaj Kumar

unread,
Jun 7, 2018, 3:19:45 PM6/7/18
to Fujitsu RunMyProcess Developer Community, Peter Svensson
Hi Peter,

Sorry for the confusion of the query. I will work on it and update you soon on this.

Thank you,
Pankaj Kumar
Fujitsu RunMyProcess Support


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

Vitthal Jivrag

unread,
Jun 8, 2018, 11:39:19 AM6/8/18
to suppor...@runmyprocess.com
Hi Peter,

As per your given query you want to change icon on report widget for this you can try given script . change icon source address  as per your requirement. Put this script in JavaScript widget on your web interface where you using Report Widget. In attachment you can see the result of given script.


setTimeout(function(){ 
$("div .editWrapperStyle > table").find("tr").find("td:first-child").find("div").find("img").attr("src","https://image.flaticon.com/icons/png/128/279/279165.png"); 
   $("div .editWrapperStyle > table").find("tr").find("td:nth-child(2)").find("img").attr("src","https://image.flaticon.com/icons/png/128/279/279162.png"); 
   $("div .editWrapperStyle > table").find("tr").find("td:nth-child(3)").find("img").attr("src","https://image.flaticon.com/icons/png/128/279/279163.png"); 
   $("div .editWrapperStyle > table").find("tr").find("td:nth-child(4)").find("img").attr("src","https://image.flaticon.com/icons/png/128/279/279164.png"); 
}, 1000);

Please correct me if i misunderstood. 

Thank you,
Vitthal Jivrag
Fujitsu RunMyProcess Support




Script Result Image.JPG

stor...@gmail.com

unread,
Jun 11, 2018, 3:40:15 AM6/11/18
to Fujitsu RunMyProcess Developer Community
Sadly this does not work well enough.

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.

Pankaj Kumar

unread,
Jun 12, 2018, 7:50:33 AM6/12/18
to Fujitsu RunMyProcess Developer Community
Hi Peter,

You can replace the icons of the report from css also, Please refer to attached screen-print and below css that I have used to replace a icon ( first icon, select all )




CSS:-

.ImageButton-SelectAll{
    height:26px;
    width:26px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAACdElEQVR42rVW32sTQRBeEAoBQRAKfRIEn4Q+CYIgFISCUPDJJ/+AgiAUCoJ/QKEgCIJQKAhCsbnz1IqiFEvVFkVQ4o8HfxROvNte2qTR1LZJY2Nix52t1+7dzd5eEAeGHJfd+W6+nflmGTOZ86GLWf4Ay3tXxe+E8AKz+CtmeeMs748IP8H+yRy3WwQdE94QDgavMNu/yJwg1xmI7Z0Xm2tU0MMPimmAXGTexzLSdJ0Kss/2YfjtKtRa26bs2iK7C+lAFr9Bbe6dXoJCtQmhZaBSOB/U0OUPxxfnHA6jn9agvQ0JW9j4BeNfanDs8bIOrJmk0QmOyD+UhaeelsGttcBk+BEjH9eg6xanwFx5HHuU+ZPxRYfuF2F6uQFZ7d1qEw7eXUyC2XzobzZejzxADdfnXn6DylY7EhSzvfT+h6RPtZnSTzorpZRTD7Z7KoBJv54oBqRrwqtHwM6+qCRj3Ax6Sdp0fnpuBfhmK/IOwZC20J5Xtgj6sNylpPiQ1fff5iS9anEcuBM/KyFXsps7AKK8514QoQ/7LtZTdgLo6KOd5gw9+XX0Gap2fKZEAhXiZa3aydmSEQjXqIYxKOoSxYAHHtrDpYYRSO23eLHs9RJR3pc/r0e+cOhNVQuCQqvalYV1TXkTDYsdXm3+jgSYCjZ3uUclx2d8pxruIdTBTZWggfkVUkzTNA/36CVII6qhsH6tm4UV1/Q9KWcQVc2YCBt0zN0gs8N3+B/VxPSYMAy+8Nz6n5Vh8PV36fhMqrVx8O2Ocj1YRs8wyjNcTgxeZHne3+F1S5b9f75uRcd8jlmLZ0Swa1KzdiSrIG9LeT6a7XrF2B8dkAzCbL0JHAAAAABJRU5ErkJggg==) no-repeat 0 0;
}
img[src].ImageButton-SelectAll{
    object-position: -99999px 99999px;
}


Thank you,
Pankaj Kumar
Fujitsu RunMyProcess Support

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

stor...@gmail.com

unread,
Jun 12, 2018, 8:28:51 AM6/12/18
to Fujitsu RunMyProcess Developer Community
Hi there.

Sadly, this does not work in Internet Explorer.

Internet Explorer or Edge does not support object-position.

Otherwise, this would have been a great solution!

Regards
Svensson, Peter

icon issue.PNG

Gunjan Rajgure

unread,
Jun 19, 2018, 8:58:07 AM6/19/18
to Fujitsu RunMyProcess Developer Community
Hello Peter,

The solution given by Pankaj is great but unfortunately it is not working on Internet Explorer. It is greatly working with Chrome.
Keep trying with css to change the icons. Can we close this window?
Awaiting for your response.

Please don't hesitate to contact us for any query you have.



Thanks & Regards,
Gunjan Rajgure
Fujitsu RunMyProcess Support

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



--
Thanks & Regards
Gunjan Rajgure
Fujitsu - RunMyProcess Support

stor...@gmail.com

unread,
Jun 20, 2018, 2:30:19 AM6/20/18
to Fujitsu RunMyProcess Developer Community
Hi there.

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

Pankaj Kumar

unread,
Jul 2, 2018, 6:18:31 AM7/2/18
to Fujitsu RunMyProcess Developer Community, Peter Svensson
Hi Peter,

Please find below css to change the icons of the report. I have tested it in IE and chrome.
Please refer to attached report screen-print for changed icons.

.Buttons .Buttons-Left tr:first-child td:first-child > div{
    height: 26px;
    width: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAACdElEQVR42rVW32sTQRBeEAoBQRAKfRIEn4Q+CYIgFISCUPDJJ/+AgiAUCoJ/QKEgCIJQKAhCsbnz1IqiFEvVFkVQ4o8HfxROvNte2qTR1LZJY2Nix52t1+7dzd5eEAeGHJfd+W6+nflmGTOZ86GLWf4Ay3tXxe+E8AKz+CtmeeMs748IP8H+yRy3WwQdE94QDgavMNu/yJwg1xmI7Z0Xm2tU0MMPimmAXGTexzLSdJ0Kss/2YfjtKtRa26bs2iK7C+lAFr9Bbe6dXoJCtQmhZaBSOB/U0OUPxxfnHA6jn9agvQ0JW9j4BeNfanDs8bIOrJmk0QmOyD+UhaeelsGttcBk+BEjH9eg6xanwFx5HHuU+ZPxRYfuF2F6uQFZ7d1qEw7eXUyC2XzobzZejzxADdfnXn6DylY7EhSzvfT+h6RPtZnSTzorpZRTD7Z7KoBJv54oBqRrwqtHwM6+qCRj3Ax6Sdp0fnpuBfhmK/IOwZC20J5Xtgj6sNylpPiQ1fff5iS9anEcuBM/KyFXsps7AKK8514QoQ/7LtZTdgLo6KOd5gw9+XX0Gap2fKZEAhXiZa3aydmSEQjXqIYxKOoSxYAHHtrDpYYRSO23eLHs9RJR3pc/r0e+cOhNVQuCQqvalYV1TXkTDYsdXm3+jgSYCjZ3uUclx2d8pxruIdTBTZWggfkVUkzTNA/36CVII6qhsH6tm4UV1/Q9KWcQVc2YCBt0zN0gs8N3+B/VxPSYMAy+8Nz6n5Vh8PV36fhMqrVx8O2Ocj1YRs8wyjNcTgxeZHne3+F1S5b9f75uRcd8jlmLZ0Swa1KzdiSrIG9LeT6a7XrF2B8dkAzCbL0JHAAAAABJRU5ErkJggg==) no-repeat 0 0;
}
.ImageButton-SelectAll{opacity:0;}
.Buttons .Buttons-Left tr:first-child td:nth-child(2){
    height: 26px;
    width: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAACdElEQVR42rVW32sTQRBeEAoBQRAKfRIEn4Q+CYIgFISCUPDJJ/+AgiAUCoJ/QKEgCIJQKAhCsbnz1IqiFEvVFkVQ4o8HfxROvNte2qTR1LZJY2Nix52t1+7dzd5eEAeGHJfd+W6+nflmGTOZ86GLWf4Ay3tXxe+E8AKz+CtmeeMs748IP8H+yRy3WwQdE94QDgavMNu/yJwg1xmI7Z0Xm2tU0MMPimmAXGTexzLSdJ0Kss/2YfjtKtRa26bs2iK7C+lAFr9Bbe6dXoJCtQmhZaBSOB/U0OUPxxfnHA6jn9agvQ0JW9j4BeNfanDs8bIOrJmk0QmOyD+UhaeelsGttcBk+BEjH9eg6xanwFx5HHuU+ZPxRYfuF2F6uQFZ7d1qEw7eXUyC2XzobzZejzxADdfnXn6DylY7EhSzvfT+h6RPtZnSTzorpZRTD7Z7KoBJv54oBqRrwqtHwM6+qCRj3Ax6Sdp0fnpuBfhmK/IOwZC20J5Xtgj6sNylpPiQ1fff5iS9anEcuBM/KyFXsps7AKK8514QoQ/7LtZTdgLo6KOd5gw9+XX0Gap2fKZEAhXiZa3aydmSEQjXqIYxKOoSxYAHHtrDpYYRSO23eLHs9RJR3pc/r0e+cOhNVQuCQqvalYV1TXkTDYsdXm3+jgSYCjZ3uUclx2d8pxruIdTBTZWggfkVUkzTNA/36CVII6qhsH6tm4UV1/Q9KWcQVc2YCBt0zN0gs8N3+B/VxPSYMAy+8Nz6n5Vh8PV36fhMqrVx8O2Ocj1YRs8wyjNcTgxeZHne3+F1S5b9f75uRcd8jlmLZ0Swa1KzdiSrIG9LeT6a7XrF2B8dkAzCbL0JHAAAAABJRU5ErkJggg==) no-repeat 0 0;
}
.ImageButton-filter{opacity:0;}

Thank you,
Pankaj Kumar
Fujitsu RunMyProcess Support


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/.
report_02_07.PNG

stor...@gmail.com

unread,
Jul 5, 2018, 5:42:09 AM7/5/18
to Fujitsu RunMyProcess Developer Community, stor...@gmail.com
Hi there.

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

stor...@gmail.com

unread,
Jul 23, 2018, 6:53:32 AM7/23/18
to Fujitsu RunMyProcess Developer Community, stor...@gmail.com
Hi there!

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 :(

withFilterAndSortable.PNG
withoutFilterAndSortable.PNG
theOptions.PNG

stor...@gmail.com

unread,
Aug 6, 2018, 7:32:50 AM8/6/18
to Fujitsu RunMyProcess Developer Community, stor...@gmail.com
Hi there.

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();

Reply all
Reply to author
Forward
0 new messages