Service Portal Introduction

 Service Portal Overview: Service Portal is a user-friendly interface

for ServiceNow that allows users to access services, incidents,
requests, and more, without interacting directly with the backend. It's
designed for end-users and service desk agents to efficiently interact
with ServiceNow data.
 Widgets: These are the fundamental components of the Service
Portal. They encapsulate functionality and UI elements. A widget can
represent a catalog item, a list of incidents, or a search bar, among
other things.
 Pages: The layout or structure that holds widgets together. Pages can
be customized and configured for different user groups.
 Themes: Themes allow for customization of the look and feel of your
portal, including branding, colors, fonts, etc.

Create Brand New Portal & Understand Portal Architecture

 Portal Architecture: The Service Portal consists of pages (UI

layouts), widgets (reusable UI components), and themes (styling).
Pages organize widgets, while widgets display the actual data and
handle user interactions.
 Creating a Portal: You can create a new portal by navigating to the
Service Portal configuration in ServiceNow. You define settings like
name, description, and theme here.
 Widgets and Themes: Custom widgets can be developed or existing
ones can be reused. Themes control the global look and feel of the
portal.

Create Menu & Fetch Task Details To Show

 Menus in Service Portal: A menu is a navigational element that

allows users to access different sections of the portal or perform
actions like creating incidents. Menus can be configured with different
options, such as dropdowns or tabs.
 Fetching Task Details: Using GlideRecord, you can query
ServiceNow tables to fetch task details (e.g., incident or request data)
 and display them on the portal. This is typically done within a widget to
dynamically display data.

Query Incident Table and Show in Table

 GlideRecord: This is a Server-side API that allows you to query

ServiceNow tables and retrieve data. In this context, you would use
GlideRecord to query the Incident table and return a list of incidents.
 Displaying Data in Tables: You can use AngularJS to render data in
a structured table format on the portal. This includes functionalities
like sorting, filtering, and pagination.

Call HTML to Client Script Function

 Client Scripts: Client scripts in ServiceNow are used to perform

operations in the user's browser, like validating fields, making
asynchronous calls, or dynamically updating the UI.
 HTML and AngularJS: This tutorial would teach you how to interact
with HTML elements on your portal page using AngularJS. For
example, you might trigger a function when a user clicks a button.

Call Client Side to Server Side Function

 Server-Side Scripting: To interact with server-side logic from the

client-side, you use Script Includes and GlideAjax. A client-side
script (JavaScript) makes an asynchronous call to a Script Include on
the server to fetch or process data.
 Asynchronous Calls: This process allows you to execute functions on
the server and return the result to the client-side, without reloading
the page.

Widget Reusability and Data Model

 Reusability: The ability to design widgets that can be reused across

different parts of the portal. This is achieved by designing widgets that
are configurable (via options) and modular.
  Data Model: This is the design of how data is structured in
ServiceNow, such as how incident data is represented, and how this
data is passed to widgets. A good data model makes it easy to retrieve
and manipulate data across widgets.

Widget Reusability and Options Schema

 Options Schema: The options schema defines the configurable

parameters for widgets. These parameters allow you to modify widget
behavior without changing the widget’s code. For instance, you might
configure a widget to display incidents assigned to a specific user by
passing a parameter to it.

OOB Widget and Pages

 OOB Widgets: ServiceNow provides a set of out-of-the-box (OOB)

widgets, like the Catalog Item widget or Knowledge Base widget,
which can be configured and used in Service Portal without writing
custom code.
 Pages: These widgets are embedded in portal pages, and the user
interacts with them to submit requests, search for knowledge articles,
or view service catalog items.

Typeahead Search

 Typeahead Search: This is a predictive text search feature that

suggests results as the user types in a search box. It’s commonly used
for searching through long lists, like incidents or catalog items.
 ServiceNow Integration: You’ll implement the typeahead search
using AngularJS and query relevant ServiceNow data (like incidents or
catalog items) as the user types.
spModal Popup Window Dependency

 spModal: spModal is a ServiceNow widget used to create pop-up

windows. These are useful for displaying additional information or
forms without navigating away from the current page.
 Dependencies: You can use modals to show dependent data or forms
when a user performs certain actions.

spModal Popup Call Widget from Current Widget

 Embedding Widgets in Modals: You can open another widget inside

a modal by embedding it dynamically. This is helpful when you want to
display related information or forms in a pop-up without leaving the
page.

spUtil Show Info and Error Message in Client Script

 spUtil: This utility allows you to display messages in the Service

Portal. You can use it to show info, success, or error messages to users
based on their actions (e.g., when submitting a form).

spUtil Record Watch Dependency

 Record Watcher: The Record Watcher is a feature that allows you

to watch for changes in a record (like an incident or request) and
automatically trigger certain actions when those changes occur.

rootScope & Broadcast - Send Data One Widget to Another

 AngularJS Communication: Using $rootScope and $broadcast,

you can pass data between widgets in the same page. For example, a
widget that fetches user data can pass it to another widget that
displays that data.
Widget Embedded with Another Widget

 Nested Widgets: You can create composite widgets by embedding

one widget inside another. This is useful when you need complex
functionality that requires multiple widgets to work together.

GlideSPScriptable API

 GlideSPScriptable: This is an API that allows you to write custom

server-side logic for the Service Portal. You can use it to interact with
ServiceNow data, perform operations, and send results to the client-
side.

Angular Template

 AngularJS Templates: Templates in AngularJS allow you to bind data

dynamically to HTML elements in the UI. These are used to display
data in widgets and enable responsive behavior based on user input.

spModal Popup Additional Features

 Advanced Modal Features: Adding extra features to modals, like

custom buttons, form validation, or conditional content based on user
input.

$timeout & $location Services

 $timeout: This AngularJS service is used to delay actions in the

Service Portal. For example, you might want to wait before showing a
confirmation message or redirecting to another page.
 $location: Used to manage URL navigation within the portal, allowing
users to go to different pages or states without reloading the entire
portal.
$uibModal & $watch Services

 $uibModal: This service is part of Angular UI Bootstrap and is used to

create modal windows. You can use it to display dynamic content,
forms, or alerts.
 $watch: A service in AngularJS that allows you to observe changes to
data models and trigger actions when the data changes.

$http Service

 $http Service: Used for making HTTP requests, whether to fetch data
from an external server or call ServiceNow REST APIs to interact with
external systems.

AngularJS Directives

 Directives: Directives in AngularJS are markers on elements (such as

attributes or tags) that tell Angular to attach specific behaviors to
them. For example, you might create a directive to format a date or
validate an input field.

AngularJS Filters

 Filters: Filters allow you to format or transform data before displaying

it in the UI. You can use them to format dates, numbers, or other types
of data within widgets.