your one source for IT & AV

Training Presentation Systems Services & Consulting Cloud Services Purchase Client Center Computer Museum
Arrow Course Schedule | Classroom Rentals | Student Information | Free Seminars | Client Feedback | Partners | Survey | Standby Discounts

Service Portal Advanced

SS Course: GK821289

Course Overview


This two-day interactive course takes attendees on a Service Portal and Widget development deep-dive. Participants learn how to use their existing AngularJS, Bootstrap, CSS, HTML, and ServiceNow API (JavaScript) skills to create custom Widgets and advanced Search Sources.
Attendees will:

  • Review the Widget Editor.
  • Discuss Widget development strategies.
  • Learn how to use built-in AngularJS directives, services and ServiceNow s Service Portal APIs.
  • Explore Widget properties.
  • Develop their own custom Widgets.
  • Learn which 3rd party libraries and resources are installed in the platform.
  • Develop re-usable Widget Dependencies, Angular Providers, and Angular ngtemplates.
  • Discuss how to embed a Widget in another Widget.
  • Review different ways for Widgets to communicate with one another.
  • Explore how Widgets send/receive information.

These objectives are achieved through a combination of demos, lecture, and group
discussions. Lab exercises woven throughout the class walk students through practicing every technique discussed.


Scheduled Classes

05/11/23 - GVT - Virtual Classroom - Virtual Instructor-Led
06/08/23 - GVT - Virtual Classroom - Virtual Instructor-Led
06/29/23 - GVT - Virtual Classroom - Virtual Instructor-Led



Module 1: Service Portal Review

  • This module is a high-level review of the components from the Service Portal Fundamentals course that are relevant for this class.


  • Define a Service Portal.
  • Review the fundamentals.


  • Lab 1.1 Create a Service Portal

Module 2: Widget Development 100

  • Learn how to develop Widgets using the fields accessible via the Widget Editor.


  • Introduce a Widget development strategy.
  • Understand how a Widget transfers data between the server and the client.
  • Learn how to use built-in AngularJS directives, services and ServiceNow s Service
  • Portal APIs.
  • Discuss Widget debugging strategies.


  • Lab 2.1 Load Initial Data from the Server
  • Lab 2.2 Display Initial Data to the User
  • Lab 2.3 Accept and Process User Input

Module 3: Widget Development 200

  • Review the remaining fields in the Widget record (accessed via the Form view in the Platform UI).


  • Explore AngularJS expressions.
  • Review how to apply style to Widgets.
  • Discover how to add and use Widget Options.
  • Learn how to manipulate the DOM using a Link Function.


  • Lab 3.1 Using Expressions
  • Lab 3.2 Sorting Lists and Using recordWatch()
  • Lab 3.3 Widget Options
  • Lab 3.4 Custom Widget Options (Optional)
  • Lab 3.5 Write a Link Function

Module 4: Widget Development 300

  • Focuses on reviewing each of the Widget record s Related Lists.


  • Explore additionally installed external libraries.
  • Discuss Widget Dependencies.
  • Learn about Angular Providers.
  • Review Angular ng-templates.


  • Lab 4.1 Explore AngularJS and UI Bootstrap Directives
  • Lab 4.2 Dependencies and 3rd Party Directives
  • Lab 4.3 Create a Custom Directive
  • Lab 4.4 Create a Custom Service

Module 5: Widgets Working Together

  • Focuses on how Widgets can be embedded and communicate internally and externally.


  • Discuss how Widgets can be embedded within another Widget.
  • Review how Widgets Communicate.
  • Explore how Widgets send/receive information.


  • Lab 5.1 Embed the 'form' Widget in a Modal
  • Lab 5.2 Communication Between Widgets
  • Lab 5.3 Make a REST API Call



      Who Should Attend


      This course is designed for pro-code System Administrators and Application Developers who want to learn how to develop advanced Service Portals components. You will be expected to script.