AngularJS: Developing Modern User Interfaces

For those of you who did not attend K15, you missed out on a killer lab on AngularJS by Tyler Jones and Will Leingang. If you missed it and would like to check it out, it's now available through the community. Lab Overview: You have probably noticed that many new ServiceNow applications are built using AngularJS. In this lab, you'll create your own app and see how AngularJS and ServiceNow can work together to create incredible things.  Prerequisites: ServiceNow administration; Scripting in ServiceNow, Basic HTML, JavaScript and AngularJS. AngularJS_Lab_Guide.pdf 1.4 MB AngularJS_Slides.pdf 1.2 MB AngularJS_Update_Set.xml 9.8 K

Looking for the best portals on ServiceNow!

It never fails to amaze me the incredible custom applications and portals customers and partners around the world are developing on the ServiceNow platform. Using everything from CMS, Processors, UI Pages, Angular.js, Backbone.js, Bootstrap, Service Portal. It's been a huge inspiration for me and as part of the ongoing effort of this website, I would love to start featuring some of portals and applications you guys build. So with that, if you have a portal or custom application that you would like to showcase, please email me a few screen captures to: nathan@servicenowcms.com. Make sure to include some details about the project such as: what technologies was used, which plugins do you interface with (e.g. knowledge base, service catalog), did you develop internally or work with a partner, and how has it impacted your organization. By emailing me you are granting permission to post the screen captures and details on this site.

UPDATED: Bootstrap.js & Prototype.js in Fuji

I've been getting a ton of emails lately about the persistent issues with Bootstrap.js dropdowns, accordions, or other JavaScript based Bootstrap components in Fuji. This is caused by Prototype.js (not really a big surprise). This issue has existed as long a CMS has been around, however what is specific to Fuji is that all the usual tricks and workarounds have stopped working. Previously I released a couple workaround but they were not complete and issues remained. I think I finally have a solution that seems to work and I have yet to find a case where it does not. The solution is to replace Bootstrap.js (which relies on jQuery) with "Bootstrap Prototype" which is available here: https://github.com/jwestbrook/bootstrap-prototype You can still include jQuery (with noConflict()) and use as needed, but this will get all your drop down menus and Bootstrap components working with Prototype. HTML: [crayon-5a13aae04b440395549655/] UI Script: (name: "prototype-bootstrap") [crayon-5a13aae04b44a173676919/]

Service Portal

I've been heads down for a while now working on the new ServicePortal, but today I wanted to give you guys just a quick review of what we're working on. Here is some quick bullet points on Service Portal: Service Portal is an alternative to CMS but not a replacement Portals are built using Twitter Bootstrap and Angular.js Features a customizable knowledge base and service catalog without the use of iframes Supports "record watching" for near realtime widget updates Live ticket chat Fully responsive for mobile and tablet Portals built using a powerful drag-n-drop designer I'm very excited about the Service Portal and the opportunities it will create for both partners and customers to develop feature rich beautiful interfaces on ServiceNow. Below are some quick snap shots of the sample portal we have built. It's still a work in progress and will most definitely look different by Geneva, but for now... here are some sample screen shots:

The New Service Portal

For those of you who didn't see Fred Luddy's keynote at Knowledge 15, you missed the demo of the new Service Portal. Although it is not necessarily a direct replacement for CMS, it does address a lot of the major issues of the current CMS and introduces several new features, such as: responsive service catalog & knowledge no iframes no prototype.js built with Bootstrap & Angular.js simple drag-n-drop interface customizable widgets realtime chat For a sneak peak of what's to come, watch Fred's keynote on the community: https://community.servicenow.com/community/knowledge-user-conference/knowledge15/highlights/keynote-day-2

Bootstrap Dropdowns in Fuji

I've been getting a lot of email lately about Bootstrap dropdowns no longer working in Fuji. Even some of the old JavaScript solutions that seemed to resolve the conflicts between Prototype.js and Bootstrap.js no longer seem to be working in Fuji. The issue is being worked on and hopefully should be resolved in an upcoming patch, however until then I offer this simple, hacky but working solution: [crayon-5a13aae04cf8a886520169/] In the few cases where I have tested this, it seems to resolve the problem and dropdowns go back to working as usual.

ServiceNow CMS issues in Fuji

If you have upgraded to Fuji you might have discovered that it caused some issues with your CMS portal. The main issues being: A modified version of Twitter Bootstrap is already included Not all UI scripts execute The version of bootstrap that is included has some changes to it (such as modified media queries) that can cause some negative side effects to your site. The good news is that it can be disabled by creating a system property called "glide.ui.heisenberg.exclude" and setting it to "view_content". Once set, you will need to include your own version of Bootstrap if needed. The issue with UI scripts will be fixed in Fuji Patch 2, however the work around is to include empty script tags (<script></script>) in front of all your existing <script> tags. The issue is that it is skipping every odd numbered script tag. Example: [crayon-5a13aae04db87019822265/] Only alert 2 and 4 would be executed. So until you are able to upgrade to Fuji Patch 2, the solution is to include the extra script tags.

Custom Content Block Types

This is one of those secrets I wish I would have discovered years ago because it really opens a world of possibilities within the CMS. This method was revealed to me by Brian Alson. There's a few other ways of creating custom blocks types like this, but this one is by far the easiest. If you're creating a block that will contain "child" records, such as a slideshow, then I would suggest extending the child table from "content_link" table and either create a M2M table or a parent reference field back to the content block. I would love to hear your comments or feedback if you guys find this useful.