To understand what is Widget Dependency and how to create the dependencies

One of the best thing about ServiceNow is, it provides services with every possible functionality. And this goes same with Service Portal. ServiceNow ,Service Portal provides easy‑to‑use services that can be accessed from any device, any time.

So, Dependencies are loaded asynchronously from the server when needed.

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

Note : Keep dependencies as small as possible for more efficient load times.

1. Create Dependency package

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

In widget under the related list dependencies is visible, Dependencies Section consist of 3 fields

• Name - The name of your dependency. (Useful for selecting a dependency from a dropdown list)
• Include on page load - Select if you want your dependency to be loaded onto the page on 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 JS/CSS files to the dependency package

After you save the information for your dependency package,  

Include libraries into your dependency so that can be used by the widget by use of the related lists to ad JS and CSS Include files.

Basically there are two methods for creating a JS or CSS include.

• URL
• UI script (for a JS Include) or Style Sheet (for a CSS Include)

UI Script (JS/CSS Include)

Create a UI Script and refer it to the JS Include in the Widget Dependencies (Service Portal > Dependencies) under the related list. Under the JS Include related list add the UI script created.

Below it,

Using a CSS Stylesheet (CSS Include):

Same can be done by creating CSS Includes (same steps as JS Include). First create a CSS Style sheet by navigating to Service Portal > CSS .

Using a URL 

If want to add some Google Fonts, then go to the CSS Includes Related List within your Dependency and click New