Creating ServiceNow Cards

[rightpalava]

I'm a fan of making visually pleasing, useful applications and elements within ServiceNow.   For a bit of a project, I've created what I'm calling 'Cards' for ServiceNow and in this example have produced a visual, interactive and fast (i.e. instant) Address Book that renders data from the sys_user table in 'Card' form, which are searchable as you type - a la Google and move around in a fluid motion.

When clicked, the full 'Card' is returned in a Modal window displaying further information.   Like searching, this is all instant, with zero delay and no page loads.   It's all on the fly.

Have a look at the short youtube clip to see it in action and you can read more about it on my blog post here: Address Book "Cards" for ServiceNow - rightpalava - along with the code and steps to create it.

It makes use of Bootstrap, Isotope and some custom UI Macros as well as a UI page.  

The same principle can be used for making visual service catalogues and well, any other data too.   I'm working on a application that will allow ServiceNow admins to build these 'Card' pages through selecting options such as tables and fields to display.   Once this app is done and tested, I'll post it on the ServiceNow Share site.

For now though, I'd be interested to know what YOU think of it as an idea and how it can be developed - like this post if you like the 'Cards' and leave some comments below.

Here's the video...

[rightpalava]

It never made it to share!

I'm going to be re-doing this and will sort it properly, just need to find

the time,

Thanks for the comment

[NeilH2]

Hi Adam

How compatible is this with Knowledge Base in Fuji?

Neil

[rightpalava]

Hi Neil, it could definitely be used for the knowledge base, even in Fuji

I'm planning on putting together a proper download for it next week if that helps.

[NeilH2]

Hi Adam

Yes it would

[Oliver D_sereck]

Hi Folks,

I found this last week and its a great idea and implementation. Since a customer of ours wanted this, I couldnt wait until a full update set or share would be released and put everything together myself. Since this is the work and idea of rightpalava, I thought I would release my version for everyone to use and maybe help Adam a little since he is bogged down with work

The attached xml is a uipage, callable using phonebook.do and has been updated in the following ways:

- No ui macros but rather direct includes to bootstraps theme & css and isotope via CDN (if you go productive, you can gladly move the css and js internally. Check out Adam's original cards.zip which included some good ideas with ui macros loading up the css: http://rightpalava.com/downloads/cards.zip )

- Cleaned, commented and indented all code.

- Removed jQuery and Bootstrap JS includes since these are included with ServiceNow (developed on Fuji, tested on Fuji and Geneva)

- Updated the script part to use $j instead of $, also removed all the default isotope functions not needed (check Adams original or the isotope site for those functions if needed)

- Updated the modal with header, body and footer

I have left out hover.css but if you want to use this fun css:

1. Include it:

<link ref="stylesheet" href="//cdn.bootcss.com/hover.css/2.0.2/css/hover-min.css"/>

2. Update the override style (the css includes a display that breaks the nice look):

.hvr-grow {display:block!important;}

3. Replace "grow" with "hvr-grow" (somewhere around line 51)

I have noticed that very large data sets would cause this to be very slow (ergo unusable for a customer). At ~1000 Users, this works great. At 2000+ it takes very long to load due to the amount of HTML being generated through the jelly. So I would suggest also implementing AngularJS and only start getting data once the User starts searching for someone. Also limit the amount of data retrieved to 200 to ensure speedy searches.

Remember: Using isotope in a productive environment still requires a license ($25 for 1 developer),