Demystifying ServiceNow’s Content Management Application

ServiceNow’s Content Management application has been around for quite some time now. Because of this, there is a mixture of old out-of-the-box content and “newer” content, and distinguishing between the two can be tricky. I believe this is why the Content Management application can be a challenge to master. Not only do you need to know HTML, CSS, JavaScript and Jelly, but you also need to understand the structure of ServiceNow and how the CMS components play together in the application.

My goal is to help you understand the underlying structure of the Content Management application so you can be on your way to creating awesome sites.

The Structure

The following records make up the core components of the Content Management application.

Let’s start with the following picture to help conceptualize the core Content Management records.

CMS Record Structure

  • A Site record is the parent most record of the Content Management application
  • A Site contains 1 or more Pages
  • A Page is assigned to 1 and only 1 Site
  • A Page contains 1 or more Content Blocks
  • A Site may contain a Theme
  • A Theme contains 1 or more Style Sheets (CSS)
  • A Site may have a global Layout

Site Records

As stated before, the Site record houses all records, such as Pages, that are specific to the site. Just think of your favorite website. It probably contains hundreds, if not thousands of pages. Each Page record is associated with a Site.

Site Record

The out-of-the-box Employee Self-Service Site record.

The picture above shows a Site record. Let’s take a look at the most important fields:

  • Name – this is the name of the Site record used for reference within ServiceNow. This will not be displayed anywhere within the actual site.
  • URL suffix – this will be the first part of the URL. Think of a file structure that contains folders for the sites, and files for the pages. If you have multiple sites, there would be a folder for each site. Then, the pages would go into the site folders, which would give you something like:
  • Site 1
    site-1/home-page
    site-1/about-page
    site-1/contact-page
    Site 2
    site-2/home-page
    site-2/about-page
    site-2/contact-page
  • Home page, Search page, Login page – these fields allow you to define Pages to the Site record that tend to have a special component to them. ServiceNow will try to help you out with the backend routing when you define these Pages.
  • Default layout – this is the Layout that all Pages within the Site will inherit.
  • Default theme – similar to the layout, a Page within this Site record will inherit the Style Sheets found within this Theme record.

Page Records

The page record is where things get interesting. A Page may contain Content Blocks. We’ll get back to Content Blocks in a bit, but for now just think of them as providing a way to put actual content, or text, on the page. Page records may also overwrite their parent Site attributes, such as Layouts or Themes. This way, if you have a one-off page, you can apply it’s own style and structure to just that one Page.

Page Record

The home page record for the out-of-the-box ESS site.

Let’s take a look at the main Page fields:

  • Name – this is the name of the Page record within ServiceNow. It is not generally referenced within the actual HTML of the site.
  • URL suffix – this is the second part of the URL used within the example provided for the Site URL suffix. If you wanted to access this page, which is apart of the Employee Self-Service Site record, the full URL would be: https://your-instance.service-now.com/ess/main/
  • Layout – this field gives you the ability to overwrite the default Site Layout. This will usually be left blank.
  • Content theme – just like the Layout field, you may overwrite the default Site Theme. This will usually be left blank as well.
  • Content site – the Site record that houses this Page.
  • Title – text that will be used within the HTML <title> element, which shows up on the browser’s tab.

Content Block Records

Content Blocks provide a way to add stuff to your page. ServiceNow provides a number of different out-of-the-box Content Blocks. Here are the most common ones:

  • Dynamic Content Blocks
  • List Content Blocks
  • iFrame Content Blocks
  • Navigation Content Blocks
  • Static HTML Content Blocks
  • Header Content Blocks

If you wanted to show all open incidents that are assigned to the current user, then you would use a List Content Block. If you needed to generate dynamic content based on the current user’s role, you would use a Dynamic Content Block.

Dynamic Content Block Record

Here is what a Dynamic Content Block record looks like.

Theme Records

A Theme record is pretty basic. It’s just a container that houses 1 or more Style Sheets.

Theme Record

The out-of-the-box Gray Theme record.

Style Sheet Records

A Style Sheet is where you’ll store the CSS a site uses. You may have multiple Style Sheets per site. For example, you could have a Twitter Bootstrap Style Sheet as well as a customer specific Style Sheet. In this case, you would have 2 Style Sheets assigned to 1 Theme.

Style Sheet Record

Here is what a Style Sheet record looks like.

Layout Records

Layouts provide a cookie-cutter like structure to place content blocks in. ServiceNow provides a number of out-of-the-box layouts, although most of them use HTML tables to define dropzones, which is considered bad practice by today’s standards.

Layouts contain Dropzones. Dropzones are areas where a Content Block will go. Let’s use another image to help conceptualize this:

Dropzones in a Layout

Here you can see that the Layout is the outer green box while the Dropzones are the inner green boxes. The blue Content Blocks may be placed inside a Dropzone.

You can create Dropzones by using the following HTML:

<table id="${jvar_name}" width="100%">
        <tr>
            <td colspan="2" id="dropzone0" dropzone="true"/>
        </tr>
</table>

The most important piece is id="dropzone0" and dropzone="true". If we wanted to follow today’s best practices and put our Dropzones on div elements, we could do so like this:

<div id="dropzone0" dropzone="true"></div>

You can add Content Blocks to Dropzones by going into a Page record, and clicking the Edit Page UI Action, where you will then be taken to a page similar to this:

Dropzones

You can then click the Add Content link to add Content Blocks to a Dropzone defined within the Layout.

Conclusion

I hope this article has helped with understanding the main records that comprise the Content Management application within ServiceNow. Stay tuned for additional CMS articles that will go into more detail on Layouts, Content Blocks and Jelly!

Web Development Resources

A friend recently asked for a list of front-end web development resources. Instead of emailing him a list, I figured I’d write a blog post so others could possibly benefit from it.

A Note on the Term Web Development

The term “web development” is an umbrella term that is often used to describe a wide range of technologies that go into the design and development of a web site.

Wikipedia defines web development as,

Web development is a broad term for the work involved in developing a web site for the Internet or an intranet. Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services.

An analogy: “I am a web developer” can be compared to saying “I work for Walmart”.

When you first hear “I work for Walmart”, you probably think of a cashier or greeter. However, with a corporation as large as Walmart, there are thousands of different positions. Do you work at a corporate office? If so, are you in the HR department, finance department, customer relations department, sales department, or in Walmart’s IT department? Are you swimming at the C-level or are you an intern?

Just as the phrase “I work at Walmart” is very broad, so isn’t, “I’m a web developer”. Oftentimes you will see web development broken into two categories: front-end and back-end. Front-end development is the group of technologies that are shipped to the user’s browser, e.g. HTML, CSS, JavaScript. Back-end development is the group of technologies that are on the servers, such as a server side language (PHP, Python, .NET), a database (MySQL, MongoDB, Oracle), a web server (Apache, Nginx) and a number of other technologies. Depending on how granular you’d like to get, which often depends on the scale of the website, there can be literally hundreds of different technologies involved in serving up a webpage. Just think of how many technologies Google or Amazon use for their sites. They may use a set of technologies for one website, while using a completely different set of technologies for another site.

For the purposes of this post, front-end will encompass HTML, CSS and JavaScript.

1 Tutorials

2 All Encompassing Sites

3 Courses

4 Free Books