Building a Responsive ServiceNow ESS Portal with Twitter Bootstrap – Part 1

ServiceNow CMS + Twitter Bootstrap 3

When I first started building portals on top of ServiceNow, one of my first goals was to try to make a responsive site using Twitter Bootstrap. After several attempts I realized it’s not quite as simple as it sounds. In the next series of blog posts I will cover some simple steps to help get you started. In this post I assume you are at least familiar with Twitter Bootstrap and the ServiceNow CMS.

Some of the challenges with the content management system (CMS):

  • The out-of-box (OOB) ESS portal is full of tables, iframes, and inline styles.
  • Bootstrap uses jQuery and ServiceNow uses Prototype and the two don’t always play nicely together.
  • The HTML markup cannot be changed for many of the content blocks.
  • The site header/footer and layout is defined on the page itself, not the site

Because ServiceNow is a platform, most issues can be solved with a little bit of coding. However for the sake of simplicity, I am going to use just the OOB CMS functionality. For part 1 of this series, I am going to cover replacing the header of the ESS portal. I will use some of the sample templates provided by Bootstrap (http://getbootstrap.com/examples/jumbotron/). Let’s get started:

  1. Navigate to “Content Management > Dynamic” and create a new block.
  2. Copy paste the below html into the content block (within the <jelly> tags):

  1. Save it, and grab the sys_id
  2. Now lets go into the site and create a new layout using the following html (within the <jelly> tags):

  1. Next we will need to create a new page to try out the Bootstrap layout. Fill out the basic information and select the newly created layout from the layout field.
  2. From the page, create a new “Content Theme”
  3. In the “Style Sheet” related list, click new.
  4. Select “Link to External Style Sheet” from the drop down and paste this URL into the URL field: “//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css” and then submit.
  5. From the related list also bring in “Gray CSS – Menu”.
  6. Go back to the page and click on “Edit Page” and then “Add content”, now place two content blocks on to the page, I used “Portal – Block Menu” and “KB Top Five”.

If you did it all correct you should have a page that looks like:

essportal

This is just a starting point, and we still don’t have JavaScript and the portal is still using ServiceNow’s table based blocks. But these will be covered in our next blog post. Hope you have enjoyed this tutorial and if you have any questions please, don’t hesitate to post a comment.

18 comments

        1. Felix, I should have part 2 complete by Monday. Specifically what part of CMS & Bootstrap are you interested in? It might end up taking quite a few posts to fully cover this topic. The next one will be a video to make it easier for users to follow.

          1. Thats great news!
            I am really interested in getting rid of the table based blocks you mentioned servicenow brings with it. I would also like to know how to get respond.js working, because my company still uses IE8 for many employee-clients.
            I really love the things you did within ServiceNow.

  1. Hi Nathan

    I really like your work. I am still new to the CMS. We got the new services CSS from servicenow that includes HR changes etc. Looks much nicer than the standard ESS. Howver I haven’t yet fully figured out how to include java scripts within dynamic pages. Would be cool if you can publish a tutorial using that as well (incl jelly tags?).

    Cheers,
    Markus

    1. Hima,

      Have you included the Bootstrap JavaScript file? I don’t include it in my example because that will be included in Part 2 and I was trying to keep it simple. The dropdowns use the the “bootstrap.min.js” file which is also dependent on jQuery, so before the dropdowns will start working you will need both files included on the page. Most people place the files at the of the Layout, I do it differently, but I will cover that next post. But to simply get it working just include them, make sure jQuery is included first, and you set it in noConflict mode since prototype is still included.

  2. Hi Nathan,

    Thanks for the update. Yes its working really great. I’m a ServiceNow developer with 3Years of experience but don’t have any experience on CMS. Now i’m learning the CMS. Your posts really helps me to understand. I came across the problem where CSS styles were not working as expected. Seems default ServiceNow styles overriding it. any Suggestions on the ?

    Regards,
    Hima Pallela.

    1. Yes that’s one of the challenges with the CMS. There are a couple of solutions, like including ?sysparm_direct=true however that will strip out the entire header HTML, so you’ll have to load your own JavaScript and CSS… and it also generates a JavaSript error due to missing js_includes. Now there are workarounds to that as well such as overloading the “view_content” jform, however that also require platform knowledge and is not a good solution moving forward.

      My suggestion: create an in between style sheet that loads between the OOB style sheets, and the bootstrap css file. When you come across a conflict, just create your own reset for the element in your file. It’s not an elegant solution, but as far as I know there is no way to get rid of css_includes without causing even more issues.

  3. Hi Nathan,

    Thanks for this post, I was searching for part 2 of this. Could you please let me know if you have posted.

    1. Maros, I decided not to call it part 2 because it would end up being 10 parts just to get through the basics. So just look at some of the newer posts dealing with Bootstrap and I just have them titled based on the topic instead.

  4. Hi Nathan,
    This menu is good, but it’s static menu, how to make it dynamic , so it automatically picks up new pages which are created, can this source from the same menu source which OOTB ones do or some other way it can work.

    Cheers
    Ajay

Leave a Reply to kavya Cancel reply

Your email address will not be published. Required fields are marked *