_
_
One of ServiceNow’s greatest strengths is its flexibility and the creation of nearly limitless possibilities. The same principle carries over into the Service Portal and the development of custom widgets. If you have ever found yourself wishing you could import a cool Javascript Library or a new font or a stylesheet, I will tell you, you can! The Service Portal Widget Dependencies allow you to use third-party libraries or stylesheets in your widgets, opening up several possibilities. A Widget Dependency is a collection of Javascript and CSS files that links a widget to any external resources. You can include JS libraries, CSS stylesheets, fonts, and even custom angular modules within a dependency.
The first step is to create your widget dependency. You can do this by viewing your widget of choice and scrolling to the widget’s related lists.
When creating a dependency, I recommend doing so within the global scope. This way, you can reuse this dependency in other widgets or themes.
Dependencies have three fields: Name, Include on page load, and Angular module name.
Name - The name of your dependency
Include on page load - When true, the dependencies are loaded during the initial page load. If false, the dependency loads when its linked widget is loaded
Angular module name - This is an optional field used when bringing in angular modules. You need to enter the name precisely as defined in your module.
After saving your new dependency, you can add your JS and CSS includes, which brings us to Step 2.
In this step, you’ll add the third-party libraries into your dependency so your widget can use them. There are two methods for creating a JS or CSS include. The first is by URL. You can quickly and easily link your widget to a public CDN by simply pasting the URL. The second option is copying and pasting the code into a UI Script or a CSS Stylesheet. Of course, you can also write your own UI Scripts or Stylesheets.
Using a UI Script:
The first thing we’ll need to do is create our UI Script. To do this, navigate to System UI > UI Scripts in the application navigator and click ‘New’. From there, we give our UI Script a name, description, and javascript code.
Now that your UI Script has been created, you can reference it from your JS Include. First, navigate back to your dependency(Service Portal > Dependencies) and create a JS Include in the related list at the bottom of the form. Name it and select the UI Script option within the Source choice field. This will display a reference field for the UI Scripts table where you can reference the UI Script you just created.
You can also import/create custom angular modules using UI Scripts and load them into your dependency. For example, you can create custom angular filters that aren’t included in OOTB.
Using a CSS Stylesheet:
Creating CSS Includes follow a very similar process as JS Includes. First, we’ll need to create a Stylesheet. You can do this by searching Service Portal > CSS in the application navigator and creating a new record. Then, in the form view, give your Stylesheet a name and paste it into your CSS.
Now navigate back to your dependency and create a new CSS Include. Give it a name, choose the Stylesheet option in the Source field, pick the Stylesheet you just created, and click submit!
Using a CDN or URL:
I often find myself needing a font that ServiceNow doesn’t offer OOTB. So how can I import fonts into my Portal? Well, the answer is… Dependencies! A great resource and quick and easy solution is loading in Google Fonts through their public CDNs.
To add your own Google Fonts, navigate to the CSS Includes Related List within your Dependency and click New. Again, give it a name; this time, we will select ‘URL’ in the Source dropdown. Copy the href from your chosen font and paste it into the CSS file URL field. After you submit it, you can start using it within your widget!
If you find a font you want to use which doesn’t have a CDN or URL, there’s still hope! You can create a CSS Stylesheet and create your @font-faces by adding the font files into your instance as attachments. Then set the src: url() as a path to their sys_ids in the sys_attachment table.
Take advantage of all the great libraries out there and start building amazing widgets/portals! ServiceNow offers endless development possibilities, so have fun and start creating great stuff!
