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.
This article makes the following assumptions:
2) You have access to a WordPress instance where you can export your slider from or freely manipulate.
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.
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.
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.