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!

Date Posted:

August 9, 2011

Share This:

10 Comments

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

    This is really awesome! Thanks Guru!

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

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

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

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

      • Michael Bartkowiak August 10, 2011 at 10:49 am

        Awesome! Really cool stuff. Thanks Mark.

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

    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

      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

        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

          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

    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

    Amazing as usual, many thanks!!

Comments are closed.

Categories

Tags

Loading

Fresh Content
Direct to Your Inbox

Just add your email and hit subscribe to stay informed.