ServiceNow Service Portal Widget | Service Portal Custom Widget Example | Intro to Service Portal

[Amit Gujarathi]

Hi Friends, IN this video we will be looking on to ServiceNow Service POrtal. We will see how we can create the ServiceNow Service Portal Widget. In this session, we will be looking at to the following topic What is Service POrtal What is Widget How we can create a custom page How we can create a custom widget How we can fetch data from the server and showcase it on the portal widget Push the data from the portal and update the server data First let's try to understand what is Service Portal? Service Portal allows you to build a mobile-friendly self-service experience for your users. It interacts with parts of the Now Platform, so users can access specific platform features using Service Portal. It is an alternative to the Content Management System (CMS) based on more modern technologies. Both expert developers and beginners can configure Service Portal. Less technical users can make basic configuration changes to the UI using Branding Editor and other components of Service Portal. More advanced users can edit and extend portals, pages, and widgets. Expert users can use the Widget Editor tool to write scripts to power a portal, and even create rich web applications on the Now Platform. Service Portal Widget Widgets are reusable components that make up the functionality of a portal page. Widgets define what a portal does and what information a user sees. ServiceNow provides a large number of baseline widgets. Examples include: Approvals Knowledge Base My Requests Carousel Catalog content Popular questions Search Widgets are AngularJS directives. When a page is loaded, a directive is created for each widget on the page. Widgets are tightly coupled to the server-side JavaScript code which is powered by the Rhino engine under the Now Platform. Widget Component Widgets include both mandatory and optional components. HTML Template The widget's HTML accepts and displays data. Renders the dynamic view a user sees in the browser using information from the model and controller Binds client script variables to markup Gathers data from user inputs like input text, radio buttons, and checkboxes HTML is mandatory. Client Script The widget's Client Script defines the AngularJS controller. Service Portal maps server data from JavaScript and JSON objects to client objects Processes data for rendering Passes data to the HTML template Passes user input and data to the server for processing A Client Script is mandatory. Server Script The widget's Server Script works with record data, web services, and any other data available in ServiceNow server-side scripts. Sets the initial widget state Sends data to the widget's Client Script using the data object Runs server-side queries A Server Script is mandatory. Link Function The Link Function uses AngularJS to directly manipulate the DOM. A Link Function is optional. Option Schema The Option Schema allows a Service Portal Admin (sp_admin role) to configure a widget. Specifies widget parameters Allows admin users to define instance options for a widget instance Makes widgets flexible and reusable An Option Schema is optional. Angular Providers An Angular Provider: Keeps widgets in sync when changing records or filters Shares context between widgets Maintains and persists state Creates reusable behaviors and UI components then injects them into multiple widgets Angular Providers are optional.