Animate ServiceNow with jQuery and Prototype Effects!

/, System UI/Animate ServiceNow with jQuery and Prototype Effects!

Animate ServiceNow with jQuery and Prototype Effects!

A

while ago, I was trying to figure out how I could add some javascript animations and effects to a ServiceNow instance. What I really wanted was something like the jQuery Effects API but I didn’t want to have to incorporate a separate API and deal with the loading the bulk of jQuery everywhere in the instance. I knew that ServiceNow provided some limited collapse/expand effects but I was hoping for a little bit more.

I’m happy to report that I found it! Somebody smarter than me decided to convert the jQuery effects library for use with Prototype (which ships with ServiceNow) and incorporate those effects and animations directly in ServiceNow.

ServiceNow Prototype Effects

This effects collection includes the ability to animate, slide, toggle, and fade most dom elements and works just like the jQuery library. Best of all, it’s all laid out in a simple UI page directly in your ServiceNow instance! You can view this by navigating to the following URL…

https://demo.service-now.com/prototype_effects.do

So far, I’ve found this to be useful in some custom UI pages and a collapsible CMS menu I built. I’m planning on posting the collapsible menu solution sometime soon. Post a comment here if you come up with a cool solution using some of these effects!

By | 2018-07-09T14:59:58-06:00 August 9th, 2011|Categories: Client scripts, System UI|Tags: , , , |10 Comments

About the Author:

10 Comments

  1. Travis Castleman August 9, 2011 at 11:33 am - Reply

    This is really awesome! Thanks Guru!

  2. Michael Bartkowiak August 9, 2011 at 1:02 pm - Reply

    Looks cool. Would love to check this out, but it looks like demo is down. 🙁

    • Mark Stanger August 9, 2011 at 2:44 pm - Reply

      You should be able to check it out in your own instance too. It’s actually been around for a while now.

  3. John Caruso March 23, 2012 at 8:12 am - Reply

    Mark,

    You say: “I didn’t want to have to incorporate a separate API and deal with the loading the bulk of jQuery everywhere in the instance.”

    Could you elaborate on what the concern is? Is it that difficult to incorporate the jQuery library, or point to a CDN hosted version?

    With the fairly widespread adoption of jQuery in the last few years, I would think ServiceNow would want to include jQuery as base instance feature.

    John

    • Mark Stanger March 23, 2012 at 11:06 am - Reply

      There’s absolutely no problem with jQuery itself. In fact, it was included at one point in the default setup and is actually still included as an inactive UI script. Including it isn’t a big issue, but it does have an impact on client-side performance since that data needs to be sent to the client and then parsed by the browser’s javascript engine all the time. Any time you can limit the amount of script sent to the client you should. In this case, it’s a pretty large script library that you’re using so you should be especially careful about it. jQuery is great, and offers a lot of plugins that Prototype (and other libraries don’t), but I would only use it as a last resort. I love to use Prototype (which is the standard ServiceNow library) whenever I can.

      • John Caruso March 23, 2012 at 1:40 pm - Reply

        Mark,

        Is there a way to include it but point to a CDN host (see: http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery )? Since there are so many sites using jQuery now, it is likely the user will have a CDN version cached already.

        Good point though about the need to be parsed by the browser. It’s exactly your point about the plugins (like jQuery UI – something I think would be very useful on the CMS side) that would be nice to leverage.

        Having multiple javascript frameworks is not very desirable though. I just wish ServiceNow had standardized on jQuery – as that is what I’ve focused my attention on for the past couple years!

        Guess I’ll be learning Prototype, now. 🙂

        Any suggestions on books / learning resources for Prototype?

        John

        • Mark Stanger March 23, 2012 at 2:02 pm - Reply

          The best way to point to a repository like that is to use a global UI script. As far as prototype, I use the standard Prototype API doc. You can find a link to it in the ‘Scripting Links’ section at the bottom of the page.

  4. murtaza July 8, 2013 at 7:29 am - Reply

    This is a great tutorial , we can include Jquery plugins and effects in SN

    Thanks SN guru

  5. Subhash Uniyal April 16, 2014 at 11:19 pm - Reply

    Amazing as usual, many thanks!!

Leave A Comment