Service Portal Dependencies - Adding 3rd Party Libraries to your Widgets

[Dylan Mann1]

One of ServiceNow’s greatest strengths is its flexibility and the creation of near limitless possibilities. This same principle carries over into the Service Portal and the development of custom widgets. If you’ve ever found yourself wishing you could import a cool Javascript library or a new font or stylesheet, I would tell you, you can! The Service Portals Widget Dependencies allow you use third party libraries or stylesheets in your widgets opening up tons of 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. For this tutorial, we’ll be using the Slick Carousel library. You can check out the Slick repository here and it’s supporting website here. Also, if you’d like to download the full Slick Carousel Widget featured in this blog post you can follow this link: https://blog.jahnelgroup.com/the-last-carousel-widget-youll-ever-need/

Step 1: Create your 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 exactly as it’s defined in your module

After saving your new dependency you’ll be able to add your JS and CSS includes, which brings us to Step 2.

Step 2: Create/Add your JS and CSS Includes

In this step you’ll add the third party libraries into your dependency so they can be used by your widget. 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 in the URL. The second option is to copy and paste the code into either a UI Script or a CSS Stylesheet. You can also write your own UI Scripts or Stylesheets of course! In this demo we’ll use both the UI Script and CDN methods of creating Includes.

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 and description and paste the javascript code from the slick repo in the script editor.

Now that your UI Script has been created you can reference it from your JS Include. Navigate back to your dependency(Service Portal > Dependencies) and create a JS Include in the related list at the bottom of the form. Give it a name and select the UI Script option within the Source choice field. This will display a reference field for the UI Scripts table where you’ll be able to reference the UI Script you just created.

You can also import/create custom angular modules using UI Scripts and loading them into your dependency. For example, you can create your own custom angular filters which aren’t included OOB. If you’d like a blog post specifically on this topic, send me an email and I’ll make it happen!

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. In the form view, give your stylesheet a name and paste in your css.

Now just 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:

Often times I find myself in need of a font that ServiceNow doesn’t offer out of the box. 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. For instance, with the Slick widget I created I use the Pacifico font to mirror the font used in Ken Wheeler’s demo site.

To add your own Google Fonts, go to the CSS Includes Related List within your Dependency and click New. Give it a name, and this time we’re going to select ‘URL’ in the Source dropdown. Copy the href from the font you chose and paste it into the CSS file URL field. After you submit you can start using it within your widget!

Here’s a code snippet where my font is used:

h1 {
    font-family: Pacifico;
}

If you find a font you want to use which doesn’t have a CDN or URL available, there’s still hope! You can create a CSS Stylesheet and create your own @font-faces by adding the font’s files into your instance as attachments. Then set the src: url() as a path to their sys_ids in the sys_attachment table. I like to give people what they want so If you’d like to see a blog post/tutorial on creating your own @font-faces send me an email or leave a comment and I’ll post one soon!

Part 3: Start creating awesome stuff!

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!

Here’s what I made!

If you create something cool using dependencies, I’d love to see it! Share your creation in the comments and see who can get the most upvotes!

To see more posts like this or to download my Slick Widget visit the Jahnel Group ServiceNow Blog!

[Community Alums]

Hi Dylan, great tutorial, thanks!

Are you able to provide the example HTML you have used in your widget to initialize the JS Includes?

Thanks again,

Jason

[Dylan Mann1]

Hey Jason,

You can actually download this widget if you follow this link. For this specific widget I needed to create a Link function to store the properties for each slick type. Then I set my carousels class to whichever slick type I needed. Here's an example:

HTML

<div class="variable-width">
    <div class="{{c.getClass()}}" 
         ng-repeat="slide in ::data.slides">
    <img ng-src="{{slide.background}}"
         ng-class="{'border': c.options.display_border==='true'}"/>
</div>

Link Function

// Variable Width
$('.variable-width').slick({
   dots: displayDots,
   infinite: true,
   speed: 300,
   autoplay: isAutoplay,
   autoplaySpeed: 5000,
   slidesToShow: 1,
   centerMode: true,
   variableWidth: true
});

Hope this helps!

- Dylan

[Community Alums]

Hello again Dylan,

I'm having another issue with this process and am hoping you might be able to help?

I was able to successfully implement something similar to what you have demonstrated in this post on my personal dev instance (which is on Kingston).

However, when I am attempting to port my work over to our Dev environment (which is still on Jakarta), I have been unable to get the same code working.

The JS & CSS includes do not seem to appear on the dependency as related lists.

I have tried adding them to the dependancy following the process at the below link, however, my widget is not functioning desired:

https://docs.servicenow.com/bundle/jakarta-servicenow-platform/page/build/service-portal/task/widget-dependencies.html

I suspect that it is a version issue, but am hoping there is something else I've missed?

Many Thanks & Kind Regards,

Jason

[Dylan Mann1]

Hi Jason,

Have you tried configuring the related lists on the Widget Dependency form? If you click on the hamburger menu and go to Configure > Related Lists, see if you can add the JS and CSS Includes to the form. 

Otherwise, you'll need to manually create some records to link the JS or CSS Includes to your Dependency. You'll need to create those records on the following tables:

m2m_sp_dependency_js_include (For JS Includes)

m2m_sp_dependency_css_include (For CSS Includes)

Hope this helps!

Dylan

[suvro]

That was great Dylan,

i was trying to create a event calendar widget, for that I used a 3rd party library, I used URLs for JS and CSS and it was working fine.

But when I am trying to copy paste the code that are present in the URL, it is not working properly.

What can be the reason behind it and what I need to check if I want to fix it?

Thanks and Regards,

Chandra Suvro Bose

[Vivek Verma]

Hi Dylan,

How can we make sure dependency js file fully loaded.

Becasue I have script in HTML that must be run after the dependency loaded.

Thanks,

Vivek|LinkedIn

[Jose Baby1]

Hi Vivek ,

Try to add the UI script as 'JS includes' on the sp_theme record of your portal  ( instead of adding it as a dependency on the widget ).

This should make sure that the UI script is loaded as soon as the portal is hit. Please let me know if it works.

Thank you 

Jose 

[Vivek Verma]

Thank you!

[Alexander33]

Hi Dylan, great tutorial, but i have one question, when using this approach i have this error



When adding the cdn for the .js script they have something like this 

What can i do in ths case?

<script>
src="https://example.js"
type="module"
data-stencil-namespace="se-components"
</script>

[Asim7]

Hi @Alexander33,

Where you able to find an answer for this?

I'm facing this exact issue now.