
Hello everyone! Welcome back to our channel!
In a different series, I have covered all the aspects of AngularJS for ServiceNow.
It helps in building dynamic and interactive widgets for ServiceNow portals.
if you have not yet watched that series, I strongly recommend you to watch it, the link is provided in the description below
In this series, let's put all those learnings into action.
I'll cover all the essential topics for service portal implementation which includes
Introduction to Service Portals - What are Portals? and why are they needed?
Service Portal Architecture - How different components work together to deliver the user experience
Portal Configurations - How to create and configure portals
Themes & Page Layouts - what are the design and style elements of the portal?
Creating Custom Pages - How to build best user experience
Custom Widget Development - Simplify the widget development using HTML, CSS, JavaScript, and AngularJS
Stay tuned!!
Thank you for watching
Hello Everyone, Welcome back..
Today, I'm excited to introduce you to the concept of service portals.
Before we begin our journey, it's important to have a basic understanding of:
ServiceNow Scripting
AngularJS
Bootstrap
CSS
HTML
If you don't know any of these, don't worry leave a comment below and I will try to upload some videos related to your questions
To Implement, Develop and Manage Service Portals, admin or sp_admin role is required
Let's get started...
What are Service Portals?
A service portal serves as a user-friendly web interface that allows users to interact easily with various applications and services, requiring minimal clicks. Whether the users are on a mobile phone or a desktop, users can easily reach the portal.
Employee center portal, Knowledge portals, CAB workbench are examples.
Portals have features that includes - branding and customization, user-friendly design, centralized access and flexible structure.
Users can access numerous components like Service Catalogs, Knowledge bases, Surveys, Approvals, etc.
In general, UI Builder and Service portals are used to build user interfaces. Now, let's understand the difference between UI Builder and Service Portals.
UI Builders are designed for internal operations for fulfillers, while portals cater to external users to request services. UI Builders utilize the ServiceNow JavaScript framework and App Engine Studio but are not responsive. In contrast, Service Portals employ AngularJS widgets and are responsive.
When using Service Portal, some platform features like
Domain Separation
Click-throughs & Pop-ups
UI Macros
Formatters
Client side UI Actions
are not supported.
Service Portal does not support nesting catalog variables inside other container variables. This limitation arises due to the way AngularJS renders forms in the Service Portal. So use individual container variables and manually arrange them.
End Users can access portals either by using the url and portal suffix or through a module:
Administrators can view the list of all portals by navigating to All > Service Portal > Portals
To open the baseline portal, modify the instance URL by adding /sp to the end(i.e,https://yourdomain.service-now.com/esc ).
To open from the platform, Go to All > Service Portal > Portals to preview the existing portals.
Now, let's have a look into the Employee Center portal.
It is designed to enhance employee experience by providing easy access to various services and resources across departments like HR, IT, and more. It offers a dynamic and personalized interface, leveraging AI and analytics to streamline employee interactions and improve productivity.
Explore the Employee Center
Hope you understand what portals are and why they are needed.
Thanks for watching!
Hello all! Welcome back to our channel.
In my previous video I gave a quick introduction what are service portals and what we will be learning during the course of this series.
In today's video, I'll explain about Service Portal Configuration page
Let’s get started!
The Service Portal Configuration page serves as a one-stop solution for building and managing portals.
The URL suffix for the Service Portal Configuration Page is 'sp_config'.
Users with the admin or sp_admin role can access the Service Portal Configuration page by navigating to All and searching for Service Portal Configuration in the navigation filter, then clicking on the Service Portal Configuration module.
Alternatively service portal configuration page can be accessed by using the URL Suffix
Branding Editor is an application on the service portal configuration page used to customize portal's appearance to align with the organization’s branding like logo, color schemes, and themes that best represent company’s identity.
It provides a user-friendly interface that allows for quick adjustments to make the portal visually appealing and cohesive.
Moving on to Designer, it provides an intuitive drag-and-drop interface for designing pages. This feature makes it easy to create and customize page layouts by adding various widgets. Additionally, it allows developers to preview pages in real time as changes are made.
Now, let’s move on to the Widget Editor, which enables developers to seamlessly switch between different components of a page. It allows for easy configuration of page properties, containers, rows, columns, and widgets through an intuitive map view interface.
Next on the list is the Widget Editor, which allows developers to create widgets from scratch or customize existing ones. It provides a user-friendly interface to write HTML, CSS, and JavaScript, along with a real-time preview
New Portal allows to create new portals by defining the key elements such as its name, URL suffix, and homepage structure.
Finally, 'Get Help' This will act as a convenient shortcut for users, providing quick access to ServiceNow documentation, user guides, and additional resources. This not only enhances the user experience but also empowers users to find answers independently.
Let’s explore each of these features in detail in the upcoming videos of this series
If you have any questions please leave them in the comments below I'll be happy to answer those with simple demos and examples
I hope you found this video helpful, Thanks for watching!
Hello all! Welcome back to our channel.
In my last video, I explained the Service Portal Configuration page in detail, covering its key features like the Designer, Widget Editor, and more.
If you haven’t watched it yet, make sure to check it out to get the foundation you'll need for today's topic.
In this video, we’re diving into Portals and the Branding Editor. Let's get started!
Lets begin with creating a New Portal
To create a new portal, go to the Service Portal Configuration home page by adding /sp_config at the end of your instance's URL.
Click on the "New Portal" tile to open a new record and start creating your portal.
Now, let’s configure the fields one by one:
In the "Title" input, name your portal. I’m naming mine "Demo Portal."
Enter a valid suffix for accessing this portal. I’ll use "demo_portal."
Choose a homepage for your portal. Select from the list of existing pages. For this demo, I’ll pick the "Clocks" page. (Don't worry! We’ll cover custom page creation in upcoming videos.)
Click "Save."
Next, add your portal suffix to your domain name, and Yay!! — you can now view the "Clocks" page as your homepage.
Currently, there’s no header on the portal. Let’s fix that:
Navigate back to your portal record and select a menu from the Main Menu field. I’ll choose the "SP Header" menu and "La Jolla" as my portal theme.
Remember, the header menu will only display if you add a theme.
Reload the page, and the header will appear.
If your portal encounters a "page not found" error, you’ll need to define a fallback page:
Set the 404 Page field to the "404" page.
Similarly, you can define other key pages like:
Login Page
Knowledge Base (KB) Home Page
Catalog Home Page
Category Home Page
For this example, I’ll assign "KB Home" as the Knowledge Base page.
You can also upload an icon and logo for your portal, though I’ll skip this step for now.
After configuring these settings, click "Save." Visit the portal and select a Knowledge Base article—it will now display the "KB Home" page we assigned.
Once your portal is saved, you’ll notice related lists like:
Search Sources: Records used for portal searches.
Knowledge Bases: Linked Knowledge Bases.
Catalogs: Service Catalogs from the sc_catalog table
When setting up a portal, specify the Knowledge Bases and Catalogs to include. If left blank, the portal will use all available Knowledge Bases and Catalogs.
Now, let’s quickly customize the portal’s appearance using the Branding Editor:
Click on the "Branding Editor" tile. You’ll see two tabs:
Quick Setup: Change the title and logo of your portal.
Theme Colors: Set the portal theme here.
To demonstrate, let’s customize the navbar section:
Select a color you like, and changes will be saved automatically.
That’s all for today’s video! In the next part of this series, we’ll explore custom page creation and dive deeper into other features of ServiceNow portals.
If you have questions, leave them in the comments below. I’d be happy to answer them with simple demos and examples.
Thanks for watching!
Hello All!
Welcome back to our channel.
In my previous video, I provided a step-by-step tutorial on how to create and design a Page in the ServiceNow Service Portal.
If you haven’t seen it yet, I recommend checking that out — it’s a great foundation before applying custom themes.
Now, in today’s video, we’ll take the next step — by showing how to create and apply a custom theme to give your portal a unique look and feel that aligns with your organization’s branding.
By customizing the theme, ensures a portal truly reflects the company’s identity.
Let’s create a Theme
Click on All and type “Service Portal” in the navigation
Then, click on Themes module under Service Portal
Click the New button.
Now fill in the theme details:
Name: I’ll name it My Custom Theme
SCSS: Leave this blank for now unless you plan to add advanced styling
Header: I’m selecting the Employee Center Header Menu
Footer: Same here — Employee Center Footer Menu
Fixed Header & Footer: I’m keeping this unchecked, as I don't need a fixed header and footer, but you can enable it if needed
CSS Variables: This is where we’ll define our custom styles
click Save so that a new theme is successfully created
To demonstrate theme changes, I’ll apply a simple background color.
Let’s make the background black by adding the CSS:
body {
background-color: black;
}
How familiar are you with CSS? Let me know in the comments if you need any help in learning CSS.
Save the record.
Let’s update the font using Google Fonts.
For this video, I’m using the Poppins font. Feel free to use a font of your choice
Go to Google Fonts
Search for Poppins
Click Get Font
Copy the CSS link
In ServiceNow:
Scroll to the CSS Includes related list on the theme
Click New
Paste the copied URL
Click Submit
Now update the CSS to apply the font:
body {
font-family: 'Poppins', sans-serif;
}
And save again.
Now let’s apply this theme to your actual portal.
Go to Service Portal > Portals
Open the portal records, for example, Employee Center
Change the Theme field to My Custom Theme
Click Save
Now refresh the portal — and you’ll see your custom background and font applied.
And that’s it!
We have created a custom ServiceNow Service Portal theme — with our own styles, branding, and layout.
Whether it’s for an internal team or a customer-facing portal, with this learning you can make it shine.
It’s not over yet! Just two more clicks — one on the Subscribe button and the other on the Notification Bell icon. Those two clicks really motivate me to keep creating more helpful videos like this one!
Let’s explore employee center in detail in my next video
Like always Thanks for watching.
See you in the next one!
Hello everyone!
Welcome back to the channel.
I hope you all are enjoying and learning from the videos in this playlist.
In my previous videos, I’ve explained topics like:
What portals are
How to build portals
Creating and applying themes
Configuring page layouts — and more!
As we move forward, I’ll also be showing you how to customize and build widgets from scratch.
But before we go there, let’s take a quick detour and talk about something really important — the ServiceNow Employee Center.
It is the latest and greatest portal currently available in ServiceNow.
And knowing how it works is super important — because as a best practice, this could be your starting point for building a portal in any organization.
So that brings us to today’s topic:
"A Quick Tour of the ServiceNow Employee Center"
Let’s jump right in!
ServiceNow Employee Center — a simple and powerful platform where you can find services, information, and support — all in one place.
In general, all non-ITIL users are redirected to the Employee Center by default
But if that doesn’t happen — there are two simple ways to access the employee center
First method:
Click on the All menu, type “Employee Center” in the navigation filter,
Then click on the Employee Center module under the Self-Service application menu.
Second — and honestly, my most preferred way:
Just go to your ServiceNow instance URL and add /esc at the end in the browser’s address bar.
It’s quick, clean, and gets you there instantly.
Let me know in the comments — what’s your go-to method for accessing the Employee Center?
Oh — and if you are curious about how to automatically redirect non-ITIL users to the Employee Center,
we’ve got a full video covering that on our channel!
Link is provided in the description below — make sure to check it out and drop your questions if any. I’ll be happy to help!
Alright - now When you first log in, you’ll land on the homepage of employee center.
It’s personalized just for you — so you’ll see your open requests, pending tasks, and even important updates from your company.
At the top of the page, you’ll find a search bar.
If you don’t see it — don’t worry! I’ll show you how to enable it in an upcoming video.
Here, you can search for anything — like requesting a laptop, finding a knowledge article, or browsing services.
The search is smart — it brings up the most relevant results right away.
If you prefer exploring, you can scroll down or click on “Browse by Category.”
You’ll find areas like HR, IT, Facilities, and more.
Let’s say you need help from IT — just click the IT category to see commonly used services and helpful articles.
Need to make a request?
Just head over to the Service Catalog.
From here, you can:
Request new equipment
Submit an IT support ticket
Ask for HR assistance — all from one place isn’t that cool.
Have questions or need a quick answer?
Check out the Knowledge Base.
It’s full of how-to articles and guides that can help solve problems on your own — like login issues, password resets, or company policies.
Want to check the status of something you’ve submitted?
Go to “My Requests.”
You’ll see your requests, their current status, and progress updates.
If you’re a manager, this is also where you’ll find pending approvals waiting for your attention.
Also on the homepage — you’ll see company announcements and updates.
These might include upcoming holidays, policy reminders, or important organizational or platform changes.
And the best part is the Employee Center is built on bootstrap technology. It is fully optimized for any device including mobile and tablet.
So even if you’re away from your desk, you can still access everything on the go!
Now a quick note about Employee Center Pro.
All we’ve seen till now is part of the standard Employee Center, which comes with the default ServiceNow subscription.
But ServiceNow also offers Employee Center Pro, which requires a paid plugin that needs to be installed in your instance.
Employee Center Pro allows organizations to create a unified portal for all employee services — across HR, IT, Finance, and more.
It supports targeted communication, custom layouts, and tailored experiences for different groups.
So if you’re wondering, “Are they the same?”
Well, they have the same goal: centralizing services.
But Pro is designed for larger and more complex organizations that need:
scalability, flexibility and more out-of-box widgets
And that’s a quick overview of the ServiceNow Employee Center!
It’s designed to offer better user experience — whether you’re requesting something, looking for info, or staying up-to-date.
Thanks for watching — and I’ll see you in the next one!
Hello everyone!
Welcome back to our channel.
I trust you've been finding our previous tutorials insightful and helpful. In our earlier videos, we've delved into topics such as:
Understanding the fundamentals of portals
Building and customizing portals to suit organizational needs
Creating and applying themes for a cohesive user experience
Configuring page layouts to enhance navigation
Today, we're taking another step forward in optimizing your ServiceNow experience. In this video, I'll walk you through the process of creating and adding Quick Links to your portal.
What are Quick Links?
Quick links are a way to access internal and external resources related to specific departments within your organization.
Let's create a Quick link:
Navigate to All > Employee Center > Quick Links.
Click New. It will open a form.
On the form, let's configure the fields one by one.
Content type: Let it be a page.
As we selected the page, a page reference field appeared. Similarly, when knowledge articles, catalog items, or external links are selected, their respective references will appear.
Page Query Parameters: You can specify additional query parameters here. This field appears only when Page is selected from the Content type field.
Quick link name: give a meaningful name to the quick link
Title: The title that you enter in this field overrides the default title of the quick link.
Short description: Give the short description that you enter in this field overrides the default short description of the quick link.
Background image: Choose the background image for the quick link.
Icon: Select the icon for the quick link (optional).
Domain: The application scope defines on which the functionality runs.
Click Save or Submit.
Now that we've created our Quick Link, let’s walk through the process of adding it to your portal so it's easily accessible to users.
Start by navigating to the portal page where you want the Quick Link to appear. Enter the Page Editor mode so you can customize the layout and add widgets to the page.
Next, decide where you want the Quick Link to be placed. This could be a column on the homepage or a dedicated section for department resources.
From the component panel, find the Quick Links widget. Click and drag it into your desired location on the page.
Once the widget is placed, hover over it and click the edit icon, which looks like a pencil. This opens the configuration panel where you can set up which quick links appear.
In the Quick Links section of the settings, you can add links by selecting them from the list of available quick links you’ve already created. You can also remove any that you don’t want to show up. If you need to rearrange them, simply drag and drop to change the order.
After configuring the links, preview the changes to see how the widget looks on the page. This helps you verify the placement and appearance.
Once you’re satisfied with how it looks, click Save or Publish to apply the changes and make the Quick Links visible on the portal.
That’s all there is to it! With just a few steps, you’ve added a useful navigation tool that helps users access key resources quickly and easily.
We hope this video helps you streamline your workflow with Quick Links. If you have any questions, please leave a comment below.
Thank you for watching!
Hey everyone,
Welcome back to the channel!
In our previous video, we explored how to add the Quick Links widget to your page.
Today, we're diving into adding a dynamic carousel to your ServiceNow Employee Portal.
Navigate to your Employee Portal.
Press Ctrl + Right-click anywhere on the page and select Page Designer from the context menu.
In the Page Designer, drag a Container onto your page.
Inside this container, add a Row that spans all 12 columns to ensure full-width display.
Use the Widget Search bar to find the Carousel widget.
Drag and drop it into the 12-column row.
Click the pencil icon to edit the widget.
Then, click the three dots menu in the top-right corner and select Open in Platform.
In the widget instance form, assign a unique ID to the widget (e.g., home_carousel).
This ID is crucial for identifying the carousel when adding slides.
Click Save to apply your changes.
Scroll down to the Carousel Slides related list and click New to add your first slide.
Fill in the following fields:
Name: e.g., Slide 1
Order: e.g., 100 (controls the display sequence)
Href/URL: Optional – leave empty if using a background image
Background Image: Upload your desired image
Carousel: Select the carousel widget instance you created earlier
Click Submit to save the slide.
Repeat this process to add more slides, adjusting the Order field to control the rotation sequence.
Return to the Employee Portal and refresh the page. Your carousel should now be visible and rotating as configured.
That's it! You've successfully added a carousel to your ServiceNow Employee Portal.
If you found this tutorial helpful, please like the video, share it with others, and don't forget to subscribe for more ServiceNow tips and tricks.
Thanks for watching, and see you in the next video!
Hello everyone!
Welcome back to our ServiceNow series!
Previously we have learned about the quick links and carousel widgets.
In this tutorial, we'll guide you through creating impactful announcements in your Service Portal, ensuring users stay informed about critical updates like maintenance schedules, outages, or policy changes.
Let’s first access Announcements Module
Navigate to your ServiceNow instance.
In the left-hand navigation pane, type “Announcements” in the search bar.
Under Service Portal, select Announcements.
Create a New Announcement
Click on New to open the announcement form.
Configure Announcement Details
here I have takes:
Name: Enter a descriptive title (e.g., "System Maintenance Notice").
Active: Set to True to make the announcement visible.
Title: Provide a concise headline.
From: Select the current date.
To: Choose a future date or leave blank for indefinite display.
Summary: Write a brief description (e.g., "Scheduled maintenance on May 25, 2025, from 2:00 AM to 4:00 AM IST.").
Display Style: Choose Normal for standard visibility.
Glyph: Optionally select an icon to accompany the announcement.
Public: Set to True to make it accessible to all users.
Type: Select Banner to display at the top of the portal.
Set Behavior Options
Dismiss Options: Choose User can dismiss for current session only to allow temporary dismissal.
Assign to Portal
Portals: Select Employee Center or your desired portal.
Save the Announcement
Click Submit to create the announcement.
Now let’s check the Announcement in the Portal
The announcement will automatically appear as a banner at the top of the portal page.
But if you need a Widget-Based Announcement
Open Page Designer
Navigate to the portal page where you want the announcement. Right-click and select Page Designer.
Add Announcements Widget
In the Page Designer, locate the Announcements widget. Drag and drop it onto the desired section of the page.
Save and Refresh
Save the changes and refresh the portal page to view the announcement in place.
Now, the announcement should appear as part of the page content—not just as a banner.
And that’s it! Super simple, right?
Thanks for watching, and I’ll see you in the next one!
This hands-on course offers a comprehensive introduction to service portals, beginning with “What are portals and why are they needed?” — exploring how portals serve as unified access points for users to request services, view knowledge articles, check statuses, and interact with systems in a responsive self-service environment. Next, we dive into Service Portal Architecture: you will learn how different components—pages, themes, widgets, backend services—work together to deliver a seamless user experience and how architecture choices influence performance, maintainability and scalability.
Then we focus on Portal Configurations: practical steps to create and configure portals, set up navigation, map pages and manage components. The Themes & Page Layouts module explains design and style elements—how to apply branding, responsive layouts, headers/footers, and ensure a consistent look and feel across devices. On to Creating Custom Pages: you’ll build pages that deliver best-in-class user experiences—evaluating usability, navigation flows, and content placement for maximum impact. Finally, Custom Widget Development walks through simplifying widget creation using HTML, CSS, JavaScript and AngularJS—showing how to extend base functionality, build reusable widgets and integrate dynamic data and UI logic.
By the end of the course you’ll be equipped to design, build and deploy a modern service portal that meets user needs and aligns with organizational branding and architecture.