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.
Founder of 
Thank you Nathan!
You’re welcome!
Thank you for the update!
Thanks Nathan. Do you know if Angular 2 will be used?
No, Angular 2 is not out of Beta yet.
Service portal is really awesome. Good job Nathan.
Thanks Nathan! I appreciate a lot a no-marketing-bullshit source of information about the new portal solution in ServiceNow. Please keep this blog up.
Can you give a hint of what areas of the Service Portal are likely to change between Geneva and Helsinki? What version of Angular is going to be used?
Thanks Victor,
I can’t cover specifics but I’ll say in Geneva it was a cool POC… in Helsinki it’s a full product. We’ve also done a pretty good job with staying up to date with the libraries we use.
Hi Nathan,
This looks awesome.
I have upgraded my developer instance to “Geneva”.
I tried to find out the portal designed using “Angular JS” but i could not find it out.
Is there any plugin that I have to enable to get this portal in instance.
Deepak,
The plugin is installable only by ServiceNow and requires participating in the ‘technology preview’ program. Being this close to Helsinki, I don’t think they are accepting any more applicants.
how can we create system widget like create incident in service portal
we have drop down in one page how can we create dropdowns
Hi Deepak!
Just a short hint, you can activate the new service portal on Geneva too. Just activate the plugin called K15 Demo. After that you’ll be able to show the new portal by typing /sp to your instance URL.
Greets, Jan
Thanks alot for sharing, Nathan
Tack Nathan,
Very informative post.
i’m a bit curious on how the SP will work with Domain separation.
Will we still be forced to create 1 site per domain?
Daniel,
Any portal in Global is available to all domains, portals created in specific domain are restricted to that domain or users in Global.
Thanks for sharing. It’s really awesome.
Thanks for the update, having designed with bootstrap outside of servicenow it will interesting to see how the classes will play out. Look forward to seeing header/footer changes. Thanks!
Really cool post. I’m excited to try this out. Is there drag and drop for the bootstrap containers? Is there an option for visual drag and drop layout and a layout built with strictly with code?
Very well summarised. Understanding differences and new features in Geneva in brief is very useful. Thanks Nathan.
Good Summary Nathan!
Hi Nathan,
Do you know if the SN platform will support Angular elements such as widgets and rectangles in other forms? I.e. If I develop some cool widget for the Service Portal could I also drop it onto an Incident form for example?
Cheers Tim
Service Portal widgets only work inside service portal
Thanks Nathan. Do you have any visibility if that level of component flexibility (i.e dropping widgets into other areas of SN) is on the radar for future releases?
Nathan, what is your recommendation on using ServicePortal in Geneva vs. waiting for Helsinki?
Is there a smooth transition?
In my opinion, Geneva is not production ready. Helsinki is a huge step up and much more feature complete. I would not expect to be able to upgrade as a lot has changed.
Hi Nathan,
Loving this new portal.
I know that the plan is to release this as part of Helsinki – but I’m wondering if at that time it will also be available for general consumption (beyond just technology preview) in Geneva, as a plugin.
Ideally, I’d like to use Service Portal in Geneva, without upgrading right away to Helsinki.
Thanks!
Nathan,
We’ve already started using bootstrap in Geneva with your excellent guidance, and the direction you’ve laid out here looks very promising! Thanks for taking the time to socialize, it’s tremendously helpful. Quick question – we often end up wrapping service catalog items into our portals with iframes (ick), and we’re stuck with the ‘stock’ look and feel. Will we ever get a way to either roll our own catalog item forms or be able to customize the stock ones? If not, please consider this a request 🙂
Thanks!
Anthony
Hey Anthony,
Yes… Service Catalog has been reimplemented in the form of widgets in Service Portal and is much more user friendly and customizable… and best of all, no iframes 🙂
Hi Nathan.
It sounds like it might be a waste of time trying to customize the look and feel of Geneva’s SC, when it will be front-ended by Service Portal going forward.
Will a Service Catalog built out in Geneva be functionally the same, just styled by the Portal?
Matt, the catalog items in SP use the same back end API’s as the platform catalog… however in Service Portal everything is a widget so the look and feel, logic, and functionality is not always the same. It’s a lot more than just styling. As you work in Geneva make sure your catalog client scripts use the new mobile friendly API.
Hey Nathan,
Looks great! Is the bootstrap being used OOB Bootstrap or one that’s built specifically for Servicenow. Also does it include the Bootstrap javascript or just the css?
Dan
Dan, I cannot comment on Helsinki since it has not been released yet but in Geneva it had a clean copy of Bootstrap with some utility and theme styles added. The JS files are included.
Nice site!
Would it be an awful time to begin learning about the CMS then? Would a beginner be better suited to invest time in AngularJS and bootstrap?
Curious as I’ve yet to learn much around this so would appreciate your thoughts on “What a beginner should do”
Cheers
Even though Service Portal will be out soon, there will still be a ton of organizations still using CMS. So I’d suggest learning both.
Nathan Great Post!
Is service portal plugin available in Geneva version, other than the knowledge 15 demo version ?
Is it possible to implement in a live instance on Geneva patch 7 without upgrading to Helsinki ?
Thanks
Sankar,
No and no. Even if you were to take the K15 version and build out your portal (like some customers did)… it would be a nightmare to upgrade to Helsinki. My suggestion is to not even install the plugin in Geneva and instead upgrade to Helsinki.
how can we create a system widget like create incident in service portal with pages
Can I make two different homepages for two different customers in a single Portal?
I’m sure you could… but a better practice would be to have one portal for each customer since all the pages, content, and widgets would still be shared between each portal record.