2

I am a ServiceNOW Developer. Recently, ServiceNOW replaced their Jelly based Content Management System with an AngularJS based Service Portal. This interface uses AngularJS widgets for display and data manipulation including the ability to create custom widgets. However, the fulfiller interface is still Jelly based.

ServiceNOW has constructs called UI Macros and UI Scripts that can be used within the Jelly interface to develop UI modules for which OOTB constructs are unavialable, like the widgets in the Service Portal. I tried to create an AngularJS based UI Macro that referencess the AngularJS App/Controller through an include of the UI Script that contains them. I created a mirror widget for the Service Portal that uses, essentially, the same AngularJS App/Controller.

The widget works beautifully in the Service Portal. The UI Macro works beautifully in the Service Catalog view. However, when the same UI Macro is included in a fulfillment record, it no longer functions correctly. The console logs indicate that there is a Controller conflict.

I am guessing that where ServiceNOW is inserting my UI Macro is in the middle of another AngularJS Application for which there is no expectation of another AngularJS application, only Jelly.

Therefore, my question is, is there a way to encapsulate my AngularJS Application/Controller in such a way that it will function completely on its own or if it is inserted into some other AngularJS Application/Controller i.e. that it is truly bulletproof and independent of what may be around it?

FYI: The results of a ServiceNOW HI Incident regarding this issue was that UI Macros should only be Jelly. However, the idea of having to maintain two completely different technologies for the same thing is not appealing. Therefore I am exploring all possibilities.

Thank you in advance.

Respectfully, Robert

1 Answers1

0

One option which is common in servicenow is making use of <iframe> HTML elements, it gives you the ability to have a separate page with a separate scope and a separate JS window object (will not conflict with the internal angular app)

You can encapsulate every thing in a UI page, consider it your Angular JS app main file and you can refer to this UI page like below:

<iframe src='https://<YOUR_INSTANCE>.service-now.com/<YOUR_UI_PAGE_NAME>.do'></iframe>
Abdo Adel
  • 1,177
  • 2
  • 17
  • 30