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

Create a widget

Create a widget

Pro code users can create widgets by simply cloning and editing an existing widget to add functionality.

Only advanced users comfortable working with HTML, client and server scripts, and CSS should make changes to a widget.

Note: Widgets are read only so you can benefit from future updates. To make any changes to a widget you need to clone it first.
To clone and edit a widget:
  1. Open the Widget Editor in the Service Portal Configuration page, then select a widget from the Edit an existing widget list.
  2. From the list menu in the widget header, click Clone.
    Note: If you clone a widget that uses the Angular ng-template, you need to also manually clone the template and adjust the code accordingly.
    Figure 1. Add a widget
    Clone a Widget form

    You can also use the list menu to create a completely new widget. New widgets need to be configured completely from scratch. It's easier to clone a widget similar to what you are trying to achieve and change what you need to.

  3. Select Create test page to automatically create a page containing the widget.
  4. Based on your use case, edit any of the HTML Template, CSS, Server Script, Client Script, and Link Function.

    View any of the existing widgets as code examples. They include widget development best practices.

    For example, view the sample code and the preview in the Hello World widget.

    Figure 2. Hello World widget code example
    Use the sample code in the Hello World widget
  5. In order to enable a preview of your widget, in the list menu, select Enable Preview. Then use the eye icon that appears to show or hide a preview of your widget.