Service Portal in Geneva Overview

Service Portal was released as an opt-in technology preview in Geneva, but up until now not much has been posted about it. Over the next few weeks and leading up to Helsinki, I will be doing a series of posts with some basic information on the Service Portal in Geneva to help prepare you guys for the full release. NOTE: A lot is changing between Geneva and Helsinki. Any information provided will likely change by the time Helsinki is released. Service Portal is built with Angular.js and Bootstrap, but the real power is in the fact that it sits on top of ServiceNow's powerful server side scripting and GlideRecord. This makes for a very powerful combination that can integrate with any application or data across the platform. The 4 primary components of Service Portal is Portals, Themes, Pages, and Widgets. In this post I will provide a quick overview of each. Portals The portal record is what ties it all together. The portal is very similar to "sites" of CMS in that it has a URL suffix and a reference to theme. Themes Unlike themes in CMS, themes in Service Portal are not just limited to stylesheets. A theme is comprised of a header and footer (which are really just widgets), CSS variables (similar to LESS or SASS but with a slightly different syntax), CSS Includes, and JS Includes. Pages A page is made up of a layout which is comprised of containers, rows, and columns (based on the Bootstrap grid) which then reference widgets. The reference from a column to the widget is through a M2M table called "rectangle". Containers can be either fixed or fluid width and contain rows Rows only function is to contain columns Columns is where the responsiveness of the grid is defined. A column sets the size (out of 12) that it will occupy at various resolutions (mobile, tablet, desktop, large desktop). Rectangle has two functions: associate a widget with a column and also store the meta data for the instance of the widget. For example a "Carousel" widget could store "slides" on the rectangle record. Because the meta data for each widget might be different, the rectangle table can also be extended by additional tables. To see an example of how this all ties together, see the following diagram: Widgets Widgets is where the HTML and server & client side logic lives. All content on a page lives inside a widget. The properties of a widget are: HTML - the template for the widget JSON Data Producer - server side JavaScript evaluated through Rhino Client Script - the controller for the widget Data Table - the rectangle table the widget uses for storing meta data Fields - the fields on the rectangle table the widget uses Widgets use Angular.js for handling data bindings between the controller (client script) and view (HTML). Also any output from the server side JavaScript (JSON Data Producer) is also automatically available on scope. One of the most impressive features of a widget is how a controller can communicate with the server side. To see a good example of this, consider the following example widget, the Data Table. The important part to note is how the view has ng-click="go()" which is a call to a method on the controller, which then makes a call to the server side, fetches and returns the content to the controller which then updates the scope in view. This is amazing, it's a mini application all inside a widget with both server side fetching of data and client side logic. That's all I'm going to cover in this post, but hopefully that gives you guys a quick taste for what was in Geneva and the even more exciting full release of Service Portal that is coming in Helsinki. If you have any questions, please post them in the comments below. is now

With the new upcoming Helsinki release which will introduce ServicePortal, I have decided to change the name of this site and focus primarily on the new Service Portal. In the near future I will be working on many new tutorials and step by step introductions on how to build portals and custom widgets using Service Portal. Stay tuned!

Service Portal Update

I’ve been getting a lot of inquiries about the release of Service Portal so I wanted to send out a quick update. Service Portal is being released in Geneva only as an opt-in technology preview. What that means is, it can be enabled only by ServiceNow, is for evaluation purposes only, and not for production use. Service Portal is scheduled to be fully available in Helsinki. To partake in the Geneva technology preview of Service Portal, please contact your ServiceNow support representative. For an inside look at the technology behind Service Portal, Dwight Gunning has put together a Google Doc.

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: 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: 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-6519242c7577e654649587/] UI Script: (name: "prototype-bootstrap") [crayon-6519242c75788027636151/]

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: