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.
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.
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.
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 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
- 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
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.