35 Service Portal

I. Service Portal

• Definition (from ServiceNow Docs): "Service Portal is an alternative to the content management system, CMS, and a simple way to create portals for end users. It is a portal framework that allows administrators to build a mobile-friendly self-service experience for users. It interacts with parts of the ServiceNow platform so users can access specific platform features using Service Portal."
• Purpose:
  • End-User Focus: Provides a user-friendly interface for end-users to interact with ServiceNow. It's a better user experience than the standard platform UI.
  • Self-Service: Allows users to access services, knowledge, and support information independently.
  • Mobile-Friendly: Built with responsiveness in mind, so it works well on any device (desktop, tablet, phone).
  • CMS Replacement: Service Portal is the modern replacement for the older Content Management System (CMS). New development should be done in Service Portal, not CMS.
• Key Technologies:
  • Bootstrap: A front-end framework that provides responsive design and pre-built UI components.
  • AngularJS (v1.5): A JavaScript framework used for building dynamic web applications.
• Responsive: works on any device
• Replaces archaic CMS

II. Demo: Service Portal in ServiceNow

• Accessing the Service Portal Application:
  • Type "Service Portal" in the application navigator.
  • The Service Portal application contains various modules for configuring and managing portals.
• Out-of-the-Box Service Portal:
  • The Service Portal Home module opens the default, pre-built Service Portal in a new tab. This portal is fully functional and demonstrates the core features.
• Exploring the Out-of-the-Box Portal:
  • Header: Navigation links (Knowledge, Service Catalog, Requests, System Status), cart, and user profile.
  • Search Bar: Searches for knowledge articles and catalog items.
  • Links: Order Something, Knowledge Base, Get Help, Community.
  • Widgets: Components that display information or provide functionality (e.g., Current Status, Popular Questions, My Approvals, My Open Incidents).
• Responsiveness (Demonstration):
  • Using the browser's developer tools (Inspect Element) and the "mobile view" option, the demo shows how the Service Portal adapts to different screen sizes. The layout changes to be optimized for smaller screens.
• Service Catalog Functionality:
  • Order Something: Opens the Service Catalog homepage.
  • Searching and Browsing: Users can search for catalog items or browse by category.
  • Requesting Items: Clicking on an item (e.g., Apple iPad 3) shows the item details.
  • Cart: Items can be added to the cart. The cart icon in the header displays the number of items.
  • Checkout: Proceeding to checkout displays a modal for entering delivery information and special instructions.
  • Request and Request Item Views: Users can view their requests and individual request items, track status, add comments, and see variables.
• Knowledge Base Functionality:
  • Knowledge Base Homepage: Displays categories, top-rated articles, and most-viewed articles.
  • Viewing Articles: Shows the article content, related articles (in the same category), top-rated/most-viewed articles, and feedback options (Helpful, Rate this Article).
• Get Help:
  • Opens the Service Catalog, but directly to the "How can we help you?" category.
  • Shows items for common support requests (e.g., Create Incident, Reset Password).
  • Create Incident (Record Producer): Demonstrates using a record producer within Service Portal, including contextual search.
  • Ticket View: After submitting an incident, the user is taken to a ticket view showing incident details.
• Community:
  • Allows users to ask questions and provide answers (similar to Stack Overflow).
• System Status:
  • Displays CMDB outages and the status of business services over time. Requires that the organization is using the CMDB's outage tracking features.
• User Profile:
  • Accessed from the header (by clicking on the user's name).
  • Shows user information (email, etc.) and preferences.
• Service Portal Configuration (Admin View):
  • The Service Portal Configuration module opens a new tab with various configuration options.
• Branding Editor:
  • Allows customizing the portal's appearance:
    • Logo, Portal Title, Tagline, Background Image.
    • Theme Colors (modifies colors throughout the portal).
• Designer:
  • Allows configuring the layout of Service Portal pages.
  • Uses Bootstrap principles (containers, rows, columns).
  • Widgets can be added to columns and rearranged.
• Page Editor:
  • Shows a tree structure of the page's components (containers, rows, columns, widget instances, widgets).
  • Clicking on a component loads its record below.
  • Allows modifying instance options (e.g., changing a widget's title).
  • Clicking on a widget shows its HTML, CSS, and JavaScript.
• Widget Editor:
  • Provides a dedicated editor for modifying widget code (HTML, CSS, Server Script, Client Controller).
  • Allows saving and cloning widgets.
• Portals Module:
  • Lists all Service Portals in the instance.
  • The Service Portal form view allows configuring:
    • Title, URL Suffix, Homepage, Knowledge Base, Login Page, etc.
    • Menus and Themes.
    • Try It button to launch the portal.
• Customer Service Management Portal (Example):
  • Demonstrates a different, pre-built Service Portal.
  • Shows that different portals can have different headers, pages, and widgets.
• Announcements:
  • Allows creating announcements that appear at the top of a Service Portal.
• Themes:
  • Define the look and feel of the portal.
  • Contain CSS, Sass variables, and JavaScript includes.
• Pages:
  • Lists all pages in the Service Portal.
  • The Page Content shows the structure (containers, rows, columns, widgets).
• Widgets:
  • Lists all widgets in the system.
  • The Widget form view shows the code (HTML, CSS, Server Script, Client Controller).
• CSS:
  • Lists all style sheets.
  • Allows writing custom CSS for the portal.
• Headers and Footers, Dependencies, Angular Providers: More advanced Service Portal components.

Key Takeaways:

• Service Portal provides a modern, user-friendly, and responsive interface for ServiceNow. It's a significant improvement over the older CMS.
• It's highly modular and customizable. Widgets, pages, themes, and other components can be reused and modified.
• The out-of-the-box Service Portal provides a great starting point and demonstrates many key features.
• The Designer, Page Editor, and Widget Editor are powerful tools for customizing Service Portal.
• While Service Portal development can be complex, basic administration (branding, layout changes) is relatively straightforward. The exam will likely focus on the purpose of Service Portal rather than in-depth development.
• Service Portal allows administrators to build a mobile friendly self-service experience for users.