Change Icon
Roelof_Luinge
Customer IT Monkey ✭
Hi,
We are using Service Request to create Operational Tasks for our Operations department. These tasks are automatically created (workflow and PowerShell). But We like to change the Icon for te OT. Is this possible?
Kind Regards,
Roelof
0
Best Answers
-
Geoff_Ross
Cireson Consultant O.G.
Roelof,
I suspect its a timing issue, the code is running before the grid loads.
To confirm, paste it into the F12 Dev console once the page is fully loaded and see what you get.
If so, you are going to need a timing mechanism, like a mutation observer to wait util the grid has been drawn and then run your code. As above, it will be hard to get this to work!
Geoff1 -
Roelof_Luinge
Customer IT Monkey ✭
Geoff,
Managed to make it work. I realised we using the "Assigned to me" So I put the code in the custom_assignToMeInGrid.js, made by Martin Blomgren. He also uses a observer.
This looks to works fine.
Thxs for your help
0 -
Matt_Medley
Member Advanced IT Monkey ✭✭✭
Hey Roelof, I'm glad you were able to get this to work. Thank you for using the Cireson Community!Roelof_Luinge said:Geoff,
Managed to make it work. I realised we using the "Assigned to me" So I put the code in the custom_assignToMeInGrid.js, made by Martin Blomgren. He also uses a observer.
This looks to works fine.
Thxs for your help5
Answers
It will be hard on the OOB pages. It might be easier to make your own custom page where you can control everything, including the icons, fully.
However, this may help.
$(".grid-highlight-column:contains('SR')").prev().html('<img class="gridicon" src="/Content/Images/Icons/WorkTypeIcons/Incident.svg" alt="Incident.svg">')
It takes all the rows where the ID contains SR and replaces it with the Incident icon. You will need to put your own custom icon somewhere is custom space and point to that.
Note, this will only do the ones currently shown on the page so when you go the the next set or results, you need to run this code again. Also, if the page auto refreshes the data, the icons will change back.
Geoff
I want to change the Icon of the TEST-OTxxxx.
Thanks. I Start with this. Maybe this is good enough for my users.
Roelof
I put this in my custom.js:
//Change OT Icon
$(.grid-highlight-column:contains('TEST-OT')).prev().html('<img class="gridicon" src="/Content/Images/Icons/WorkTypeIcons/OperationalTask.svg" alt="OperationalTask.svg">')
I placed (for testing) the OperationalTask.svg in the WorkTypeIcons folder. But the Icon don't change.
No errors in the console.
Any Idea's what to change?
Regards, Roelof
I suspect its a timing issue, the code is running before the grid loads.
To confirm, paste it into the F12 Dev console once the page is fully loaded and see what you get.
If so, you are going to need a timing mechanism, like a mutation observer to wait util the grid has been drawn and then run your code. As above, it will be hard to get this to work!
Geoff
After pasting in DEV console i get a Syntaxerror. No additional information.
Roelof
Managed to make it work. I realised we using the "Assigned to me" So I put the code in the custom_assignToMeInGrid.js, made by Martin Blomgren. He also uses a observer.
This looks to works fine.
Thxs for your help
app.events.subscribe("gridBound", function(event, grid) {<br> $(".grid-highlight-column:contains('SR')").prev().html('<img class="gridicon" src="/Content/Images/Icons/WorkTypeIcons/Incident.svg" alt="Incident.svg">');<br>});