shuynh
Giga Expert

The Content Management System (CMS) is an application that provides users the ability to create a custom interface for the ServiceNow platform and custom interfaces for other applications. The CMS (plugin is com.glide.cms) is automatically in the base instance at no extra charge (OOB) and includes these applications and modules:

Screen Shot 2015-11-03 at 4.04.39 PM.JPG

  • Sites
  • Pages
  • Blocks - change headers, navigation menus, lists, dynamic and static HTML
  • Specialty Content - Flash movies, content links, iFrames
  • Design - create themes, style sheets, layouts, frames, and add images
  • Configuration - access the Configuration page, page detail settings, content types, list definitions, and login rules.

 

 

With CMS you can turn project ideas into a reality. You've heard that with ServiceNow you can build anything right? Well, with CMS it can bring your websites, pages and portals to life.

  • Design a company-wide service catalog that offers a collection of services.
  • Present a customized UI for a Knowledge Base.
  • Create customized login pages, search pages, views of lists, tables, charts and graphs.
  • Design a complete website.
  • Integrate ServiceNow with other company applications.
  • Build a tailored self-service portal for end users that is in compliance with a corporate style guide.

 

 

CMS Components

The following are the basic building blocks provided with the CMS application that are used to create a fully functional website quickly!   The Employee Self-Service is an sample website that is made out-of-box and it utilizes these elements.   This site provides existing working examples of each which can be used like templates to build your own site!

Screen Shot 2015-11-03 at 4.27.15 PM.JPG

Content Site

A site is a group of related content pages that will have the same basic theme, layout and URL suffix.   This is typically the interface for "self-service", a simplified front end to make requests, view articles, submit incidents and interact through live feedThe following is the out-of-box site or portal:

content site cms.jpg

Content Page

A content page within the CMS is a web page which basically displays blocks of content.   The following is one page from the out-of-box Employee Self-Service site.   Notice the page has a specific path or url that corresponds to a unique "filename" (create_incident) which is the 'URL suffix' of the content page [content_page] record:

content page cms.jpg

 

Content Type

A Content Type is a way to provide site-specific control of how the system data defined as templates is rendered.   It determines how the CMS displays a list -or- record whenever a particular database table (ie incident, kb_knowledge) is accessed.   Content Types have two fields for custom Jelly (Summary Template for lists and Detail Template for form) and a link to a Content Page to display the content.   To see an out-of-box example along with how content types can be customized, checkout this post: CMS and Content Types

content type cms.jpg

Layout

A Layout is actually a UI Macro (reusable Jelly snippet) that is used to define an HTML structure.   It uses table formatting and special id's in the HTML to define dropzones which contain content blocks that make up a content page:

cms layouts.jpg

Dropzones

Dropzones are defined in the Layout; the Layout is specified in the Content Page.   Dropzones are where you place the content blocks that make up the page.

Screen Shot 2015-11-03 at 3.55.33 PM.JPG

Content Block
Content blocks are the chunks of actual HTML that make up a Content Page. They might be dynamically rendered but in the end they are output as HTML.   content block cms.jpg

 

 

 

The CMS provides a number of specific Content block types you can use; the following are some examples utilized within the out-of-box Employee Self-Service portal:

 

Content Block Types - Headers

A header block is a visual element placed at the top of pages. The header block provides a place for branding and areas for important site-wide functionality.

Screen Shot 2015-11-04 at 10.08.53 AM.JPG

 

Content Block Types - Dynamic

Use dynamic blocks to script (using Jelly) or pull information from the system:

dynamic content blocks.jpg

Content Block Types - List

List blocks are content blocks that dynamically generate a list of links to records within the ServiceNow instance. The list can be made using a simple query on any table or by scripting a more advanced query. When a user clicks a link in a list block, the associated information is displayed in a detail page determined by a Content Type record defined for the table (ie incident in the example below):

list blocks.jpg

Content Block Types - Static

A static block allows you to define scripted conditions and HTML code to be run within a page:

static block.jpg

 

Specialty Content Block Types - Detailed Content

A detailed content block displays the content of an existing document, such as incident, knowledge article or a service catalog request, as a block on a content page.   This block works in conjunction with and is referenced in the 'Default detail page' field within a Content Type record.   This detail block displays the document list or form determined by the 'Type' (ie table) specified in the Content Type.

detailed block.jpg

 

Specialty Content Block Types - Content Links

A Content Link block provides a way to specify a URL link.

content links.jpg

Specialty Content Block Types - iframe

An iFrame embeds a URL on a page within a frame. It can be used to embed external pages or to render ServiceNow content within the content page.   The following are a couple examples:

iframe blocks.jpg

 

The following provides an example of how Content Blocks can be added to build a page within the CMS:

content block css.JPG

Themes and Style Sheets

A theme is a collection of one or more style sheets (CSS files) that define a consistent look for the site (a set of pages).   This is the theme associated to the out-of-box Employee Self-Service site:

style themes.jpg

 

 

 

Style Sheets are standard Cascading Style Sheets (CSS) that define the look and feel of all elements within the interface. Content pages do not reference style sheets directly. To invoke a style sheet, you must assign the style sheet to a Theme using the related list on the Theme form.

 

CSS can either be internal (stored in the database) or external (hosted on the server), based on organizational needs. To define an internal style sheet, use standard CSS in the style field:

style sheets.jpg

Using external CSS allows the Content Management System to use exactly the same CSS as a corporate website or other online resource. Use an external style sheet by defining a URL that points to the .cssx file.   Upload the external CSS file to the platform via the Attachments [sys_attachment] table and then the .cssx file can then be referenced using a URL.   In a similar way, custom fonts can also be uploaded and referenced within the Style Sheet:

Screen Shot 2015-11-04 at 9.56.25 AM.JPG

Style Sheet are then broken down into CSS declarations where style properties and values are specified:

css declarations.jpg

Also see Changing the font size in your Instance.

 

 

So, what's the next step? Get started creating your own site!   There are two ways:

You can create a site from scratch:

create new cms site.jpg

-or-

 

Copy the existing Employee Self-Service site:

copy existing cms site.jpg

 

This method builds a new site quickly by cloning a new site record and elements prefixed by the name entered above:

cloning new site.jpg

 

...scroll down to the Pages related list to see the pages are cloned as well:

pages cloned.jpg

Launch the url to display the newly cloned site:

new cloned site.jpg

Using the out-of-box elements as a guide, you can customize the site to meet your business needs.

7 Comments