---
tags: [SPWidgetDependency, service portal, widget dependency, sp_dependency]
---
# SPWidgetDependency

Creates a widget dependency — a bundle of CSS and JavaScript includes that widgets and themes can reference (`sp_dependency`). Dependencies ensure that shared libraries and stylesheets are loaded when needed.

## Signature

```typescript fluent
SPWidgetDependency(config)
```

## Parameters

### config

`SPWidgetDependency`

**Properties:**

- **$id** (required): `string | number | ExplicitKey<string>`

- **name** (required): `string`
  The name of the widget dependency (required)

- **$meta** (optional): `object`
  - **installMethod**: `'first install' | 'demo' | 'once'`
    Map a record to an output folder that loads only in specific circumstances.
    'first install' - > 'unload',
    'demo' -> 'unload.demo'


- **angularModuleName** (optional): `string`
  The Angular module name for the widget dependency

- **cssIncludes** (optional): `CssIncludeWithOrder[]`
  An array of CSS includes for the widget dependency

- **includeOnPageLoad** (optional): `boolean`
  Whether the widget should be included on page load (default is false)

- **jsIncludes** (optional): `JsIncludeWithOrder[]`
  An array of JavaScript includes for the widget dependency

- **portalsForPageLoad** (optional): `(string | Record<'sp_portal'>)[]`
  An array of portals for the widget dependency



## Examples

### CSS Includes

Create CSS includes from external URLs or sp_css records with RTL support

```typescript fluent
/**
 * @title CSS Includes
 * @description Create CSS includes from external URLs or sp_css records with RTL support
 */
import { CssInclude } from '@servicenow/sdk/core'

// CSS Include from URL
CssInclude({
    $id: Now.ID['bootstrap-css'],
    name: 'Bootstrap CSS',
    url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
    rtlCssUrl: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css',
})

// CSS Include from sp_css with lazy loading
CssInclude({
    $id: Now.ID['custom-css'],
    name: 'Custom Portal CSS',
    spCss: 'ccfbb128f13494f68c570b646ba5d335',
    lazyLoad: true,
})

```

### JavaScript Includes

Create JS includes from external URLs or sys_ui_script records

```typescript fluent
/**
 * @title JavaScript Includes
 * @description Create JS includes from external URLs or sys_ui_script records
 */
import { JsInclude } from '@servicenow/sdk/core'

// JS Include from URL
JsInclude({
    $id: Now.ID['chartjs-include'],
    name: 'Chart.js',
    url: 'https://cdn.jsdelivr.net/npm/chart.js',
})

// JS Include from sys_ui_script
JsInclude({
    $id: Now.ID['ui-script-include'],
    name: 'Custom UI Script',
    sysUiScript: '5f41b53498566648389c9b40286de458',
})

```

### Widget Dependency with JS and CSS

Create a widget dependency that bundles JavaScript and CSS includes

```typescript fluent
/**
 * @title Widget Dependency with JS and CSS
 * @description Create a widget dependency that bundles JavaScript and CSS includes
 */
import { SPWidgetDependency, JsInclude, CssInclude } from '@servicenow/sdk/core'
const myJsInclude = JsInclude({
    $id: Now.ID['my-js-include'],
    name: 'My JS Include',
    url: 'https://cdn.example.com/script.js',
})

const myCssInclude = CssInclude({
    $id: Now.ID['my-css-include'],
    name: 'My CSS Include',
    url: 'https://cdn.example.com/style.css',
})

SPWidgetDependency({
    $id: Now.ID['my-dependency'],
    name: 'My Widget Dependency',
    angularModuleName: 'myModule',
    jsIncludes: [{ order: 100, include: myJsInclude }],
    cssIncludes: [{ order: 100, include: myCssInclude }],
})

```