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 Create a widget dependency

    Create a widget dependency

    • 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

    Create a widget dependency

    In Service Portal, you can link JavaScript and CSS files to widgets to create dependencies between widgets and third-party libraries, external style sheets, and angular modules.

    Before you begin

    Role required: admin or sp_admin

    About this task

    Dependencies are loaded asynchronously from the server when needed.

    Widgets can have as many or as few dependencies as needed. However, the more you add, the more content a widget must download to render on the page. Keep dependencies as small as possible for more efficient load times.

    Procedure

    1. Create a dependency package.

      A dependency package is a collection of JavaScript and CSS files that can be then connected to a widget.

      1. Navigate to Service Portal > Dependencies.
      2. In the dependency record, define the following fields.
        Field Description
        Name The name of your dependency. (Useful for selecting a dependency from a dropdown list.)
        Application Application scope for the dependency record.
        Include on page load Select if you want your dependency to be loaded onto the page on the initial page load of Service Portal, or leave unchecked to load the dependency only when the linked widget is loaded onto a page.
        Angular module name Optional. Define the value if the linked JavaScript is an Angular module. Provide the name of the Angular module being loaded, so that it can be injected into the Service Portal Angular application.
    2. Add files to the dependency package.

      After you save the information for your dependency package, use the related lists to add JS and CSS Include files. For each related list, include the following information:

      Field Description
      Display name Name of the script include.
      Source Depending on whether you add a JS Include or a CSS Include, select one of these options from the list:
      • URL
      • UI script (for a JS Include) or Style Sheet (for a CSS Include)

      For a JS Include, use the UI Script field to reference a UI Script found in System UI > UI Scripts.

      For the CSS Include, use the Style Sheet field to reference a record in the sp_css table.

    3. Add a dependency package to a widget.
      After you have created a dependency package and added files, create a relationship between the dependency and a widget.
      1. Navigate to Service Portal > Widgets and find the widget record you want to add the dependency to.
      2. From the Dependencies related list, click Edit.
      3. In the slushbucket, find the dependency you created and double-click to add it to the selected items column on the right.
      4. Save the page to return to the widget record.
    • Include a font icon in a single widget

      If you only want one widget to have access to a font icon, include the font icon in a single widget.

    • Include font icons as a widget dependency

      You can include font icons wherever a widget is loaded by including them as a widget dependency.

    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

      Create a widget dependency

      • 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

      Create a widget dependency

      In Service Portal, you can link JavaScript and CSS files to widgets to create dependencies between widgets and third-party libraries, external style sheets, and angular modules.

      Before you begin

      Role required: admin or sp_admin

      About this task

      Dependencies are loaded asynchronously from the server when needed.

      Widgets can have as many or as few dependencies as needed. However, the more you add, the more content a widget must download to render on the page. Keep dependencies as small as possible for more efficient load times.

      Procedure

      1. Create a dependency package.

        A dependency package is a collection of JavaScript and CSS files that can be then connected to a widget.

        1. Navigate to Service Portal > Dependencies.
        2. In the dependency record, define the following fields.
          Field Description
          Name The name of your dependency. (Useful for selecting a dependency from a dropdown list.)
          Application Application scope for the dependency record.
          Include on page load Select if you want your dependency to be loaded onto the page on the initial page load of Service Portal, or leave unchecked to load the dependency only when the linked widget is loaded onto a page.
          Angular module name Optional. Define the value if the linked JavaScript is an Angular module. Provide the name of the Angular module being loaded, so that it can be injected into the Service Portal Angular application.
      2. Add files to the dependency package.

        After you save the information for your dependency package, use the related lists to add JS and CSS Include files. For each related list, include the following information:

        Field Description
        Display name Name of the script include.
        Source Depending on whether you add a JS Include or a CSS Include, select one of these options from the list:
        • URL
        • UI script (for a JS Include) or Style Sheet (for a CSS Include)

        For a JS Include, use the UI Script field to reference a UI Script found in System UI > UI Scripts.

        For the CSS Include, use the Style Sheet field to reference a record in the sp_css table.

      3. Add a dependency package to a widget.
        After you have created a dependency package and added files, create a relationship between the dependency and a widget.
        1. Navigate to Service Portal > Widgets and find the widget record you want to add the dependency to.
        2. From the Dependencies related list, click Edit.
        3. In the slushbucket, find the dependency you created and double-click to add it to the selected items column on the right.
        4. Save the page to return to the widget record.
      • Include a font icon in a single widget

        If you only want one widget to have access to a font icon, include the font icon in a single widget.

      • Include font icons as a widget dependency

        You can include font icons wherever a widget is loaded by including them as a widget dependency.

      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