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.