Over the course of this guide, we have covered some basic knowledge and foundational skills for getting started with ServiceNow’s Service Portal. At this point you should be able to:

  1. Create a new Portal

  2. Style a Portal with a Theme and CSS Includes

  3. Create and Configure Portal Pages

  4. Create and Configure Widgets and Widget Instances

To grow your skills on Service Portal, there are multiple paths that you can pursue:

HTML and CSS

A great place to start is with HTML and CSS. Everything that you see in portal is controlled by these two languages. With CSS you can create a myriad of layouts, styles, visualizations, and animations to really set your portals apart.

Additional Reading:

  1. CSS Tricks Flexbox (Learn more about Flexbox CSS Layouts)

  2. CSS Tricks Grid (Learn more about Grid CSS Layouts)

  3. CSS Tricks Position (Learn more about positioning elements)

AngularJS

AngularJS is critical to success in Service Portal. Every Widget is powered by AngularJS. You will want to understand a number of subjects including Controller functions, data-binding, AngularJS Services and Factories, and Directives. Each of these concepts play a major role in the Widget Client Scripts and Angular Provider records in Service Portal.

Expanding on this, you may also want to explore UI Bootstrap, an AngularJS library that is included with Service Portal.

Additional Reading:

  1. AngularJS Tutorial (Learn more about Angular JS fundamentals)

  2. ngRepeat Directive (Learn more about ng-repeat)

  3. ngClick Directive (Learn more about ng-click)

  4. ngIf Directive (Learn more about ng-if)

  5. ngClass Directive (Learn more about ng-class)

Service Portal Bindings

Service Portal adds a number of custom bindings in AngularJS that simplify development, particularly jumping between Client and Server scripts. You will want to study the $sp’s GlideSPScriptable API, the shared options object, the shared data object, and the c.server object in the Client Script. Beyond this, there are still many other directives and services exposed by Service Portal to explore.

Additional Reading:

  1. GlideSPScriptable API Docs (Learn more about GlideSPScriptable API)

  2. Server Object in Client Script (Learn more about c.server)

Web Design

Little else matters in Service Portal if it doesn’t look good and respond well to user interaction. You will want to brush up on what makes a good web design. This is a combination of aesthetic and user experience design. Some of these aspects are subjective but others are carefully studied patterns. Look at sites that you love. Explore the sites that you enjoy using. Also explore the ones you hate. What makes one site great and another horrible? Asking questions like this and taking a closer look at the design will help you learn.

Anyone can design, the first step is to shake the idea that only certain special people are capable of it. If you want to learn design, the first step is to go where designers go.

Additional Reading:

  1. UI Patterns (Learn more about UI patterns)

  2. Awwwards - Award Wining Websites (Learn more about award wining websites)

  3. Dribbble - Designer Community (Learn more about Dribbble)

Conclusion

Hopefully this guide has helped make Service Portal more approachable. Many shy away from Service Portal thinking it is too complicated or challenging. In reality, with just a quick walkthrough most folks can pick it up fairly quickly. If you ever find yourself struggling or in need of direction as you continue your learning, always feel free to reach out.