Contents Now Platform Capabilities Previous Topic Next Topic Example widgets Subscribe Log in to subscribe to topics and get notified when content changes. ... SAVE AS PDF Selected Topic Topic & Subtopics All Topics in Contents Share 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 Instance options Use the instance options to change the appearance of the approvals widget. Figure 2. Approvals widget instance options 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 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 Instance options The approval record widget does not include instance options. Breadcrumbs widget The breadcrumbs widget allows users to easily navigate around a portal. Using the widget The breadcrumbs widget displays information based on where a page is located in a portal. For example, if you navigate to the Knowledge Base from the home page, then the breadcrumb reads as Home > Knowledge Base. Each subsequent page that you open expands the breadcrumb. Click a page name on the breadcrumbs widget to navigate to that page. For example, to return to the home page, click Home. You can customize this widget to change the breadcrumb path. For more information, see KB0719179. Instance options The breadcrumbs widget does not have instance options. Breakout Game widget The Breakout Game widget is a fun 404 interaction for pages that do not exist. Figure 5. 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 6. Calculator widget Instance options The calculator widget does not include instance options. Carousel widget The carousel widget displays a scrolling list of images. Use the carousel widget to showcase items on your portal page. For example, display items available in a service catalog at the top of the service catalog page. Figure 7. Carousel widget Add slides to the carousel widget Use the related lists for an instance of the carousel widget to add images for the carousel widget to scroll through. Before you beginRole required: Admin or sp_admin Procedure Navigate to Service Portal > Widgets > Carousel. Open the Carousel widget record. From the carousel form, on the Instances related list, under instances, open a carousel instance. From the instance of carousel form, click New on the Carousel Slides related list. Complete the form. Field Description Name Name of the carousel slide. Use the name to differentiate the slide from other slide records. Order Where the slide appears in the list of slides HREF/URL Link to the item in the slide. For example, for a slide with a catalog item, link to page for the catalog item using the HREF ?id=<page name>&sys_id=<sys_id for item>. For more information on linking to a page within a portal, see Navigate by URL. You can also link to other sites using the URL. Background Upload an image for the slides. Carousel images should be 1022x300 pixels. Application Automatically populated with the name of the application the portal falls under. Carousel Name of the instance of the carousel widget you are adding the slide to. This field is not automatically populated and you cannot select an instance of the carousel widget if it does not have a name. Repeat this step for as many slides as you want to appear in the carousel widget. 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 8. 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 9. Data table from instance definition widget 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 10. Data Table from URL definition widget Instance optionsComplete 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 11. Data Table URL with condition builder 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 12. Form widget URL Parameters The form widget accepts the following parameters within the URL.Table 5. Form widget URL parameters Parameter Description sys_id or sl_sys_id Sys_id for the record to be displayed table, sl_table, or t Table for the record to be displayed view or v 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 13. Header Menu widget 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 14. Hello World 1 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 15. Hello World 2 Hello World 2 includes an example of how the server script can be used as well. Figure 16. Hello World 3 For more information on Service Portal APIs, see the GlideSPScriptable API. HTML widget Use the HTML widget to directly inject HTML, 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 17. HTML widget 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 Link widget Link to any other item. Configure Icon Link widgets to link to a specific URL, page within the portal, or another widget. The related list for this widget also allow you configure accessibility by user name or role. Figure 18. Icon Link widget Instance options Table 8. Instance options fields Field Description Title Name of the icon link. Choose something that defines what the widget is linking to. Glyph Icon for the widget. Bootstrap class name Use concurrently with page or theme level CSS. Type Defines what the widget links to. The fields that appear on the form vary depending on which option you select. Choose from: Page: Another page in the Service Portal URL: Link to an external website. Catalog category: Link to a specific catalog category within the service catalog. Catalog item: Link to a specific catalog item. KB topic: Link to a KB topic page. KB article: Link to a KB article by number. KB category: Link to a specific KB category within the knowledge base. Page Page within the portal that you want to link to. This field varies depending on the Type you choose. 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. Template The appearance of the link icon widget. Choose from: Top icon Circle icon Color box 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 19. Icon Menu list widget From the instance options for the icon menu list widget, under Related Lists, click Menu Items. Click New. 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 20. Language Switch widget Instance options The Language Switch widget does not include any instance options. Link button widget The Link Button widget is a button you can nest in any other widget that links to another destination. Figure 21. Link Button widget Instance options Table 10. Instance option fields 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. Link for button Page that the button links to. Use ?id=<page_name> to link to another page in the portal. Contents of button The button text. Login widget The login widget controls user access to your site. Figure 22. Login widget 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 23. My Requests widget 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. Using the widget In the text input field, enter or select a user to see their manager and subordinates. The widget uses information from the User [sys_user] record to display the organization hierarchy relative to the selected user. Click a card to open the profile page for that user. To reconfigure the card link, change the URL or Page in the widget instance options. You can drag individual cards to rearrange the chart. You can zoom in or out of the chart view by clicking the magnifying glass icons or by scrolling. Instance options Use the instance options to configure the Organization Chart widget for a portal page.Note: There are no valid values for several instance options. By default, you can set only the following instance options: User Background Color Node Background Color URL Page Field Description Data Card Fields Fields from the user record that appear on each card. By default, each card displays the name, title, department, email, phone, and location of each user. There are no valid values that you can enter in this field. Presentation User Background Color Color of the user card. Use color names or Hex codes. For example, you can enter red or #ff0000. The user background color is lightblue by default. Node Background Color Color of cards that extend from the user card. Use color names or Hex codes. For example, you can enter yellow or #ffff00. The node background color is azure by default. Table Layout Size and margin of the content in each card. There are no valid values that you can enter in this field. Row Layout Alignment of the text in the card. The text is left-aligned by default. There are no valid values that you can enter in this field. Line Color of the lines that connect cards. The lines are black by default. There are no valid values that you can enter in this field. Tree Layout Size, spacing, and alignment of the chart. There are no valid values that you can enter in this field. Picture Layout Size of image space in each card. By default, the image space is 55x65 pixels. The user image is shrunk or stretched to fit the space. There are no valid values that you can enter in this field. Behavior URL Web address of the page that opens when you click a card. Use the part of the portal URL that references the page ID. For example, to navigate to the Service Catalog, enter ?id=sc_category. If left blank, clicking the card opens the page that is specified in the Page field. If the Page field is also blank, clicking the card opens the user profile page by default. Page Portal page that opens when you click a card. Use the page ID. If left blank, clicking the card opens the web address in the URL field. If the URL field is also blank, clicking the card opens the user profile page by default. Note: The URL field overwrites the Page field. To specify a page rather than a URL, leave the URL field blank. Simple List widget The Simple List widget can be used to display any list in the system within Service Portal. Figure 24. 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. Sample Footer widget The Sample Footer widget is an example of a footer you can use in your portal. Unlike other widgets in Service Portal, you add a footer to your portal by configuring it in the Theme form. For more information on adding a footer to a portal, see Create a service portal and its branding. Figure 25. Sample Footer widget Instance options The Sample footer widget does not include instance options. 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 26. Stock widget 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 27. 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. The Ticket Conversations widget displays journal entries from the activity formatter of the target record. 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 28. 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 your location in a ticket. Figure 29. 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 30. 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. Note: The weather API that is used in this widget has been retired. To continue using weather data from an outside source, clone the widget and then call out another weather API in the server script. Figure 31. Weather widget Instance options The Weather widget does not include instance options. On this page Send Feedback Previous Topic Next Topic
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 Instance options Use the instance options to change the appearance of the approvals widget. Figure 2. Approvals widget instance options 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 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 Instance options The approval record widget does not include instance options. Breadcrumbs widget The breadcrumbs widget allows users to easily navigate around a portal. Using the widget The breadcrumbs widget displays information based on where a page is located in a portal. For example, if you navigate to the Knowledge Base from the home page, then the breadcrumb reads as Home > Knowledge Base. Each subsequent page that you open expands the breadcrumb. Click a page name on the breadcrumbs widget to navigate to that page. For example, to return to the home page, click Home. You can customize this widget to change the breadcrumb path. For more information, see KB0719179. Instance options The breadcrumbs widget does not have instance options. Breakout Game widget The Breakout Game widget is a fun 404 interaction for pages that do not exist. Figure 5. 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 6. Calculator widget Instance options The calculator widget does not include instance options. Carousel widget The carousel widget displays a scrolling list of images. Use the carousel widget to showcase items on your portal page. For example, display items available in a service catalog at the top of the service catalog page. Figure 7. Carousel widget Add slides to the carousel widget Use the related lists for an instance of the carousel widget to add images for the carousel widget to scroll through. Before you beginRole required: Admin or sp_admin Procedure Navigate to Service Portal > Widgets > Carousel. Open the Carousel widget record. From the carousel form, on the Instances related list, under instances, open a carousel instance. From the instance of carousel form, click New on the Carousel Slides related list. Complete the form. Field Description Name Name of the carousel slide. Use the name to differentiate the slide from other slide records. Order Where the slide appears in the list of slides HREF/URL Link to the item in the slide. For example, for a slide with a catalog item, link to page for the catalog item using the HREF ?id=<page name>&sys_id=<sys_id for item>. For more information on linking to a page within a portal, see Navigate by URL. You can also link to other sites using the URL. Background Upload an image for the slides. Carousel images should be 1022x300 pixels. Application Automatically populated with the name of the application the portal falls under. Carousel Name of the instance of the carousel widget you are adding the slide to. This field is not automatically populated and you cannot select an instance of the carousel widget if it does not have a name. Repeat this step for as many slides as you want to appear in the carousel widget. 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 8. 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 9. Data table from instance definition widget 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 10. Data Table from URL definition widget Instance optionsComplete 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 11. Data Table URL with condition builder 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 12. Form widget URL Parameters The form widget accepts the following parameters within the URL.Table 5. Form widget URL parameters Parameter Description sys_id or sl_sys_id Sys_id for the record to be displayed table, sl_table, or t Table for the record to be displayed view or v 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 13. Header Menu widget 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 14. Hello World 1 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 15. Hello World 2 Hello World 2 includes an example of how the server script can be used as well. Figure 16. Hello World 3 For more information on Service Portal APIs, see the GlideSPScriptable API. HTML widget Use the HTML widget to directly inject HTML, 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 17. HTML widget 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 Link widget Link to any other item. Configure Icon Link widgets to link to a specific URL, page within the portal, or another widget. The related list for this widget also allow you configure accessibility by user name or role. Figure 18. Icon Link widget Instance options Table 8. Instance options fields Field Description Title Name of the icon link. Choose something that defines what the widget is linking to. Glyph Icon for the widget. Bootstrap class name Use concurrently with page or theme level CSS. Type Defines what the widget links to. The fields that appear on the form vary depending on which option you select. Choose from: Page: Another page in the Service Portal URL: Link to an external website. Catalog category: Link to a specific catalog category within the service catalog. Catalog item: Link to a specific catalog item. KB topic: Link to a KB topic page. KB article: Link to a KB article by number. KB category: Link to a specific KB category within the knowledge base. Page Page within the portal that you want to link to. This field varies depending on the Type you choose. 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. Template The appearance of the link icon widget. Choose from: Top icon Circle icon Color box 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 19. Icon Menu list widget From the instance options for the icon menu list widget, under Related Lists, click Menu Items. Click New. 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 20. Language Switch widget Instance options The Language Switch widget does not include any instance options. Link button widget The Link Button widget is a button you can nest in any other widget that links to another destination. Figure 21. Link Button widget Instance options Table 10. Instance option fields 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. Link for button Page that the button links to. Use ?id=<page_name> to link to another page in the portal. Contents of button The button text. Login widget The login widget controls user access to your site. Figure 22. Login widget 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 23. My Requests widget 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. Using the widget In the text input field, enter or select a user to see their manager and subordinates. The widget uses information from the User [sys_user] record to display the organization hierarchy relative to the selected user. Click a card to open the profile page for that user. To reconfigure the card link, change the URL or Page in the widget instance options. You can drag individual cards to rearrange the chart. You can zoom in or out of the chart view by clicking the magnifying glass icons or by scrolling. Instance options Use the instance options to configure the Organization Chart widget for a portal page.Note: There are no valid values for several instance options. By default, you can set only the following instance options: User Background Color Node Background Color URL Page Field Description Data Card Fields Fields from the user record that appear on each card. By default, each card displays the name, title, department, email, phone, and location of each user. There are no valid values that you can enter in this field. Presentation User Background Color Color of the user card. Use color names or Hex codes. For example, you can enter red or #ff0000. The user background color is lightblue by default. Node Background Color Color of cards that extend from the user card. Use color names or Hex codes. For example, you can enter yellow or #ffff00. The node background color is azure by default. Table Layout Size and margin of the content in each card. There are no valid values that you can enter in this field. Row Layout Alignment of the text in the card. The text is left-aligned by default. There are no valid values that you can enter in this field. Line Color of the lines that connect cards. The lines are black by default. There are no valid values that you can enter in this field. Tree Layout Size, spacing, and alignment of the chart. There are no valid values that you can enter in this field. Picture Layout Size of image space in each card. By default, the image space is 55x65 pixels. The user image is shrunk or stretched to fit the space. There are no valid values that you can enter in this field. Behavior URL Web address of the page that opens when you click a card. Use the part of the portal URL that references the page ID. For example, to navigate to the Service Catalog, enter ?id=sc_category. If left blank, clicking the card opens the page that is specified in the Page field. If the Page field is also blank, clicking the card opens the user profile page by default. Page Portal page that opens when you click a card. Use the page ID. If left blank, clicking the card opens the web address in the URL field. If the URL field is also blank, clicking the card opens the user profile page by default. Note: The URL field overwrites the Page field. To specify a page rather than a URL, leave the URL field blank. Simple List widget The Simple List widget can be used to display any list in the system within Service Portal. Figure 24. 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. Sample Footer widget The Sample Footer widget is an example of a footer you can use in your portal. Unlike other widgets in Service Portal, you add a footer to your portal by configuring it in the Theme form. For more information on adding a footer to a portal, see Create a service portal and its branding. Figure 25. Sample Footer widget Instance options The Sample footer widget does not include instance options. 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 26. Stock widget 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 27. 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. The Ticket Conversations widget displays journal entries from the activity formatter of the target record. 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 28. 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 your location in a ticket. Figure 29. 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 30. 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. Note: The weather API that is used in this widget has been retired. To continue using weather data from an outside source, clone the widget and then call out another weather API in the server script. Figure 31. Weather widget Instance options The Weather widget does not include instance options.
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 Instance options Use the instance options to change the appearance of the approvals widget. Figure 2. Approvals widget instance options 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 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 Instance options The approval record widget does not include instance options. Breadcrumbs widget The breadcrumbs widget allows users to easily navigate around a portal. Using the widget The breadcrumbs widget displays information based on where a page is located in a portal. For example, if you navigate to the Knowledge Base from the home page, then the breadcrumb reads as Home > Knowledge Base. Each subsequent page that you open expands the breadcrumb. Click a page name on the breadcrumbs widget to navigate to that page. For example, to return to the home page, click Home. You can customize this widget to change the breadcrumb path. For more information, see KB0719179. Instance options The breadcrumbs widget does not have instance options. Breakout Game widget The Breakout Game widget is a fun 404 interaction for pages that do not exist. Figure 5. 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 6. Calculator widget Instance options The calculator widget does not include instance options. Carousel widget The carousel widget displays a scrolling list of images. Use the carousel widget to showcase items on your portal page. For example, display items available in a service catalog at the top of the service catalog page. Figure 7. Carousel widget Add slides to the carousel widget Use the related lists for an instance of the carousel widget to add images for the carousel widget to scroll through. Before you beginRole required: Admin or sp_admin Procedure Navigate to Service Portal > Widgets > Carousel. Open the Carousel widget record. From the carousel form, on the Instances related list, under instances, open a carousel instance. From the instance of carousel form, click New on the Carousel Slides related list. Complete the form. Field Description Name Name of the carousel slide. Use the name to differentiate the slide from other slide records. Order Where the slide appears in the list of slides HREF/URL Link to the item in the slide. For example, for a slide with a catalog item, link to page for the catalog item using the HREF ?id=<page name>&sys_id=<sys_id for item>. For more information on linking to a page within a portal, see Navigate by URL. You can also link to other sites using the URL. Background Upload an image for the slides. Carousel images should be 1022x300 pixels. Application Automatically populated with the name of the application the portal falls under. Carousel Name of the instance of the carousel widget you are adding the slide to. This field is not automatically populated and you cannot select an instance of the carousel widget if it does not have a name. Repeat this step for as many slides as you want to appear in the carousel widget. 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 8. 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 9. Data table from instance definition widget 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 10. Data Table from URL definition widget Instance optionsComplete 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 11. Data Table URL with condition builder 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 12. Form widget URL Parameters The form widget accepts the following parameters within the URL.Table 5. Form widget URL parameters Parameter Description sys_id or sl_sys_id Sys_id for the record to be displayed table, sl_table, or t Table for the record to be displayed view or v 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 13. Header Menu widget 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 14. Hello World 1 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 15. Hello World 2 Hello World 2 includes an example of how the server script can be used as well. Figure 16. Hello World 3 For more information on Service Portal APIs, see the GlideSPScriptable API. HTML widget Use the HTML widget to directly inject HTML, 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 17. HTML widget 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 Link widget Link to any other item. Configure Icon Link widgets to link to a specific URL, page within the portal, or another widget. The related list for this widget also allow you configure accessibility by user name or role. Figure 18. Icon Link widget Instance options Table 8. Instance options fields Field Description Title Name of the icon link. Choose something that defines what the widget is linking to. Glyph Icon for the widget. Bootstrap class name Use concurrently with page or theme level CSS. Type Defines what the widget links to. The fields that appear on the form vary depending on which option you select. Choose from: Page: Another page in the Service Portal URL: Link to an external website. Catalog category: Link to a specific catalog category within the service catalog. Catalog item: Link to a specific catalog item. KB topic: Link to a KB topic page. KB article: Link to a KB article by number. KB category: Link to a specific KB category within the knowledge base. Page Page within the portal that you want to link to. This field varies depending on the Type you choose. 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. Template The appearance of the link icon widget. Choose from: Top icon Circle icon Color box 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 19. Icon Menu list widget From the instance options for the icon menu list widget, under Related Lists, click Menu Items. Click New. 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 20. Language Switch widget Instance options The Language Switch widget does not include any instance options. Link button widget The Link Button widget is a button you can nest in any other widget that links to another destination. Figure 21. Link Button widget Instance options Table 10. Instance option fields 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. Link for button Page that the button links to. Use ?id=<page_name> to link to another page in the portal. Contents of button The button text. Login widget The login widget controls user access to your site. Figure 22. Login widget 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 23. My Requests widget 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. Using the widget In the text input field, enter or select a user to see their manager and subordinates. The widget uses information from the User [sys_user] record to display the organization hierarchy relative to the selected user. Click a card to open the profile page for that user. To reconfigure the card link, change the URL or Page in the widget instance options. You can drag individual cards to rearrange the chart. You can zoom in or out of the chart view by clicking the magnifying glass icons or by scrolling. Instance options Use the instance options to configure the Organization Chart widget for a portal page.Note: There are no valid values for several instance options. By default, you can set only the following instance options: User Background Color Node Background Color URL Page Field Description Data Card Fields Fields from the user record that appear on each card. By default, each card displays the name, title, department, email, phone, and location of each user. There are no valid values that you can enter in this field. Presentation User Background Color Color of the user card. Use color names or Hex codes. For example, you can enter red or #ff0000. The user background color is lightblue by default. Node Background Color Color of cards that extend from the user card. Use color names or Hex codes. For example, you can enter yellow or #ffff00. The node background color is azure by default. Table Layout Size and margin of the content in each card. There are no valid values that you can enter in this field. Row Layout Alignment of the text in the card. The text is left-aligned by default. There are no valid values that you can enter in this field. Line Color of the lines that connect cards. The lines are black by default. There are no valid values that you can enter in this field. Tree Layout Size, spacing, and alignment of the chart. There are no valid values that you can enter in this field. Picture Layout Size of image space in each card. By default, the image space is 55x65 pixels. The user image is shrunk or stretched to fit the space. There are no valid values that you can enter in this field. Behavior URL Web address of the page that opens when you click a card. Use the part of the portal URL that references the page ID. For example, to navigate to the Service Catalog, enter ?id=sc_category. If left blank, clicking the card opens the page that is specified in the Page field. If the Page field is also blank, clicking the card opens the user profile page by default. Page Portal page that opens when you click a card. Use the page ID. If left blank, clicking the card opens the web address in the URL field. If the URL field is also blank, clicking the card opens the user profile page by default. Note: The URL field overwrites the Page field. To specify a page rather than a URL, leave the URL field blank. Simple List widget The Simple List widget can be used to display any list in the system within Service Portal. Figure 24. 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. Sample Footer widget The Sample Footer widget is an example of a footer you can use in your portal. Unlike other widgets in Service Portal, you add a footer to your portal by configuring it in the Theme form. For more information on adding a footer to a portal, see Create a service portal and its branding. Figure 25. Sample Footer widget Instance options The Sample footer widget does not include instance options. 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 26. Stock widget 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 27. 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. The Ticket Conversations widget displays journal entries from the activity formatter of the target record. 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 28. 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 your location in a ticket. Figure 29. 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 30. 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. Note: The weather API that is used in this widget has been retired. To continue using weather data from an outside source, clone the widget and then call out another weather API in the server script. Figure 31. Weather widget Instance options The Weather widget does not include instance options.
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 Instance options Use the instance options to change the appearance of the approvals widget. Figure 2. Approvals widget instance options 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 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 Instance options The approval record widget does not include instance options. Breadcrumbs widget The breadcrumbs widget allows users to easily navigate around a portal. Using the widget The breadcrumbs widget displays information based on where a page is located in a portal. For example, if you navigate to the Knowledge Base from the home page, then the breadcrumb reads as Home > Knowledge Base. Each subsequent page that you open expands the breadcrumb. Click a page name on the breadcrumbs widget to navigate to that page. For example, to return to the home page, click Home. You can customize this widget to change the breadcrumb path. For more information, see KB0719179. Instance options The breadcrumbs widget does not have instance options. Breakout Game widget The Breakout Game widget is a fun 404 interaction for pages that do not exist. Figure 5. 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 6. Calculator widget Instance options The calculator widget does not include instance options. Carousel widget The carousel widget displays a scrolling list of images. Use the carousel widget to showcase items on your portal page. For example, display items available in a service catalog at the top of the service catalog page. Figure 7. Carousel widget Add slides to the carousel widget Use the related lists for an instance of the carousel widget to add images for the carousel widget to scroll through. Before you beginRole required: Admin or sp_admin Procedure Navigate to Service Portal > Widgets > Carousel. Open the Carousel widget record. From the carousel form, on the Instances related list, under instances, open a carousel instance. From the instance of carousel form, click New on the Carousel Slides related list. Complete the form. Field Description Name Name of the carousel slide. Use the name to differentiate the slide from other slide records. Order Where the slide appears in the list of slides HREF/URL Link to the item in the slide. For example, for a slide with a catalog item, link to page for the catalog item using the HREF ?id=<page name>&sys_id=<sys_id for item>. For more information on linking to a page within a portal, see Navigate by URL. You can also link to other sites using the URL. Background Upload an image for the slides. Carousel images should be 1022x300 pixels. Application Automatically populated with the name of the application the portal falls under. Carousel Name of the instance of the carousel widget you are adding the slide to. This field is not automatically populated and you cannot select an instance of the carousel widget if it does not have a name. Repeat this step for as many slides as you want to appear in the carousel widget. 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 8. 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 9. Data table from instance definition widget 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 10. Data Table from URL definition widget Instance optionsComplete 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 11. Data Table URL with condition builder 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 12. Form widget URL Parameters The form widget accepts the following parameters within the URL.Table 5. Form widget URL parameters Parameter Description sys_id or sl_sys_id Sys_id for the record to be displayed table, sl_table, or t Table for the record to be displayed view or v 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 13. Header Menu widget 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 14. Hello World 1 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 15. Hello World 2 Hello World 2 includes an example of how the server script can be used as well. Figure 16. Hello World 3 For more information on Service Portal APIs, see the GlideSPScriptable API. HTML widget Use the HTML widget to directly inject HTML, 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 17. HTML widget 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 Link widget Link to any other item. Configure Icon Link widgets to link to a specific URL, page within the portal, or another widget. The related list for this widget also allow you configure accessibility by user name or role. Figure 18. Icon Link widget Instance options Table 8. Instance options fields Field Description Title Name of the icon link. Choose something that defines what the widget is linking to. Glyph Icon for the widget. Bootstrap class name Use concurrently with page or theme level CSS. Type Defines what the widget links to. The fields that appear on the form vary depending on which option you select. Choose from: Page: Another page in the Service Portal URL: Link to an external website. Catalog category: Link to a specific catalog category within the service catalog. Catalog item: Link to a specific catalog item. KB topic: Link to a KB topic page. KB article: Link to a KB article by number. KB category: Link to a specific KB category within the knowledge base. Page Page within the portal that you want to link to. This field varies depending on the Type you choose. 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. Template The appearance of the link icon widget. Choose from: Top icon Circle icon Color box 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 19. Icon Menu list widget From the instance options for the icon menu list widget, under Related Lists, click Menu Items. Click New. 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 20. Language Switch widget Instance options The Language Switch widget does not include any instance options. Link button widget The Link Button widget is a button you can nest in any other widget that links to another destination. Figure 21. Link Button widget Instance options Table 10. Instance option fields 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. Link for button Page that the button links to. Use ?id=<page_name> to link to another page in the portal. Contents of button The button text. Login widget The login widget controls user access to your site. Figure 22. Login widget 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 23. My Requests widget 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. Using the widget In the text input field, enter or select a user to see their manager and subordinates. The widget uses information from the User [sys_user] record to display the organization hierarchy relative to the selected user. Click a card to open the profile page for that user. To reconfigure the card link, change the URL or Page in the widget instance options. You can drag individual cards to rearrange the chart. You can zoom in or out of the chart view by clicking the magnifying glass icons or by scrolling. Instance options Use the instance options to configure the Organization Chart widget for a portal page.Note: There are no valid values for several instance options. By default, you can set only the following instance options: User Background Color Node Background Color URL Page Field Description Data Card Fields Fields from the user record that appear on each card. By default, each card displays the name, title, department, email, phone, and location of each user. There are no valid values that you can enter in this field. Presentation User Background Color Color of the user card. Use color names or Hex codes. For example, you can enter red or #ff0000. The user background color is lightblue by default. Node Background Color Color of cards that extend from the user card. Use color names or Hex codes. For example, you can enter yellow or #ffff00. The node background color is azure by default. Table Layout Size and margin of the content in each card. There are no valid values that you can enter in this field. Row Layout Alignment of the text in the card. The text is left-aligned by default. There are no valid values that you can enter in this field. Line Color of the lines that connect cards. The lines are black by default. There are no valid values that you can enter in this field. Tree Layout Size, spacing, and alignment of the chart. There are no valid values that you can enter in this field. Picture Layout Size of image space in each card. By default, the image space is 55x65 pixels. The user image is shrunk or stretched to fit the space. There are no valid values that you can enter in this field. Behavior URL Web address of the page that opens when you click a card. Use the part of the portal URL that references the page ID. For example, to navigate to the Service Catalog, enter ?id=sc_category. If left blank, clicking the card opens the page that is specified in the Page field. If the Page field is also blank, clicking the card opens the user profile page by default. Page Portal page that opens when you click a card. Use the page ID. If left blank, clicking the card opens the web address in the URL field. If the URL field is also blank, clicking the card opens the user profile page by default. Note: The URL field overwrites the Page field. To specify a page rather than a URL, leave the URL field blank. Simple List widget The Simple List widget can be used to display any list in the system within Service Portal. Figure 24. 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. Sample Footer widget The Sample Footer widget is an example of a footer you can use in your portal. Unlike other widgets in Service Portal, you add a footer to your portal by configuring it in the Theme form. For more information on adding a footer to a portal, see Create a service portal and its branding. Figure 25. Sample Footer widget Instance options The Sample footer widget does not include instance options. 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 26. Stock widget 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 27. 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. The Ticket Conversations widget displays journal entries from the activity formatter of the target record. 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 28. 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 your location in a ticket. Figure 29. 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 30. 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. Note: The weather API that is used in this widget has been retired. To continue using weather data from an outside source, clone the widget and then call out another weather API in the server script. Figure 31. Weather widget Instance options The Weather widget does not include instance options.
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 Instance options Use the instance options to change the appearance of the approvals widget. Figure 2. Approvals widget instance options 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 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 Instance options The approval record widget does not include instance options.
Breadcrumbs widget The breadcrumbs widget allows users to easily navigate around a portal. Using the widget The breadcrumbs widget displays information based on where a page is located in a portal. For example, if you navigate to the Knowledge Base from the home page, then the breadcrumb reads as Home > Knowledge Base. Each subsequent page that you open expands the breadcrumb. Click a page name on the breadcrumbs widget to navigate to that page. For example, to return to the home page, click Home. You can customize this widget to change the breadcrumb path. For more information, see KB0719179. Instance options The breadcrumbs widget does not have instance options.
Breakout Game widget The Breakout Game widget is a fun 404 interaction for pages that do not exist. Figure 5. 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 6. Calculator widget Instance options The calculator widget does not include instance options.
Carousel widget The carousel widget displays a scrolling list of images. Use the carousel widget to showcase items on your portal page. For example, display items available in a service catalog at the top of the service catalog page. Figure 7. Carousel widget Add slides to the carousel widget Use the related lists for an instance of the carousel widget to add images for the carousel widget to scroll through. Before you beginRole required: Admin or sp_admin Procedure Navigate to Service Portal > Widgets > Carousel. Open the Carousel widget record. From the carousel form, on the Instances related list, under instances, open a carousel instance. From the instance of carousel form, click New on the Carousel Slides related list. Complete the form. Field Description Name Name of the carousel slide. Use the name to differentiate the slide from other slide records. Order Where the slide appears in the list of slides HREF/URL Link to the item in the slide. For example, for a slide with a catalog item, link to page for the catalog item using the HREF ?id=<page name>&sys_id=<sys_id for item>. For more information on linking to a page within a portal, see Navigate by URL. You can also link to other sites using the URL. Background Upload an image for the slides. Carousel images should be 1022x300 pixels. Application Automatically populated with the name of the application the portal falls under. Carousel Name of the instance of the carousel widget you are adding the slide to. This field is not automatically populated and you cannot select an instance of the carousel widget if it does not have a name. Repeat this step for as many slides as you want to appear in the carousel widget.
Add slides to the carousel widget Use the related lists for an instance of the carousel widget to add images for the carousel widget to scroll through. Before you beginRole required: Admin or sp_admin Procedure Navigate to Service Portal > Widgets > Carousel. Open the Carousel widget record. From the carousel form, on the Instances related list, under instances, open a carousel instance. From the instance of carousel form, click New on the Carousel Slides related list. Complete the form. Field Description Name Name of the carousel slide. Use the name to differentiate the slide from other slide records. Order Where the slide appears in the list of slides HREF/URL Link to the item in the slide. For example, for a slide with a catalog item, link to page for the catalog item using the HREF ?id=<page name>&sys_id=<sys_id for item>. For more information on linking to a page within a portal, see Navigate by URL. You can also link to other sites using the URL. Background Upload an image for the slides. Carousel images should be 1022x300 pixels. Application Automatically populated with the name of the application the portal falls under. Carousel Name of the instance of the carousel widget you are adding the slide to. This field is not automatically populated and you cannot select an instance of the carousel widget if it does not have a name. Repeat this step for as many slides as you want to appear in the carousel widget.
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 8. 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 9. Data table from instance definition widget 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 10. Data Table from URL definition widget Instance optionsComplete 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 11. Data Table URL with condition builder 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 12. Form widget URL Parameters The form widget accepts the following parameters within the URL.Table 5. Form widget URL parameters Parameter Description sys_id or sl_sys_id Sys_id for the record to be displayed table, sl_table, or t Table for the record to be displayed view or v 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 13. Header Menu widget 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 14. Hello World 1 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 15. Hello World 2 Hello World 2 includes an example of how the server script can be used as well. Figure 16. Hello World 3 For more information on Service Portal APIs, see the GlideSPScriptable API.
HTML widget Use the HTML widget to directly inject HTML, 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 17. HTML widget 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 Link widget Link to any other item. Configure Icon Link widgets to link to a specific URL, page within the portal, or another widget. The related list for this widget also allow you configure accessibility by user name or role. Figure 18. Icon Link widget Instance options Table 8. Instance options fields Field Description Title Name of the icon link. Choose something that defines what the widget is linking to. Glyph Icon for the widget. Bootstrap class name Use concurrently with page or theme level CSS. Type Defines what the widget links to. The fields that appear on the form vary depending on which option you select. Choose from: Page: Another page in the Service Portal URL: Link to an external website. Catalog category: Link to a specific catalog category within the service catalog. Catalog item: Link to a specific catalog item. KB topic: Link to a KB topic page. KB article: Link to a KB article by number. KB category: Link to a specific KB category within the knowledge base. Page Page within the portal that you want to link to. This field varies depending on the Type you choose. 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. Template The appearance of the link icon widget. Choose from: Top icon Circle icon Color box
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 19. Icon Menu list widget From the instance options for the icon menu list widget, under Related Lists, click Menu Items. Click New. 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 20. Language Switch widget Instance options The Language Switch widget does not include any instance options.
Link button widget The Link Button widget is a button you can nest in any other widget that links to another destination. Figure 21. Link Button widget Instance options Table 10. Instance option fields 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. Link for button Page that the button links to. Use ?id=<page_name> to link to another page in the portal. Contents of button The button text.
Login widget The login widget controls user access to your site. Figure 22. Login widget 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 23. My Requests widget 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. Using the widget In the text input field, enter or select a user to see their manager and subordinates. The widget uses information from the User [sys_user] record to display the organization hierarchy relative to the selected user. Click a card to open the profile page for that user. To reconfigure the card link, change the URL or Page in the widget instance options. You can drag individual cards to rearrange the chart. You can zoom in or out of the chart view by clicking the magnifying glass icons or by scrolling. Instance options Use the instance options to configure the Organization Chart widget for a portal page.Note: There are no valid values for several instance options. By default, you can set only the following instance options: User Background Color Node Background Color URL Page Field Description Data Card Fields Fields from the user record that appear on each card. By default, each card displays the name, title, department, email, phone, and location of each user. There are no valid values that you can enter in this field. Presentation User Background Color Color of the user card. Use color names or Hex codes. For example, you can enter red or #ff0000. The user background color is lightblue by default. Node Background Color Color of cards that extend from the user card. Use color names or Hex codes. For example, you can enter yellow or #ffff00. The node background color is azure by default. Table Layout Size and margin of the content in each card. There are no valid values that you can enter in this field. Row Layout Alignment of the text in the card. The text is left-aligned by default. There are no valid values that you can enter in this field. Line Color of the lines that connect cards. The lines are black by default. There are no valid values that you can enter in this field. Tree Layout Size, spacing, and alignment of the chart. There are no valid values that you can enter in this field. Picture Layout Size of image space in each card. By default, the image space is 55x65 pixels. The user image is shrunk or stretched to fit the space. There are no valid values that you can enter in this field. Behavior URL Web address of the page that opens when you click a card. Use the part of the portal URL that references the page ID. For example, to navigate to the Service Catalog, enter ?id=sc_category. If left blank, clicking the card opens the page that is specified in the Page field. If the Page field is also blank, clicking the card opens the user profile page by default. Page Portal page that opens when you click a card. Use the page ID. If left blank, clicking the card opens the web address in the URL field. If the URL field is also blank, clicking the card opens the user profile page by default. Note: The URL field overwrites the Page field. To specify a page rather than a URL, leave the URL field blank.
Simple List widget The Simple List widget can be used to display any list in the system within Service Portal. Figure 24. 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.
Sample Footer widget The Sample Footer widget is an example of a footer you can use in your portal. Unlike other widgets in Service Portal, you add a footer to your portal by configuring it in the Theme form. For more information on adding a footer to a portal, see Create a service portal and its branding. Figure 25. Sample Footer widget Instance options The Sample footer widget does not include instance options.
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 26. Stock widget 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 27. 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. The Ticket Conversations widget displays journal entries from the activity formatter of the target record. 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 28. 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 your location in a ticket. Figure 29. 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 30. 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. Note: The weather API that is used in this widget has been retired. To continue using weather data from an outside source, clone the widget and then call out another weather API in the server script. Figure 31. Weather widget Instance options The Weather widget does not include instance options.
