Supercharging ServiceNow Widgets with Third-Party Libraries

Introduction

Want to level up your ServiceNow widgets? Third-party libraries can add that extra flair without much hassle. In this blog, I’ll show you how to seamlessly integrate them into your widgets for a smoother and more powerful user experience. Let’s dive in!

Why Use Third-Party Libraries?

What Are Third-Party Libraries?

Third-party libraries are pre-written code packages developed by others to solve common problems or provide extra functionality. Think of them as shortcuts—someone else has already done the heavy lifting, so you don’t have to reinvent the wheel!

Why Use Them?

1. Save Time: Instead of writing everything from scratch, you can use these libraries to add features or solve complex problems quickly.

2. Powerful Features: They bring advanced functionalities like charts, animations, or form validations, making your widgets more dynamic.

3. Community Tested: Many libraries are widely used and constantly improved by a community of developers, so you can trust their reliability.

4. Focus on What Matters: Spend more time building custom features than handling mundane tasks.

How Are They Helpful?

Imagine needing a sleek, interactive chart for your dashboard. Instead of painstakingly coding it yourself, you can use a library like Chart.js to create one in minutes. Or, if you need advanced date-pickers or responsive design elements, libraries like Moment.js or Bootstrap come to the rescue.

In short, third-party libraries are the secret to creating efficient, feature-packed widgets without wasting time. Let’s see how to integrate them into ServiceNow widgets!

Prerequisites

1. Basic Knowledge About Widgets.

2. Basic Knowledge About ServiceNow.

Create the Masterpiece

1. Navigate to Your ServiceNow Instance.

2. Open Widgets from Service Portal → Widgets

3. Click "New" to create a new widget

4. Name it anything, (I am naming it dependency injection for this blog).

5. Save the widget.

6. Open your browser, and search for Lineicons CDN. [I will be using Lineicons in this blog.

7. Click "CDN Integration | Lineicons Free & Pro | Docs"

8. Copy the link i.e cdn.lineicons.com/5.0/lineicons.css

8. Copy the link to a new tab to verify the CDN. [optional]

9. It should open this type of CSS. [optional]

10. Back in the widget, scroll to bottom and find Dependencies Form Section.

11. Click New and fill out the form. You can the module name and name anything you need.

12. Once the form is saved, open the CSS includes tab and click on New

13. Fill out the form and paste the copied CDN into the CSS file URL and save the record.

14. Now in the created widget, you can use LineIcons directly in your code.

Testing and Result

1. Open in Widget Editor

2. Open the CDN Integration | Lineicons Free & Pro | Docs - Lineicons" and Click On Icons

3. Click "Search"

4. Click "SVG"

5. Paste it in the widget’s HTML and save the record.

6. Now, in the preview, you should be able to see the search icon.

7. You can do the same for other icons.

Now You’re Ready to Level Up!

Now that you’ve learned how to use third-party libraries in your ServiceNow widgets, the possibilities are endless. Whether it’s adding sleek features or simplifying complex tasks, you’re all set to build smarter and better widgets. So go ahead—experiment, innovate, and take your widgets to the next level!