UI Script - redefine angular directive in ServiceNow

Andrii
Kilo Guru

Hi,

very interesting task I've got - I need to modify/replace part or whole angular directive that is used in ServiceNow, but not available for editing.

So I know the name of app, the name of directive - I have the code (read-only) ... but I don't know how to replace code of that directive with my own code - because I need to change behavior according to requirements.

Any good ideas superSnowMen?) May be with UI Script somehow?

1 ACCEPTED SOLUTION

Andrii,



I got my hands on a Helsinki dev instance. I installed the plugins that bring in the Demand Workbench. And I apologize but I didn't know that the Demand Workbench really isn't a Service Portal page. I assumed that it was because of the angular script you presented. So, I started digging more into to see what I can learn about it.



It looks to me that this is a UI Page that is only accessible on the ServiceNow side of things where only ServiceNow employees can touch the actual code. Or it could be generated from a Processor. Knowing the ServiceNow Platform you can usually override parts such as UI pages, UI macros and UI scripts by creating the same type within your instance with the same name. Then when the system runs it will use your custom page/macro/script instead of the OOB.



On the instance I was using I couldn't find the UI Script holding the angular script (sn.bubbleChartVisualization). So, I couldn't create a UI Script with the same name because I didn't know the actual name of the UI Script. I ended up taking a different route. I created a UI page with the script taken from the $demand_workbench page (recovered via Inspect Element > Sources click on $demand_workbench.do?.... ). I named the UI page demand_workbench.



I gave it a try and looked like everything worked as normal as I tried all the features comparing to the OOB $demand_workbench page. Then I created a UI script with the script you posted to disable the bubble context menu. Brought that UI script into the UI page (<script></script>) and that seemed to work; meaning the bubble context menu was disabled.



Below is the screenshot of the custom demand workbench page:


demand_workbench.png



Keep in mind I didn't do a thorough test of it. But I thought it might give you some ideas of what can be done. That whole process really took about 10min since all of the code was already done.


I hope this helps in some way.



Here's a screencast overview of what I did. (Excuse the recording. It's not the best)


Custom Workbench UI Page


View solution in original post

12 REPLIES 12

I forgot to add:



If you test everything and it all works out. Then just rename your custom demand_workbench UI Page to $demand_workbench and the system will use that page instead of the OOB.


Yes, indeed. It works.



I had an idea of creating my UI Page based on OOTB, but you did it first and thank you for that.


I have no access to the custom workbench UI page is there any possibility you could post it again I'm looking for a way to change the axis scale and I might find a way to do it if I replicate the page.