Introduction
ServiceNow's Service Portal is using Bootstrap 3.3.6 as the basis of its CSS framework. As the CSS libraries are continuously upgrading and including modern features, it is obvious that many of us will want to leverage these features in our existing service portals as well. While this feature is not natively supported by the Service Portal, there is a way to inject Bootstrap 5 into your portal.
This article will provide a step-by-step guide to use the latest version of Bootstrap (currently 5.3.8) in your Service Portal. Similarly, you can include any other external CSS libraries in your service portal.
Why Consider Bootstrap 5?
The latest version of Bootstrap is brings several advantages over its predecessor. It removes jQuery dependency, offers improved customization, provides better responsive utilities, includes new UI components, and delivers smaller file sizes with better performance.
Understanding Dependencies in ServiceNow
Before diving into the implementation of Bootstrap 5 in Service Portal, it is important to understand what dependencies mean in the ServiceNow Service Portal context.
- Dependencies in Service Portal refer to the external CSS and JavaScript libraries/files that you want to use in your portal or widgets. These dependencies expand the functionality of your portal without changing the core system files.
- When you want to add any external libraries, we need to use the source URL (typically a CDN link) of the external libraries. ServiceNow then handles the inclusion of these resources automatically when the portal or widget loads.
- Dependencies can be added at the theme level, making them available throughout your portal, or at the widget level, loading them only for the widgets/pages that require them. This flexibility enables you to optimize resource loading based on your individual needs.
Adding Bootstrap 5 in your Service Portal
This approach makes Bootstrap 5 available across your entire portal by adding it as a dependency to your Service Portal theme.
Step 1: Open the Specific Portal Record
Navigate to Service Portal > Portals and choose the portal record where you wish to include Bootstrap 5.
Step 2: Open the Associated Theme
Open the Theme record that is associated with this portal.
Important: Make sure the theme is unique to your portal and does not appear in any other portals. If the theme is shared across numerous portals, make a clone of it just for your portal to avoid unwanted consequences.
Step 3: Add CSS and JS Dependencies
In the Theme record you will find two related lists: CSS Includes and JS Includes. We need to create a new records in these two related list using Bootstrap 5 CDN.
The CSS and JS file URLs should be the CDN links from Bootstrap. You can find these on the official Bootstrap website in the Download section (https://getbootstrap.com/docs/5.3/getting-started/download/).
Create the CSS Include:
Create the JS Include:
Step 4: Confirm the Associations
After creating the CSS and JS includes, check if these are associated with your theme. If they are not automatically linked, click Edit on your theme record and manually add them to the CSS Includes and JS Includes related lists.
Step 5: Set the Correct Order
These Bootstrap dependencies must be arranged according to the precedence of other dependencies in your theme. In general, JavaScript files should load in the proper order to prevent dependency problems, and CSS files should load before any custom styles that might override them.
Understanding the Challenge
Service Portal is built on Bootstrap 3.3.6 and AngularJS. Simply including Bootstrap 5 into your portal can lead to CSS conflicts, broken layouts, and unpredictable behavior. The key is to implement Bootstrap 5 strategically and with proper isolation.
Conclusion
Integrating Bootstrap 5 into ServiceNow Service Portal through theme dependencies is a straightforward process that opens up modern CSS framework capabilities for your portal. By following the step-by-step implementation guide and adhering to best practices, you can successfully leverage Bootstrap 5's features while maintaining compatibility with your existing Service Portal implementation.
The same dependency management approach can be applied to include other external CSS and JavaScript libraries, making this knowledge valuable for various Service Portal customization scenarios. Whether you're adding animation libraries, icon sets, or other frameworks, the process remains consistent: add the dependency to your theme, test thoroughly, and scope appropriately to avoid conflicts.
