service portal, angular, ng-animate, ng-view

scottl
Kilo Sage

What I'm trying to do is animate between pages with a sliding effect or even between widgets.   I've tried including it into the theme and even as a "dependancy", no luck.   Clicking "include on page load" within the widget dependancy, crashes the page also.     Has anyone successfully implemented this into their portal?   If so how was it done as it seems we do not have access to add to the original app creation method to include this dependancy onto the page, nor add "ng-view" to the page container?

8 REPLIES 8

Ivano B
ServiceNow Employee
ServiceNow Employee

Thank you Chuck


fschuster
ServiceNow Employee
ServiceNow Employee

You could also just open up any portal page and then use the Console to find out what version is running. Right-click-> Inspect -> Console -> type "angular.version".


angular.version.png


fschuster
ServiceNow Employee
ServiceNow Employee

You don't have to create a new dependency for ngAnimate to work - Service Portal ships version 1.5.3. If your 3rd-party Angular library requires ngAnimate you should therefore technically not have to do anything, the only thing might be, that they require a different version. In that case you would probably have to create a new dependency and change the he "ngAnimate" module name to e.g. "ngAnimateNew" and replace all references to it, so it doesn't collide with the Service Portal version.



I just created a little example of an ng-repeat animation, as well as an ng-show animation to show a second widget on click of a button in another widget.



Here's a short video of how that looks like. I also attached the update set, containing the two widgets and the test page.




-Frank


Ivano B
ServiceNow Employee
ServiceNow Employee

Hi Frank



Thank you very much...for the video and the information.


Anyway I've found the issue in my code...and was a very stupid one.


Before importing the new library i've tried to check if animate was already in the system without obtain great results.


After your answer I reviewed the code realising that the CSS used by animate was messed up