Product documentation Docs
    • English
    • Deutsch
    • 日本語
    • 한국어
    • Français
  • More Sites
    • Now Community
    • Developer Site
    • Knowledge Base
    • Product Information
    • ServiceNow.com
    • Training
    • Customer Success Center
    • ServiceNow Support Videos
  • Log in

Product documentation

  • Home
How search works:
  • Punctuation and capital letters are ignored
  • Special characters like underscores (_) are removed
  • Known synonyms are applied
  • The most relevant topics (based on weighting and matching to search terms) are listed first in search results
Topics are ranked in search results by how closely they match your search terms
  • A match on the entire phrase you typed
  • A match on part of the phrase you typed
  • A match on ALL of the terms in the phrase you typed
  • A match on ANY of the terms in the phrase you typed

Note: Matches in titles are always highly ranked.

  • Release version
    Table of Contents
    • Now Platform capabilities
Table of Contents
Choose your release version
    Home New York Now Platform Capabilities Now Platform capabilities Service Portal Service Portal widgets Widget developer guide Recommendations for developing widgets

    Recommendations for developing widgets

    • Save as PDF Selected topic Topic & subtopics All topics in contents
    • Unsubscribe Log in to subscribe to topics and get notified when content changes.
    • Share this page

    Recommendations for developing widgets

    When developing custom widgets, keep these recommendations in mind for optimal performance, scalable development, and a good user experience.

    Create a default state that provides an example to the end user

    A widget does not have instance options defined when initially added to a page. A widget in this empty state can appear blank and cause confusion. In situations where a widget requires some initial configuration, ensure that your widget has a default state that communicates to the admin what configuration is necessary.

    Widgets can also be created with demo data. Demo data can also be used to:

    • Clearly demonstrate the widget functionality to the user.
    • Provide data when previewing the widget in the widget editor. (Demo data is not visible in the designer).

    Learn more: Tutorial: Build a custom widget.

    Embed a widget rather than clone when possible

    Embedding an existing widget into your custom widget takes advantage of pre-existing functionality without cloning or duplicating code. You can still pass parameters into the embedded widget to control its behavior.

    Learn more: Embed an existing widget

    Add limits to GlideRecord queries to improve performance

    If your server-side script uses GlideRecord queries, the setLimit function can restrict the number of records returned, and improve response time on queries. For added flexibility, you can tie this limit to an instance option rather than assigning a hard-coded value (for example: now_GR.setLimit(options.limit || 100)).

    Learn more: GlideRecord setLimit Function

    Create a directive instead of embedding a complex widget

    When an embedded widget is called from the server, all the scripts associated with that widget are returned. If you only need a subsection of a widget, embedding the entire widget creates unnecessary overhead. Instead, use directives to share lightweight code between widgets. Directives are useful, for example, when building UI components. Complex components with server-side and client-side functionality are best left as widgets. Use a directive instead of an embedded widget to:

    • Share scope or custom scope behavior with multiple widgets.
    • Share a reusable, lightweight subsection of a widget.
    • Share a common UI feature, such as a list or an avatar.
    • Augment widget behavior.

    Learn more: Reuse components with Angular Providers.

    Use a service or factory to share data and persist state

    Data services and factories maintain and persist state in a widget without requiring multiple calls to the server, enabling you to:

    • Keep widgets synchronized when changing records or filters.
    • Share data between widgets.
    • Develop more performant widgets.

    Learn more: Reuse components with Angular Providers.

    Handle events with a publish/subscribe service

    Avoid using $broadcast in the DOM. $broadcast dispatches the event name to all child scopes notifying registered listeners, which can be an expensive call that requires the use of the $rootScope global object.

    Instead, use a publish/subscribe service to handle events. When using a publish/subscribe service, a clear relationship forms between your widgets through callback handlers. In this model, you can better control the state of your events.

    Use REST calls or server.get to fetch data from the server

    When you call server.update(), the entire widget is returned from the server. If your widget includes divergent code paths, multiple calls to update the server can affect performance. As a rule, use your server script to set up the initial state of your widget. For subsequent updates, use scripted REST APIs that call script includes on your instance. This practice:

    • Separates business logic from UI elements.
    • Centralizes your code, allowing changes to be made in one place.
    You can also use server.get to pass information to the server. Use this function along with input.action to execute specific parts of the server script.
    Develop with localization, accessibility, and UI in mind

    To create the best experience for your users, follow these guidelines:

    • Consider the impact of your widget in a mobile environment. For example, avoid using mouse-over and other events that do not translate to a mobile device.
    • Use SCSS variables to reuse items. See SCSS variables.
    • Use variable names when using colors.
    • Wrap strings for translation in localization APIs. See Internationalize a widget.
    Remove unused Angular Providers from client script
    For easier maintenance, remove any unused Angular Providers that were injected into the client script function statement.
    Avoid using <script> tags in HTML templates
    To lessen the likelihood of production issues in Service Portal, avoid using inline templates using <script> tags in a widget's HTML template. Instead, create a related Angular ng-template record for the widget.

    Tags:

    Feedback
    On this page

    Previous topic

    Next topic

    • Contact Us
    • Careers
    • Terms of Use
    • Privacy Statement
    • Sitemap
    • © ServiceNow. All rights reserved.

    Release version
    Choose your release version

      Recommendations for developing widgets

      • Save as PDF Selected topic Topic & subtopics All topics in contents
      • Unsubscribe Log in to subscribe to topics and get notified when content changes.
      • Share this page

      Recommendations for developing widgets

      When developing custom widgets, keep these recommendations in mind for optimal performance, scalable development, and a good user experience.

      Create a default state that provides an example to the end user

      A widget does not have instance options defined when initially added to a page. A widget in this empty state can appear blank and cause confusion. In situations where a widget requires some initial configuration, ensure that your widget has a default state that communicates to the admin what configuration is necessary.

      Widgets can also be created with demo data. Demo data can also be used to:

      • Clearly demonstrate the widget functionality to the user.
      • Provide data when previewing the widget in the widget editor. (Demo data is not visible in the designer).

      Learn more: Tutorial: Build a custom widget.

      Embed a widget rather than clone when possible

      Embedding an existing widget into your custom widget takes advantage of pre-existing functionality without cloning or duplicating code. You can still pass parameters into the embedded widget to control its behavior.

      Learn more: Embed an existing widget

      Add limits to GlideRecord queries to improve performance

      If your server-side script uses GlideRecord queries, the setLimit function can restrict the number of records returned, and improve response time on queries. For added flexibility, you can tie this limit to an instance option rather than assigning a hard-coded value (for example: now_GR.setLimit(options.limit || 100)).

      Learn more: GlideRecord setLimit Function

      Create a directive instead of embedding a complex widget

      When an embedded widget is called from the server, all the scripts associated with that widget are returned. If you only need a subsection of a widget, embedding the entire widget creates unnecessary overhead. Instead, use directives to share lightweight code between widgets. Directives are useful, for example, when building UI components. Complex components with server-side and client-side functionality are best left as widgets. Use a directive instead of an embedded widget to:

      • Share scope or custom scope behavior with multiple widgets.
      • Share a reusable, lightweight subsection of a widget.
      • Share a common UI feature, such as a list or an avatar.
      • Augment widget behavior.

      Learn more: Reuse components with Angular Providers.

      Use a service or factory to share data and persist state

      Data services and factories maintain and persist state in a widget without requiring multiple calls to the server, enabling you to:

      • Keep widgets synchronized when changing records or filters.
      • Share data between widgets.
      • Develop more performant widgets.

      Learn more: Reuse components with Angular Providers.

      Handle events with a publish/subscribe service

      Avoid using $broadcast in the DOM. $broadcast dispatches the event name to all child scopes notifying registered listeners, which can be an expensive call that requires the use of the $rootScope global object.

      Instead, use a publish/subscribe service to handle events. When using a publish/subscribe service, a clear relationship forms between your widgets through callback handlers. In this model, you can better control the state of your events.

      Use REST calls or server.get to fetch data from the server

      When you call server.update(), the entire widget is returned from the server. If your widget includes divergent code paths, multiple calls to update the server can affect performance. As a rule, use your server script to set up the initial state of your widget. For subsequent updates, use scripted REST APIs that call script includes on your instance. This practice:

      • Separates business logic from UI elements.
      • Centralizes your code, allowing changes to be made in one place.
      You can also use server.get to pass information to the server. Use this function along with input.action to execute specific parts of the server script.
      Develop with localization, accessibility, and UI in mind

      To create the best experience for your users, follow these guidelines:

      • Consider the impact of your widget in a mobile environment. For example, avoid using mouse-over and other events that do not translate to a mobile device.
      • Use SCSS variables to reuse items. See SCSS variables.
      • Use variable names when using colors.
      • Wrap strings for translation in localization APIs. See Internationalize a widget.
      Remove unused Angular Providers from client script
      For easier maintenance, remove any unused Angular Providers that were injected into the client script function statement.
      Avoid using <script> tags in HTML templates
      To lessen the likelihood of production issues in Service Portal, avoid using inline templates using <script> tags in a widget's HTML template. Instead, create a related Angular ng-template record for the widget.

      Tags:

      Feedback

          Share this page

          Got it! Feel free to add a comment
          To share your product suggestions, visit the Idea Portal.
          Please let us know how to improve this content

          Check any that apply

          To share your product suggestions, visit the Idea Portal.
          Confirm

          We were unable to find "Coaching" in Jakarta. Would you like to search instead?

          No Yes
          • Contact Us
          • Careers
          • Terms of Use
          • Privacy Statement
          • Sitemap
          • © ServiceNow. All rights reserved.

          Subscribe Subscribed Unsubscribe Last updated: Tags: January February March April May June July August September October November December No Results Found Versions Search preferences successfully updated My release version successfully updated My release version successfully deleted An error has occurred. Please try again later. You have been unsubscribed from all topics. You are now subscribed to and will receive notifications if any changes are made to this page. You have been unsubscribed from this content Thank you for your feedback. Form temporarily unavailable. Please try again or contact  docfeedback@servicenow.com  to submit your comments. The topic you requested does not exist in the release. You were redirected to a related topic instead. The available release versions for this topic are listed There is no specific version for this documentation. Explore products Click to go to the page. Release notes and upgrades Click to open the dropdown menu. Delete Remove No selected version Reset This field is required You are already subscribed to this topic Attach screenshot The file you uploaded exceeds the allowed file size of 20MB. Please try again with a smaller file. Please complete the reCAPTCHA step to attach a screenshot
          Log in to personalize your search results and subscribe to topics
          No, thanks Login