---
sourceDocument: Australia ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/platform-user-interface

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Create a widget dependency

# Create a widget dependency {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

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: sp_admin or 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 connected to a widget.
   1. Navigate to Service PortalDependencies.
   2. In the dependency record, define the following fields.  
      {#widget-dependencies__table_mzc_jdl_3w__entry__2}

      | 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. |
      [ ]

      {#widget-dependencies__table_mzc_jdl_3w}
   {#widget-dependencies__substeps_sp3_vwd_k1b}
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:  
   {#widget-dependencies__table_sjx_vgl_3w__entry__2}

   | 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) {#widget-dependencies__ul_mdx_dcm_3w} For a JS Include, use the UI Script field to reference a UI Script found in System UIUI Scripts. For the CSS Include, use the Style Sheet field to reference a record in the `sp_css` table. |
   [ ]

   {#widget-dependencies__table_sjx_vgl_3w}
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 PortalWidgets 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.
{#widget-dependencies__steps_utm_swd_k1b}
* **[Include a font icon in a single widget](https://servicenow-prod.fluidtopics.net/7dfl7ywDHYtHN285dm8Zdg)**   
  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](https://servicenow-prod.fluidtopics.net/5eXaV_YEGEAU4k0zyrAOqA)**   
  You can include font icons wherever a widget is loaded by including them as a widget dependency.

*[\>]: and then