The Service Portal often gets compared to web based CMS’s like WordPress or Drupal (“It’s just a website, isn’t it?”). Those of us that are familiar with Service Portal know that it is its own beast. There are a few fundamental differences:
1) There is no strict file structure to interact with on Service Portal to control templates of output pages
2) All direct interaction and development with the Service Portal happens through the front-end only. The backend of ServiceNow is largely obfuscated and inaccessible.
What is often overlooked is that, despite its differences, Service Portal has the structure to support JavaScript plugins built for WordPress, Drupal, or even CMS-less websites through its own interface – it’s just knowing where to plug everything in and how they interact that is the important part.
A popular WordPress plugin is Revolution Slider, which is used to create flashy, interactive sliders that are visually appealing. They provide users another way to interact with your content and help drive engagement. Please take note that in this example, the plugin would need to be configured in a WordPress instance before it is exported. To make it clear, a user can in theory use any JavaScript plugin in Service Portal, but this article is focused on Revolution Slider as an example.
This article makes the following assumptions:
1) You own a legal license to use Revolution Slider and are not violating the terms of use for the plugin.
2) You have access to a WordPress instance where you can export your slider from or freely manipulate.
The Process
Revolution slider can be exported to HTML. Configure your slider within the WordPress interface using the GUI. After you are finished configuring, click your slider on the base “Revolution Slider” page and click the “Export to HTML”, as pictured below.
This will give you a zip file that should automatically start downloading.
After it is finished downloading, create a directory somewhere on your machine and extract the contents. You will notice that it has downloaded a few things – An HTML file and a few folders, as follows:
Follow the following steps to take what we’ve exported and convert it into a widget:
1) Open the contents of “slider.html” using a notepad program of your choosing and copy the text. Take note of a few lines near the top (Should begin on line 34 to line 43, and this may vary depending on the version of Revolution Slider you are using), as we will need to make some adjustments before we create our widget from this.
We will be changing the src, which stands for “Source”. Remove the “js/extensions/” part of the src for every JavaScript element being included. There are a few more lines that will need our attention before we can use this, starting at line 20:
Similarly to the above, let’s remove the “css/” from the “href” on line 20 and the “js/” from the src for the two JavaScript includes.
The last thing we need to take care of here are the image links (for the backgrounds we’re using or any assorted image tags) – I recommend doing a search in your document for “<img src=” (minus quotes) and eliminating the “assets/” path from the src. In my instance I am only using images for backgrounds but keep in mind you’d need to do this for any images being used in the foreground of your document as well.
After this is all complete, create a new Service Portal Widget in your instance and paste the content of this document into the “Body HTML” part of the widget.
2) Next, we’ll need to create a mechanism by which the widget can access these items. First, let’s take our images and get them uploaded into the instance. Navigate to “System UI ->Images” in your target ServiceNow instance. Upload the images under the “assets” folder that Revolution Slider exported for you here, ensuring you are naming them the same thing with the same file extensions. Do this for every image in the folder.
3) Next, let’s ensure we add the JavaScript files that Revolution Slider needs to the correct location. They can truly be added anywhere, but for organization I prefer to add them to the Service Portal theme that my target Portal is using. Navigate to your Service Portal “Theme” record, and put your attention on the related list titled “JS Includes”. Here, we must take the contents of the “js” folder as well as the contents of the nested “extensions” folder inside that one and put them in this location in the ServiceNow Instance.
Create your JS include record one by one. Once you’ve created one, created the linked “UI Script” that will connect to the include, and copy/paste the file contents of the .js file into this. Be sure the UI Script shares the name with the js file, extension and all. The JS Include itself does not need to share a name in order to function properly.
4) The last thing we need to include are the CSS files. We can also do this from the Theme page, specifically the “CSS Includes” related list. Create a new stylesheet, and create the associated CSS include inside of that and relate the two. Dump the contents of the CSS file into the CSS include, similarly as you had done in step 3.
If this was all followed correctly (and no filepaths in the original Widget HTML was missed), this widget will be ready to display on the portal. Go to your page designer of the Service Portal Page of choice, add the widget, and let your fancy colors fly.
Congratulations! You have integrated Revolution Slider into your portal.
