Creating your own portfolio in ServiceNow platform

This blog post is a sort of guide rather than a full comprehensive tutorial to creating your own portfolio in ServiceNow platform.

I tried to create something in a short span of time in the last weekend. You can check that here !

Find out a template

The very first thing to do is to find a template or design for your portfolio. You can start from scratch but it would be a waste of hell lot of time. So, surf through the internet and Google would prove to be your best friend. I found my design from here. There are lot of sites out there like dribble. You can also search for SPA (Single Page Application) websites.

Create a UI Page

Download the template and open its html file in an editor. Copy the whole code and paste it in a new UI Page in between jelly tags. When you'll try to save the UI Page, oh ghosh ! you'll see a lot of errors. Most of the errors will be because of not having a closing tag. Try to resolve them.

Include css files using Style Sheets 

Yeah, you need to bring each css file to the platform. Go to Content Management >> Style Sheets. Copy each css file in the downloaded template to Style Sheets in the platform.

Now, go to your UI Page and find all <link> tags. For example, suppose a tag is like this:

 <link rel="stylesheet" type="text/css" href="./test_site_files/animate.css">

Change the href attribute as:

<link rel="stylesheet" type="text/css" href="<sys_id_of_animate_css>.cssdbx"></link>

Here, <sys_id_of_animate_css> is sys_id of animate.css in Style Sheets table.

Including js files using UI Scripts

Now, you need to copy each js file into UI Script.  Give name same as that in downloaded template but without the js extension.

Now, go to UI Page and change <script> tags. For example:

<script async="" src="./test_site_files/analytics.js"></script>

is changed to:

<script async="" src="analytics.jsdbx"></script>

If you get errors while saving minified js file in the UI Script, you can unminify using JSBeautifier and can try to resolve errors.

Adding Images

I added icons of twitter, facebook and gmail by using:

style="background: url(logo3.png) no-repeat 6px center;" 

Here, logo.png is uploaded to the platform using System UI >> Images.

The logo icons looks like:

Removing Padding

To have your container to occupy the whole window, you may need to add the following style to your container:

style="padding-left: 0px;padding-right: 0px;"

Making UI Page public

Let name of your UI Page be 'test_page'. To make this UI Page accessible to everyone without any logging credentials, you need to follow these steps:

1. Go to “sys_public.do” from navigation filter and give Page as “test_page” and click submit.
2. In a new incognito window, go to this url <servicenow_instance>/test_page.do  and it will work. 

Using Particle-JS library

I used particlejs for animation. Its syntax is like:

<div id="particles-js"></div>

<script>

particlesJS('particles-js',object);

</script>

So, there is a call to particleJS() function with first argument as id of the div which will have animation. The second argument is a javascript object setting the parameters of animation.

UI Page XML code

The code for UI Page can be found here.

Some Suggestions

Use your local for debugging

If you are stuck in something, try to run the html code in local.

Use inspect element to resolve errors

You can also use inspect element and console of chrome browser to debug

Issue of https and http

Replace occurrences of http in your UI Page, UI Scripts and Style Sheets with https.