Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.
Versions
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store
Close

Example widgets

Example widgets

All widgets in Service Portal can be used as example code for how scripts are used in a widget. However, several out-of-box widgets have been included expressly for this purpose.

Use the example widgets to see how to use HTML, CSS, or client and server scripts in Service Portal. You can also clone and extend each widget to suit your needs.

Approvals widget

Users can approve or reject items directly within Service Portal.

Note: Service Portal does not currently support Approvals with e-signature.
Figure 1. Approvals widget
Approvals widget

Instance options

Use the instance options to change the appearance of the approvals widget.

Figure 2. Approvals widget instance options
Instance options for the approvals widget, which include the bootstrap color, glyph, and max number of elements shown in the list fields
Table 1. Approvals widget instance options
Field Description
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Glyph Add an icon to display beside the widget name.
Buttons stacked side by side If this check box is selected, the Approve and Reject buttons appear horizontally beside each other. If this check box is cleared, the Approve and Reject buttons appear stacked vertically.
Max number of elements shown in the list Limit the number of approvals users see on a page. The default number is 10. Only enter numbers greater than 0.
Who can view instances/who cannot view instances Control who can or cannot view a widget instance with user criteria. User criteria must be enabled for this option to appear.

Approval Info widget

The Approval Info widget works in tandem with the Approval widget to display details about the approval request.

Figure 3. Approval Info widget
Approval Info widget

Instance options

Table 2. Approval info widget instance options
Field Description
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.

Approval Record widget

The Approval Record widget shows the full record for an approval including the activity stream.

Figure 4. Approval Record widget
Approval Record widget showing all of the information available about the approval including comments by the requestor.

Instance options

The approval record widget does not include instance options.

The breadcrumbs widget allows users to easily navigate around a portal.

Breakout Game widget

The Breakout Game widget is a fun 404 interaction for pages that do not exist.

Figure 6. Breakout Game widget
Breakout Game widget

Instance options

The Breakout Game does not have instance option. You can use it as an example of how to use the Link Function as part of an Angular Directive.

Calculator widget

The calculator widget does simple calculations.

Use the calculator widget as an example of how to pass data between the client and server.

Figure 7. Calculator widget
Calculator widget containing a math problem

Instance options

The calculator widget does not include instance options.

Cool Clock widget

The Cool Clock widget uses instance options to show different times around the world.

Cool clocks demonstrates how to use instance options in a widgets. The time zone is loaded using an instance option. If you do not select a time zone, the widget uses a default time zone.

Figure 9. Cool Clock widget
Cool Clock widget

Instance options

Table 3. Cool clock widget instance options
Field Description
Title Name of the clock, for example New York, NY. The name appears below the clock so it helps to use a name related to the time zone.
Timezone The location from which the time is displayed. Use the local full name, for example, America/New York, instead of the abbreviated time zone. Using the full name allows time zones to stay consistent with daylight savings time. The default value is America/Los Angeles
Second hand color Color of the second hand using the hex code, RGB, or color name. The default value is red.

Data table from instance definition widget

Data table from instance definition displays a table that you define using the widget instance options.

After you add the data table from instance definition widget to a page, use the instance options to configure the appearance of the table.

Figure 10. Data table from instance definition widget
Data table from instance definition widget with instance option set to table=incident

Instance options

Table 4. Data table instance options
Field Description
Title The title of the widget. If you leave this field empty the name of the table displays as the widget name.
Table The table that the widget displays records from.
Filter Text field from the condition builder that you can use to limit the items returned in the table. To create a filter, use the context menu to open the widget instance in the platform. Then use the condition builder to create a filter.
Maximum entries Limits the number of items displayed in the table. If there are more entries than allowed in the table, users can scroll to the next page.
Glyph Icon that displays beside the widget title
Fields Columns to display in the table.
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Link to this page Direct users to a specific page when they click a record. By default, clicking an entry in the table opens that entry in a form.
Enable Filter Select this check box to allow users to create their own filter for the table. This option is currently only supported for the Data Table widgets.

Data Table from URL definition widget

The Data Table from URL definition widget displays the table you select from the list.

Figure 11. Data Table from URL definition widget
Data Table list with Incident Fact Table selected)

Instance options

Complete the instance options to define the table.
Field Description
Title The title of the widget. Select the Use Instance Title check box to use this title instead of the name of the table.
Glyph Icon that displays beside the widget title
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Link to this page Direct users to a specific page when the click a record. By default, clicking an entry in the table opens that entry in a form.
Fields Columns to display in the table. For example, short description or priority.
Use Instance Title Select to use the title in the Title field instead of the table title
Enable Filter Select this check box to allow users to create their own filter for the table

If Enable filter is enabled in the instance options, users can add custom conditions to filter the results.

Figure 12. Data Table URL with condition builder
Condition builder has the following parameters: Priority = critical, Category = Network. The list shows only three times.
For more information on using the condition builder, see Create a filter in List v3.
Note: The condition builder is only available in the desktop view.

Form widget

The form widget is a platform form within the Service Portal UI with a few differences.

Figure 13. Form widget
Form widget in the shape of the portal form

URL Parameters

The form widget accepts the following parameters within the URL
Table 5. Form widget URL parameters
Paramter Description
sys_id or sl_sys_id The sys_id for the record to be displayed
table, sl_table, or t The table for the record to be displayed
view or v The view used to display the record
In the following example. The URL would display an incident with a sys_id of 1c741bd70b2322007518478d83673af3 in the portal view.
https://example.service-now.com/sp?id=form&table=incident&sys_id=1c741bd70b2322007518478d83673af3&view=portal
Table 6. Supported and unsupported form scripts
Form script Description
Client scripts Service Portal uses UI type set to All or Mobile/Service Portal. Client Scripts marked as Desktop rely on legacy APIs that aren't supported by Service Portal. Before flagging a script as Mobile or All, make sure you are only using mobile APIs.
UI Actions All server-side UI actions are supported in Service Portal, although setRedirectURL() operations are ignored because Service Portal forms handle redirection in a different way than the platform.

Any UI Actions marked as Client are ignored by the form widget.

UI Policies Supported, although you should use only declarative UI Policies. Avoid scripting unless the outcome cannot be achieved through the condition builder.
UI Macros Not supported as UI macros use Jelly.
Formatters Not supported as formatters use Jelly.

Header menu widget

The Header Menu widget controls which options appear in the page header.

Unlike other widgets in Service Portal, the header menu widget is not something you drag onto a page. Instead you configure the header menu by associating the header menu with a portal.

Figure 14. Header Menu widget
Header Menu widget with Knowledge, Service Catalog, Requests, System Status, Cart, and a user profile avatar as the menu items

Instance options

The header menu widget does not include instance options.

Hello World widgets

The Hello World widgets are included with Service Portal as examples of how to use and create widgets.

All three Hello World widgets display the same way. The real difference between them is in their underlying code base. Each version of the widget uses a different method of using the server and client script.

To view the Hello World widgets, navigate to Service Portal > Service Portal Configuration then click Widget Editor. In the Widget Editor, click Check out the Hello World Example.

Figure 15. Hello World 1
Hello World 1 widget, showing the HTML and client script in the IDE

Hello world 1 displays how the HTML template and the client script communicate. For more information on using the client script in Service Portal, see Widget client script

Use the widget list to switch to Hello World 2 or 3.

Figure 16. Hello World 2

Hello World 2 includes an example of how the server script can be used as well.

Figure 17. Hello World 3

For more information on Service Portal APIs, see the GlideSPScriptable API.

HTML widget

Use the HTML widget to directly inject HMTL, text, lists, or content in general into a page.

Because the HTML widget can contain content of any kind, any example may just appear as regular text. For example, the HTML widget appears as a box of text on the 404 page.

Figure 18. HTML widget
HMTL widget from the 404 page with text about the 404 page

Instance options

Table 7. HTML widget instance options
Field Description
Title Name for the HTML text. Users do not see this information.
HTML Text box for the HTML. Use the toolbar like most word processing tool bars. For more information on using the toolbar, see Formatting icons for the HTML field editors .

Icon menu list widget

A simple list with a glyph icon next to each link.

Configure the icon information using the Menu Items related list.

Figure 20. Icon Menu list widget
Icon Menu list widget with icons for profile, group information, and credit card information
  1. From the instance options for the icon menu list widget, under Related Lists, click Menu Items.
  2. Click New.
  3. Use the fields on the New Menu Items form to configure the icons for the icon menu list widget.
Table 9. Icon menu list widget instance options
Field Description
Label Name or description of the icon
Parent Menu The name of the menu that the icon appears in. This automatically populates with the name of the icon menu list widget that you created but you have the option to switch it to another menu.
Order The order in which the icons appear in the icon menu list widget.
Parent menu Item Nest menu items within a parent menu.
Page The page within Service Portal that the icon links to. Select Page from the Type list to enable this option.
Type Select the type of link you want the icon to have. You can link to pages within Service Portal, external URLs, KB articles, Service Catalog, or lists. Different fields will appear on the form depending on the option you select from the list.
Condition Determines what conditions are required for menu items to show in the header. For more information on what conditions to use in the Condition field, see Create a UI Action Create a UI action.
Glyph Icon that you want to display in the icon menu list widget.

Language Switch widget

Add the Language Switch widget to a landing or homepage to allow your users to change the language of the page.

Figure 21. Language Switch widget
Language Switch widget with English selected

Instance options

The Language Switch widget does not include any instance options.

Login widget

The login widget controls user access to your site.

Figure 23. Login widget
Login widget from the Service Portal landing page

Instance options

Table 11. Instance options fields
Field Description
Show panel Show or hide the panel that appears behind the login widget. The panel helps the widget stand out from the page background rather than blending in.

My Requests widget

The My Requests widget stores all of your open requests in one place.

The list is updated in real time so you can see your requests getting processed. The widget pulls open request information from the sc_request table.

Figure 24. My Requests widget
My Requests widget with Sales Laptop and Apple iPad 3 listed in the queue.

Instance options

Table 12. Instance options fields
Field Description
Title Name of the widget. The name you enter here appears in the header for the widget.
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Maximum entries The maximum number of entries allowed to appear in the widget.

Organization Chart widget

The Organization Chart widget shows employees in a tree structure relative to their manager.

The Organization Chart widget gets data from the Users table [sys_users].

Figure 25. Organization Chart widget
Organization Chart widget with David Loo selected and Bud Richman showing in the chart as David's manager

Simple List widget

The Simple List widget can be used to display any list in the system within Service Portal.

Figure 26. Simple List widget
Simple List widget

Instance options

Table 13. Instance options fields
Field Description
Table The platform table that the simple list is formed from.
Display field Main field that displays as the "title" of the list item.
Glyph Icon that displays next to the widget name in the header
Filter Conditions that are applied to the list. To edit the filter, in the widget instance options context menu, select Open in platform. Use the Table & Filter tab to apply conditions to the simple list. For more information, see Create a filter in List v3.
Link to this page Portal page to link to from a list item.
Bootstrap color Color scheme for the widget. The default colors are defined by the portal theme, but if you want the instance to have a specific color, select the option from the list.
Bootstrap size Size of the widget
Maximum entries Maximum allowed number of entries that appear in the list at one time.
Show even when empty Widgets are designed to hide on a page when no results meet the criteria. Select this option to make the simple list widget display on a page even when empty.
List body height Actual length of the widget in pixels or EMs. A long list with a small body heigh includes a scroll bar option.
Image field Displays an image in the list. Select a field type that includes an image. For example, Photo.
Secondary fields Fields from the list item that display in addition to the main display field.
Rounded images Makes any images selected in the Image field round in the list.
List page The page that opens when a user selects View all in the widget footer. Select a page that correlates with the items that display in the list.
Hide footer Show or hide the widget footer
View The view option for when a list item links to a form. The Link to this page field must be set to a form page for this option to work.

Stock widget

The Stock widget displays an example of how widgets communicate with data outside of the system.

The Stock widget pulls information from an online data source for stock information.
Note: As of November 2017, the Yahoo Finance API has been discontinued. As the stock widget relies on this functionality, the widget is no longer supported, and has been removed as of the London release.
Figure 28. Stock widget
Stock widget showing the rise and fall of the NOW stock price

Instance options

The Stock widget does not include instance options.

Ticket Attachments widget

Use the attachment widget to attach items to tickets.

Attachments should be less than 24MB. You can drag files into the Attachments widget to add them to a record.

Figure 29. Ticket Attachments widget
Ticket Attachments widget

Instance options

Table 14. Ticket attachments widget instance options
Field Description
Record ID The ID number of the record for the attachment.
Record table Limit the records users can add an attachment to by adding a table to the attachment widget. Users can then only add attachments if they are in a record for that table.

Ticket Conversations widget

Record of ticket items. Users can use this to communicate back and forth with the fulfiller and the receiver.

Journal entries are presented in chronological order, with the oldest entries appearing at the bottom of the widget. Entries made by the user that created the record appear on the right side of the center divider. Entries made by other users appear to the left.

The Ticket Conversations widget is intended only for tables that extend task.

Limit the number of journal entries that appears in the ticket conversation widget using the glide.service_portal.stream_entry_limit system property. The default number is 100. Change the number by navigating to Service Portal > Properties, and enter the new number in the Maximum number of stream entries displayed in Service Portal field.

Figure 30. Ticket Conversations widget
Ticket Conversations widget

Instance options

Table 15. Instance options fields
Field Description
Use dynamic placeholder Use a placeholder for journal fields. The default value is false.
No readable journal field message The message that displays when there are no readable journal fields. Forms that have added journal fields may not display in the Ticket Conversation widget.

Ticket Location widget

Share you location in a ticket.

Figure 31. Ticket Location widget
Ticket Location widget

Instance options

The Ticket Location widget does not include any instance options.

User Profile widget

Store user profile information.

Users can use the User Preferences section to enable accessibility in a portal.

Figure 32. User Profile widget
User Profile widget

Instance options

The User Profile widget does not include instance options.

Weather widget

The Weather widget shows an example of how the server script interprets data from a source outside of the system.

Figure 33. Weather widget
Weather widget displaying information for the weather in San Diego, CA

Instance options

The Weather widget does not include instance options.