Content Management PDF

Content Management
Creating a Front-End for ServiceNow
PDF generated using the open source mwlib toolkit. See http://code.pediapress.com/ for more information.
PDF generated at: Sun, 28 Jun 2015 07:15:05 PST
Introduction to Content Management

Content Management Overview
Overview
The Content Management System (CMS) is a ServiceNow application that primarily enables users to create a custom
interface for the ServiceNow platform and ServiceNow applications. The CMS application is powerful and flexible,
so customers have used it for a wide variety of projects from creating entire websites to integrating with other
products. The Content Management application is active by default.
A CMS typically requires a systems administrator or a web developer to set up and add features, but non-technical
users can use the application as a website maintenance tool to make changes to a website. For more information, see
CMS Planning.
Timing is important when considering the addition of content management. Successful deployments of the content
management system usually take place after phase one processes (for example, Incident, Problem, Change, Catalog,
and Knowledge) are in place. This is especially true if the team has limited website design experience. Waiting until
phase two of deployment gives administrators time to work in ServiceNow and to understand how the organization
uses the system and what business needs it meets.
Also consider the maturity level of data in the ServiceNow system. Depending on the ITIL processes used, content
management will only be useful and effective once the data within ServiceNow is established. Ensure that
hierarchies, tasks, and workflows are well defined. For example, before creating a catalog front end, confirm that the
service catalog has been in place for some time, has been used, and contains data. The same is true for a knowledge
management front end, particularly when high ratings or view counts define article placement on the page.
Following are several CMS project ideas:
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, or 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.
Activating the Content Management System

The Content Management System application and the ESS Portal (implemented within Content Management)
application are automatically installed on new instances. If they are not active on your instance, administrators can
activate them.
Click the plus to expand instructions for activating a plugin.
If you have the admin role, use the following steps to activate the plugin.
1. Navigate to System Definition > Plugins.
2. Right-click the plugin name on the list and select Activate/Upgrade.
If the plugin depends on other plugins, these plugins are listed along with their activation status.
3. [Optional] If available, select the Load demo data check box.
Some plugins include demo datasample records that are designed to illustrate plugin features for common use cases. Loading demo data is
a good policy when you first activate the plugin on a development or test instance. You can load demo data after the plugin is activated by
repeating this process and selecting the check box.
4. Click Activate.
Example Sites
There are two common interface approaches within the ServiceNow community:
An image and text-based interface similar to Amazon.com
A search-based interface similar to Google
Both approaches have been used successfully. The approach you select depends on the needs of the people using the
data and how easy it is to train them. While the two design philosophies are different, both approaches share the
common goal of UI simplicity.
To view information about several websites created by Service-Now using the CMS, please see the following:
ServiceNow ESS portal
ServiceNow website
ServiceNow mobile website
The ESS Portal

The sample site included in the base system, the ESS portal, uses an image and text-based design that illustrates how
the platform can be themed to match corporate branding guidelines. The ESS portal is based on common designs
found throughout the ServiceNow community.
A ServiceNow Customer
Example
Icon-based menu interface.
At the ServiceNow Knowledge11 user

conference, the CERN European
Laboratory for Particle Physics
presented the CERN Portal that was
created with the CMS using a
search-based design. The search-based
interface (similar to Google) is
becoming more and more popular for
use in the scientific and medical
sectors of the ServiceNow community.
Getting Started
To create a new site and add pages,
follow the step-by-step procedures.
To read a case study about creating
the ESS Portal sample site, see
ServiceNow ESS portal.
To read a case study about how the
ServiceNow website was built in
the CMS, see ServiceNow Website.
To read a case study about how the
ServiceNow mobile website was
built in the CMS, see ServiceNow
Mobile Website.
Search-based interface that feels familiar to anyone who has ever used Google.
Enhancements
Dublin
Administrators can now add content pages to an application.
Content Management Administration

Overview
The Content Management System (CMS) is a tool for creating customized web pages and extending the look and
feel of the ServiceNow platform. Content Management administrators can use the Content Management >
Configuration module to configure the CMS. Users with the content_admin role can configure CMS sites.
Configuration options include setting a login page, selecting a default layout, and selecting a default theme. Page
detail settings, content types, and macros can also be modified.
Content Management Application Framework

The Content Management application contains modules for creating, maintaining, and managing sites and pages.
Following is information about each of the modules in the Content
Management application:
Option
Description
Content Management
Sites
Lists sites created and the sample Service Management (SM) portal that is included in the base system. A site is a group of pages
with a consistent look and feel defined by a common layout and theme.
Pages
Lists pages created for all sites. Groups of pages are used to create sites.
Blocks
All
Lists all blocks, including their category and type. Use blocks to create reusable, defined pieces of content.
Headers
Lists all header blocks. Use header blocks to display items such as global search, navigational menus, and logos.
Navigation
Menus
Lists all navigation menu blocks. Use navigation menu blocks to define site-wide navigation. There are many different menu
options available.
Dynamic
Lists all dynamic blocks. Use dynamic blocks to create content. Requires knowledge of HTML and basic Jelly script (such as
writing macros and authoring dynamic content).
Lists
Lists all list blocks. Use list blocks to manage site navigation by generating items from data tables.
Static HTML
Lists all static HTML blocks. Use static HTML blocks to author web page content using a WYSIWYG (What You See Is What
You Get) editor and the HTML field. Users who are comfortable generating mark-up directly should use dynamic HTML blocks
rather than static HTML blocks.
Specialty Content
Flash Movies
Lists all Flash movie blocks added to the CMS. Use Flash movie blocks to embed any Flash movie (.swf file) in a content page.
Content Links
Lists all content links and their corresponding URLs. Use content links to generate lists from the content_links table.
IFrames
Lists all IFrames created in the CMS. Use iframes to place a ServiceNow form (or form from another source) on a page.
Design
Themes
Lists all themes available in the CMS and specifies which themes are active. Use themes, a collection of Cascading Style Sheets
(CSS) files, to define the look of pages.
Style Sheets
Lists all style sheets in the CMS and their type. Use style sheets, standard CSS, to define the look and feel of all elements.
Layouts
Lists all layouts. Use layouts to define where elements can be placed on a page.
Frames
Lists all frames. Use frames to manage designed containers for content blocks and other elements.
Images
Lists all images. Use images to add visual interest to pages.

Configuration
Configuration
Page
Shows the settings for default login page, search page, layout, and theme. If settings are not specified at the site level, the defaults
selected here are applied.
Page Detail
Settings
Lists all configurable content blocks. Use configurable content blocks when trying to render multiple forms within the
ServiceNow instance.
Content Types
Lists the pages that display content from a table. Each content type corresponds to a table.
List Definitions
Lists the list definitions used to extend the summary template defaults that are defined on the site level.
Login Rules
Lists the rules that define what users see after they log in.
Setting Application Configuration Defaults and Site Configuration

The Configuration page is used with the Page Detail Settings page to define all default pages. For example, to create
custom pages for search results, catalog item detail, or knowledge articles, set the values here. Items defined here are
defaults; they are true for all sites that do not specify different configuration settings.
Content Configuration Page

Set all global CMS defaults on the configuration page. The options set on the configuration page can be overridden
at a site level easily.
Note: The Content Management page cannot be domain separated.
To set default CMS configuration options, navigate to Content Management > Configuration Page.
Field
Login page
Input Value
Specifies a content page to use as the login page (if a login page is not set at the site level). Include fields on the login page where
users can enter a user name and password to view the site.
Search page Specifies a content page for displaying search results (if a search results page is not set at the site level).
Default
layout
Specifies a default layout for content pages to use. For more information on layouts, see Defining a Layout.
Default
theme
Specifies a default theme for content pages to use. For more information on themes, see Theming Content Pages.
Page Detail Settings

Page details are configurable content blocks that can be useful when trying to render multiple forms that have a
defined content type. The page detail table is tied to defined content types. Currently, catalog items (sc_cat_item)
and knowledge articles (kb_article) details are defined in the base instance.
For more information, see Detailed Content Blocks.
Content Management Step-by-Step Overview
Content Management Step-by-Step Overview

Overview
Follow these steps to set up your content management portal:
1. Plan the site: Obtain resources, communicate with others about design, and gather content. See CMS Planning.
2. Create the site: Create new sites from within CMS or by editing a copy of the ESS Portal (in versions prior to
Fuji) or the Service Management Portal (starting with the Fuji release). To create a new site from within CMS,
see Creating a Site.
3. Create a content page: Create content pages, which are the backbone of a site. CMS offers different types of
pages to meet different needs. See Creating a Content Page.
4. Add navigation: Provide logical navigation paths guide site users to the information they need. See Add
Navigation.
5. Test the site: After you have created or modified a site, test the site to ensure that content displays properly and
all links work correctly. See Test the Site.
Content Management Planning

Overview
Before building a website in CMS, it is important to have a good understanding of what needs to be built and who
the audience is for the site. A high volume of content can heavily influence the look and feel of the site and the site
hierarchy. When deciding what content to show, keep in mind the realities of long-term maintenance. Design for
ease of maintenance and the people who will be taking care of the system. This level of planning can be
time-consuming, but is important.
CMS Prerequisite Checklist

The first step is to review a basic checklist of website design prerequisites that are useful in setting expectations,
scoping out deliverables, and making reasonable timelines. It is important to mention both the planning and
execution parts of site design, to understand site building, and to provide a working overview of the CMS.
Steps in the checklist:
Gather the proper resources - ensures that the process is not delayed by a lack of resources.
Organize data within the instance - ensures that the instance has all of the data the CMS will present.
Organize the content - ensures that system content and CMS content is complete.
Leverage corporate style design guidelines - saves design time and guarantees that the CMS site conforms to the
corporate look and feel.
Use prototypes and rapid web design - ensures that the structure of the CMS site is clear and planned out, either
on paper or an electronic file.
Gather People Resources

Before building a site or pages, two people resources should be identified:
One resource is responsible for gathering corporate style design guidelines, defining the copy (written
terminology and content for the site), and defining the site flow.
The second resource is a CMS webmaster who works together with the first resource, executes the designs, and
makes the site work. The webmaster should have the following skills:
Basic ServiceNow administration skills

HTML
CSS
Graphic design
Web design
Team Assignments
Once you have people or groups identified for the project, establish who will do what.
Determine ownership for each page.
Set a page update schedule so owners do not overwrite each other.
Formalize content management processes, including updating pages and content review.
Organize and Design When the Data is Ready

It is impossible to design a moving target or design for data that is not in place. Ensure that the necessary data and
content have been added to the instance before designing the CMS site.
Take a good look at the instance and the ITIL processes that will be implemented in CMS. Ensure that the data
within the system is already at a mature enough level that it represents a clear vision of the applications being
used (for example, service catalog, knowledge management, and incident management).
Ensure that the hierarchies and categories in the system (for example, the topics and categories in the knowledge
base or the categories and subcategories in the service catalog) are logical. These categories will be very
important when designing the entry page into the knowledge base or service catalog.
Organize Content
A site created in CMS relies on two different types of content:
System information, such as knowledge base articles and catalog items
CMS site information, such as site pages, images, and menus
System Content
Organize the content so the interface is usable. The organizational process depends on what data is going to be
leveraged, both in the CMS (using sites, parent pages, pages, and navigational menus) and throughout the rest of the
system. For example, within the catalog you have "category" and in the knowledge base you have "topic" and
"category", which can be used with filtered lists for good results.
While staying organized within CMS is important for long-term maintenance of the site, most data probably lives in
other ServiceNow applications. Communicate with the people who administer the knowledge base, service catalog,
business service portfolio, and any other system data that will be accessible through pages you create using the CMS.
For example, the team that created the ServiceNow corporate website in CMS evaluated many of the naming
conventions used in the corporate knowledge base.
CMS Content
Start by listing all of the content you want to host on the CMS pages. Examples include Help pages, My Requests,
My Approvals, and specific catalog items. Think about current solutions to implement right away and ideas for the
future.
Within CMS, grouping allows you to define the top-down menu structure. There are several ways to group, such as
the Parent Page reference field. Group all content logically and find a common name.
In an IT environment, you can clearly define two main paths:
Content built for an end user:
common name: End User Page
Content built for an IT professional:
common name: IT Professional Page
Other, more general, groups could be:
Reports
Reporting Page
Help and knowledge
Knowledge page
Branding Elements
Branding is the names, terms, signs, colors and symbols that identify an organization. Your marketing department
probably has many branding elements they can share with you as you plan CMS pages. Consider incorporating the
following branding elements into the CMS pages you create:
Logos
Color palette
Tag line
Trademarked elements
Graphics
Site Design
While planning your website, consider providing a core set of features with a standard appearance throughout the
site. The following web design elements are often used to create a consistent look:
Page templates
Navigation schemes
Header
Breadcrumbs
Footer
Forms
ServiceNow
Analyze and organize the following ServiceNow features in your instance if you plan on using any of these features
with CMS pages:
Account settings
Email
Workflow Approvals
Filters
Leverage Corporate Style Design Guidelines

In many cases, the look and feel of your website is dictated by a style guide. Style guides are often lengthy, detailed,
and pertain to any corporate interface.
Many organizations have an art team that designed the organization's website. Contact this team and involve
designers early. They can help and give the interface their approval. Without approval, there is the risk of having
to redesign the entire site because it does not adhere to organizational guidelines.
Corporate style guides take the guesswork out of design. The example style guide shown is defined down to the
pixel. Creating a site without following the style guide takes a great deal of time. With the style guide it is easy to
create clean CSS and HTML for the site.
Some modifications to the base design for forms within the system may be necessary. The content area of any
CMS design should be no smaller than 860px or service catalog forms will be clipped. The sample style guide
shown below calls for the content area to be 576px, which would clip those forms.
10
11
Create Prototypes and Leverage Rapid Web Design

Prototype (on paper, digitally, or both) to visualize the site. This is a technique many user interface designers use.
Print out and annotate the prototype, noting what needs to be done on each page within the site.
Within the prototype:
Define the site map for the entire site.
Define detailed paper prototypes of every intended page, including elements such as links, link destinations,
content, page names, and page descriptions.
When prototypes have been analyzed and then used to create pages, revisions to the published pages are minimal.
Design revisions are the most time consuming and expensive phase of site design.
Creating Sites
Overview
A site is a group of related content pages with a consistent look and feel, defined by a common layout, theme, and
URL suffix. Typically, all pages assigned to a site are given the attributes that are defined at the site level, such as
the theme and layout, although individual pages can specify otherwise. At the very least, a site needs the following
fields defined: homepage, search results page, layout, URL suffix, and theme. All pages within a site can be accessed
via the site URL suffix.
Associating a page with a site provides the following benefits:
All pages within a site use the site default layout and theme, saving time.
All pages within a site can be accessed using a uniform URL: customer.service-now.com/site-name/page.do.
All pages within a site that have a search widget use the same search page.
Before creating a site for the first time, review the Content Management Overview page to understand the concepts
and principles of using CMS.
Creating a New Site

To create a new site (rather than copying an existing site):
1. Navigate to Content Management > Sites.
2. Click New.
3. Fill in the fields, as appropriate.
Note: To create a Content Management Catalog Site, follow the steps to create a catalog site.
Creating Sites
12
Field
Input Value
Name
A unique name for the site.
URL suffix
The URL suffix for the site. It is incorporated into the URL as follows: http://instance.service-now.com/url_suffix/page.do
Home page
The page to display when the user does not specify a page name in their URL: http://instance.service-now.com/url_suffix/
Search page
The page that displays search results when a user searches from any page within the site.
Login page
The page to use for logging in to the site. If specified, users must log in to access the pages on the site. If left blank, no login is
required to access the pages within the site.
Gauge target
page
The page that displays gauge content. When the user clicks a gauge on the new site, the gauge target page opens showing the
gauge content. The gauge target page replaces the CMS page in the current tab.
Title
A title for the site. The title can be the same as or different from the Name.
Description
A full description of the site.
Default layout
The layout for pages to use by default. Any page in the site that has a blank Layout field uses the layout set here.
Default theme
The theme for pages to use by default (see Theming Content Pages). Any page in the site that has a blank Theme field uses the
theme set here.
Simple catalog
display
Option to simplify catalog pages in the site by hiding the search bar, breadcrumbs, and the results per page choice list. Selecting
this option prevents you from adding attachments from record producers to your CMS site.
Clear this check box to display the search bar, breadcrumbs, and the results per page choice list in catalog pages.
Use external
cart
Option to omit the default cart when rendering catalog pages within a site that contains catalog pages. Provide a catalog cart
block somewhere on the site to allow users to make catalog requests.
Note: If you select to use an external cart, the no cart checkbox on a service catalog item has no effect; the external cart appears
for all items.
As an example, following is the site record for the ESS Portal:
Creating Sites
Adding Meta Tags to a Site

You can add meta tags to a site. Meta tags are special tags that contain information about the site. For more
information about adding site level and page level meta tags, see Content Management Meta Tags.
DIV-Based Layouts
A DIV-based layout option is available. Many web page layouts use tables for a consistent look and feel. Tables are
effective for numbers and statistics, but can be limiting for designing other types of information. DIV tags are
flexible block-element tags. To use DIV tags for layouts, give the tag an ID and assign attributes using CSS.
Changing to CSS and DIV tags can:
simplify code
reduce the amount of code
increase page load speed
separate content from presentation
help pages adapt to different device resolutions
make pages easier for search engines to crawl
make code more compliant with evolving web page design standards
A theme named Administration Theme - Charcoal is included as an example of CSS-driven, DIV-based layouts.
To view the sample code in Administration Theme - Charcoal for a DIV-based layout:
1. Navigate to Content Management > Design > Layouts.
2. Click Admin 1 Column.
13
Creating Sites
14
Copying a Site
To create a new site quickly, copy an existing site.
The site copy option creates a complete standalone copy of the site and all of its resources. If you are copying a site
to create a second site, it is best to use this option after the first site is complete, tested, and production ready. This is
important because the blocks, CSS, and pages are duplicated to support the new site. There are a number of reasons
why site copying is useful, such as site versioning, branding, or creating a backup.
Note: To copy just a few pages without duplicating the resources (CSS, blocks, menus) themselves, use the page copy option, which
duplicates the page but not the resources used in the page. This is the key difference between copying a page and copying a site. For
more information, see Copying a Page.
1. Navigate to Content Management > Sites > [Site Name].

2. On the Site form, click Copy.
3. Enter a name for the new site.
This name is used as a prefix for all of the site elements duplicated.
A progress bar shows the copy process. When the process is complete, the Site form shows information for the
new site.
Content Management Security

Overview
There are several methods for securing CMS sites and pages. Site security is set in the Login page field on the site
record (Content Management > Sites > [site name]). You can control if a page is public or private through the
URL.
How Do CMS URLs Work?

Every content page has its own public URL that can be accessed outside of the platform. You control whether a page
is public or private.
If the content page has no defined "Read" role, any Internet user can navigate to the URL and view the content
page. If there is a defined Read role, visitors who navigate to the URL must log in before they can view the site.
If there is a a login page specified on the site record, all pages in the site are private.
View_content on the Public Pages list (sys_public.list) controls access for all CMS sites.
Content Management URLs

The format for content management URLs is:
<path to the instance> + /<site suffix> + /<page suffix> + .do
The site suffix is defined by the URL suffix field on the Site form. The page suffix is defined by the URL suffix
field on the Page form.
For example, the page ESS - Site Entry has a site URL suffix of ess and a page URL suffix of entry, so the
constructed URL is:
<instance name>.service-now.com + /ess + /entry + .do
<instance name>.service-now.com/ess/entry.do
If the site suffix is left blank, then the site suffix is cms:
instance.service-now.com/cms/page.do
If the page suffix is left blank, then the page name is used:
instance.service-now.com/ess/Page Name.do
Special characters in the page name must be escaped.
15
Setting the Doctype

The view_content html page template (on which all CMS is based) now defaults to doctype=html. The code looks
like this in the HTML source:
<!DOCTYPE HTML>
If your CMS site does not render properly, remove the doctype from the page by setting the following property:
glide.html.doctype.pages = chat_desktop,live_feed,live_feed_small,navigator,navpage11,image_browse
The default for the above property is actually:
glide.html.doctype.pages =
chat_desktop,live_feed,live_feed_small,navigator,navpage11,image_browse,view_content
Setting this doctype offers these benefits for building new sites:
Incorporating common practice - Use a practice that is becoming widely adopted across the internet and can
prevent certain browsers from running in quirks mode.
Cleaner CSS and markup - Write more standards-based CSS and markup to promote code sharing.
One step towards browser compatibility - Find solutions that work across browsers and avoid browser-specific
workarounds.
CMS Sites and Single Sign-On (SSO)

Since public pages do not require login, and CMS sites are public by default, CMS pages do not use SSO. To
configure CMS to use SSO, make the view_content page private.
To turn off public-facing content pages and enable SSO:
1. Navigate to Public Pages (sys_public.list)
2. For the view_content page, set Active to false.
Generating Email Links To Tickets and Applications Through the CMS

Interface
You can generate email links that take users directly to tickets and applications through the CMS interface with SSO
in place. Create a private UI page to redirect CMS links. Because the page is not public, it requires authentication
and redirects to SSO appropriately.
1. Check that your CMS site is private by navigating to Content Management -> Sites -> [Your Site]. If the
Login page field is filled in, the site is private.
2. Create a new UI page.
a. Enter a Name. For example, redirector.
b. Fill HTML with the following Jelly code:
<?xml version="1.0" encoding="utf-8"?>
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script type="script/javascript">
window.location.href = "${sysparm_uri}";
</script>
</j:jelly>
The CMS now supports email links with following format:

http://<path to instance>/<UI page>.do?uri=/<CMS suffix>/<record type>.do%26sys_id=<record ID>
16
17
For example:
http://<instance
name>.service-now.com/redirector.do?sysparm_uri=/ess/incident.do%26sys_id=46e3e949a9fe19810069b824ba2c761a
Note: If you are using SAML 2.0 update 1 for SSO, use the UI page saml_redirector instead of creating a new UI page. For example,
an email link to a SAML 2.0 redirector page would use the URL format: http://<instance
name>.service-now.com/saml_redirector.do?sysparm_uri=/ess/incident.do%26sys_id=46e3e949a9fe19810069b824ba2c761a.
Login Rules
Login rules have been deprecated. Instead, set a login page on the site record. Login rules will continue to work, but
users can now log in or out directly through the content site. Login rules dictated what the user would see after
logging in. Typically, login rules were used to automatically present the user with an entry page based on their roles
or permissions within the system.
Creating Pages
Overview
The core of the content management system is a page. Pages are built from content blocks and organized into sites.
Pages display as regular webpages that are rendered in HTML. Constructing a content page requires a basic
knowledge of HTML.
Content pages are formed by arranging content blocks in pre-defined layouts. They can be used to present login
pages, search pages, or ServiceNow content.
Before creating a page for the first time, read the Content Management Overview.
Best Practices
When creating pages for a content site, first create a few master template pages and then use the master templates to
generate the necessary pages. For detailed information about creating templates, see Templates.
Creating a Content Page

1.
2.
3.
4.
5.
Navigate to Content Management > Sites.

Open the site that will contain the page
In the Pages related list, click New.
Fill out the field on the form (see table).
Click Submit.
Creating Pages
18
A default CMS administration page
Field
Name
Input Value
Enter a unique name for the page.
As a best practice, prefix each page name with the name of the site followed by a dash and then the function of the page in the site.
For example, ESS - Catalog Detail, ESS - Search Results, and ESS - Site Entry are all clear names for pages within the ESS site.
URL suffix
Enter the URL suffix for the page. The suffix is incorporated into the URL as follows:
http://instance.service-now.com/site/url_suffix.do
Parent page
Select the existing page that will be the parent of the current page. Parent pages keep sections within large sites sortable on the site
list of pages. Parent pages are also used to dynamically create basic bread-crumb functionality. Use CSS to define menus that give
the Parent page context within the user interface.
Layout
Select a layout to use for the page. Layouts define dropzones where content blocks can be added to the page.
If this field is left blank, the page inherits the site's default layout. If the site does not have a default layout, there will be a single
dropzone for the entire page.
Content
theme
Select a theme to use for the page. Themes bundle CSS style sheets that are applied to all content within the page.
If this field is left blank, the page inherits the site's default theme. As a best practice, use the site's default theme unless the page
requires a different set of CSS style sheets from the other pages in the site.
Frame buster Select this option to remove any restrictions placed by frames that contain the page. This is used to avoid frame-within-frame issues
that may sometimes occur with improper linking.
Content site
Select the site associated with the content page. If you created this page from the site's related list, this information is automatically
provided. The content site also determines part of the page URL, as follows:
http://instance.service-now.com/site_suffix/page_suffix.do
Read roles
Click the lock icon to open a list for selecting roles that can view the page.
Model
document
A document ID of a record to display by default.
Page status
Select a status for the page, such as Published or Retired.
Created by
Specify the user who created the page. If you are logged in with a role that has higher privileges than your user name and you enter
your user name, the field defaults to the role. For example, if you are logged in as an Admin and you type your name, which has
lower privileges, this field will display Admin.
Title
Enter a title for the page.
Description
Enter a description of the page.
Creating Pages
19
Adding Content to the Page

After defining the page settings, set the content of the page by adding content blocks the same way you add content
to homepages.
1.
2.
3.
4.
Under Related Links on the Page form, click Edit Page.

Click Add Content.
Select a content block from the picker.
Select the dropzone where the content should be added.
You can create new content blocks by adding one of the content blocks named *New [block type] to the page. For
more information on using stub blocks to create new content, see Using Content Blocks.
Copying a Page
Copying pages is an efficient way to
avoid duplicating the same work and to
create pages quickly from a guiding
master template.
1. Navigate to Content Management
> Site and select the site.
2. Select the page to copy.
3. Click Copy.
4. Rename the page.
5. Edit the page.
6. Click Update.
Assigning Pages to a
Site
If you have created multiple sites, you
can add pages from one site to another.
Adding content blocks
2. Select a site.
3. In the Pages related list, click Edit.
4. Select other pages to include in the site.
5. Click Save.
6. Update the site.
1. Navigate to Content Management

> Sites.
Creating Pages
20
Adding Content Pages to Update Sets and Applications

Administrators must manually add homepages and content pages to update sets prior to distribution. After inclusion,
the update set always uses the current version of the page and does not require additional action. Applications
automatically include any homepages and content pages that are created within or associated to an application
(starting with the Fuji release). Instances on earlier versions should see the previous version information.
To manually add a page to an update set:
1. Navigate to Content Management > Pages.
2. Right-click a content page record.
3. Select Unload Portal Page.
The page is added to the current update set.
Click the plus for versions prior to Fuji
Administrators must manually add homepages and content pages to applications and update sets prior to distribution. This process only stores the
version of the page as it existed at the time of inclusion. Any further changes to these pages requires an administrator to manually add them again.
To manually add the current version of a page to an application and update set:
1. Navigate to Content Management > Pages.
2. Right-click a content page record.
3. Select Unload Portal Page.
The current version of the page is added to the current application (starting with the Dublin release) and to the current update set.
Content Management Templates

Overview
Templates are content pages that are reused to provide consistent look and feel. Templates are useful when creating
CMS sites. They enable:
Rapid non-risk page copying. Building a site page-by-page does not leverage the power of page copying. When
it is time to create a new page, creating them from a template saves repeating the same steps over and over again.
Working restore point for pages within the system. Always have a working template available if something
goes wrong in one of the blocks or in the theme CSS. It may be easier to simply start over from the template
instead of trying to undo complex changes.
Functional reference for editors on the site project. Referring back to the template ensures that pages continue
to conform to the style guide.
Using Page Templates

Every page that is part of the site needs a template. When you build a new site, four page reference fields on the site
record are critical. These pages are the first steps in understanding page templates and defining site defaults.
Home page - the landing page for the site (mandatory)
Search page - page that displays search results when a user searches from any page within the site (mandatory - a
search page is required to have a Search Results block)
Login page - a standalone login page (useful if you want to force authentication for the entire CMS site)
Gauge target page - page used to display the drill-through content from a gauge. When the user clicks a gauge, the
gauge target page opens showing the drill-through content for that gauge.
Depending on the data or tables you plan to use, you may need detail pages. These are pages defined by content
types:
Knowledge detail page - used to display a full knowledge article detail (mandatory for the site)
Incident page - detail page for an incident record
Catalog page - detail page for all items, content items, order guides, and record producers
There are two page templates you can use when creating new sections:
Parent page - keeps sections within large sites organized and sortable on the site list of pages. Also used to
dynamically create basic bread-crumb functionality.
Detail page - differs from the parent page in that the content area displays a full article or detail instead of a
selection of related content (detail pages must have a Current Document block)
Note: These pages are mandatory if you plan on accessing system data. For example, if you plan on showing the service catalog in
your CMS, you need a service catalog content type (referencing the sc_cat_item table) and a detail page that provides the full view of
the item.
Copying an ESS Sample Site Page to Create a Template

One good source for templates is the base system sample site. The Employee Self-Service portal is provided as a
working example and design template. It is easy to copy the ESS Portal pages and restyle them to meet different
business requirements.
1.
2.
3.
4.
5.
6.
Navigate to Content Management > Sites > Employee Self-Service.

Select a page. For example, to copy the ESS sample site homepage, select Portal.
Click Copy.
Rename the page.
Right-click in the header and select Save.
Under Related Links, click Edit Page.
7. Edit the page by clicking the Edit icon (

). For example, change the menus, alter the layout, or add a different
logo.
8. Click Update.
9. Use the page in other sites you have created by assigning pages to a site.
21
Creating a New Template

If the base system sample site pages are not suitable, you can create a template from scratch. Create a new page and
then use it as a template. For details, see Creating a Content Page.
Template Best Practices

When saving a new template, include the word "template" in the page name.
Using Content Blocks

Overview
A block is a defined piece of content within the system that can be reused. A content page is constructed by
arranging customized blocks of content on a page. Content blocks are an integral part of a CMS site. Existing content
such as reports, gauges, and record lists are automatically available as content blocks and more can be created within
the CMS.
After defining content blocks, use them on any content page by adding them to dropzones. For more information, see
Adding Content to a Page.
Before starting a content management implementation, review the information in the Content Management
Overview. Content blocks should be created after sites and pages have been designed.
Creating a Content Block

To create a content block, you must define it in the appropriate form. Access the form in one of these ways:
Navigate to Content Management > Blocks > [Block type] > New. This opens the form for creating the
selected block type. If you navigate to Content Management > Blocks > All > New, a wizard guides you to the
appropriate form.
Edit a page and add a stub block of the desired type (*New [block type]). Then, click the link in the stub block.
After you save the form, add the content block to any content page.
CMS Block Tags

The <g:content_block> {{Jelly_TagsJelly tag is useful for advanced block creation and site flexibility. The tag can
be used in:
blocks - to display a block inside of a block
layouts - to display a block inside of a layout
Create the tag in the format, <g:content_block type="<type>" id="<sys_id>"/>.
An example of the block tag is included in the CMS sample site, the ESS Portal.
1. Navigate to Content Management > Design > Frames.
2. Click cms_admin_home_frame.
3. View the code (also shown below).
4. To see what the page looks like, navigate to the ESS Portal. For example, http://yourinstancename.service-now.
com/ess/.
22
23
5. Go to the administration page by adding administration.do to the end of the address in the browser window. For
example, http://yourinstancename.service-now.com/ess/administration.do.
<style>
DIV.cms_administration_home {
background: url(gray_${current_page.getURLSuffix()}.pngx)
no-repeat right top;
}
</style>
<div class="cms_administration_home">
${body}
<br/>

<j:if test="${current_page.getURLSuffix()=='administration'}">
<g:content_block type="content_block_menu" id="7afc342def002000914304167b2256ac"/>
</j:if>
<j:if test="${current_page.getURLSuffix()=='community_inspired'}">
<g:requires name="ess.portal.globals.jsdbx" />
<g:content_block type="content_block_menu" id="ccd4b8c7efb70000914304167b22566e"/>
</j:if>
<br/>
</div>
Types of Content Blocks

The types of content blocks that can be defined in the content management system are:
Header Blocks
Menu Blocks
List Blocks
Static HTML Blocks
Dynamic Blocks
Flash Movie Blocks
Detailed Content Blocks
iFrames
24
Header Blocks
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. Global search, text size toggle, menus for navigational purposes, and the
user name with logout link are some of the options that are available in headers.
To create a new header block, navigate to Content Management > Headers. Click New and fill out the Header
form.
Field
Input Value
Name
Enter a unique name for the header block.
Background
Select a background for the header logo and menus. Choices are:
Image
None - No background is rendered

Gradient/Image - Specify an image or gradient image to serve as the background
Colored Bars - Specify colors for three different sections of the header (top, middle, and bottom)
If Background is Gradient/Image, use this field to upload an image for the background of the header block. For gradients, upload
a gradient image.
Top bar color. If Background is 'Colored Bars, enter a CSS color or color name to use as the background for the top menu.
Middle bar
color.
If Background is Colored Bars, enter a CSS color or color name to use as the background for the logo and text.
Bottom bar
color.
If Background is Colored Bars, enter a CSS color or color name to use as the background for the bottom menu.
Logo
Select an image to serve as a logo. The image is also a link to the main page.
Active
Select this check box to make the block available for use.
Text
Enter text that displays next to the logo.
Conditional
Enter any scripted conditions to be applied. If selected, adds a Condition script field to the form.
Category
Select a category to provide organization for the header block. The category also determines the detail page in which header block
links will open. (Detail pages often display information in very different ways). Default options include:
None
General
Knowledge Base
Service Catalog
Top Menu
Select a navigational menu block to use as a menu above the logo.
Bottom Menu
Select a navigational menu block to use as a menu below the logo.
Height
Specify the height for the header.
Search
Select this check box to add a search element in the header.
Font sizer
Select this check box to include text sizing controls in the header.
Login
Select this check box to include a login link in the header. If the user is logged in, this element displays the user name and a logout
link. If you specify a login page on the site record, it is important to include a login link so users have a place to enter their
username and password.
Chat Queue
Select the chat queue that users access by clicking the Help Desk Chat button in the header. Clear the field to remove the button.
This field appears only if the Chat plugin is active. To learn more, see Making Help Desk Chat Accessible to End Users.
25
Menu Blocks
A menu block provides a menu of navigational links to different content pages.
For more information, see Creating a Navigation Menu Block.
List Blocks
A list block generates a list of links dynamically by querying a table or using a script. When the user clicks a link,
the associated content renders in a detail page based on its content type.
For information on creating and configuring list blocks, see Creating a List Block.
Static HTML Blocks

A static HTML block allows any HTML code to be run within a page. One example of this is Adding an Image as a
Content Block. Use static blocks for text that does not change. For example, a site footer with only the company or
organization name.
Anyone who edits their own HTML, Jelly, or Javascript may find the HTML editor in the static block limited. The
HTML editor can also add tags or formats that advanced coders find unnecessary. For more advanced options, use
Dynamic Blocks.
To create a new static HTML block, navigate to Content Management > Static HTML. Click New and fill out the
Static Content form.
Field
Input Value
Name
Enter a unique name for the static HTML content block.
Category
Select a category to provide organization for the static HTML block. The category also determines the detail page in which static
HTML block links will open. (Detail pages often display information in very different ways). Default options include:
None
General
Knowledge Base
Service Catalog
Frame
Select a border styling for the static HTML block. For more information, see Creating a New Frame.
Active
Conditional
Static
Content
Enter HTML code that determines the behavior of the static HTML block.
Adding an Image as a Static HTML Block

An easy way to an image to a page is to use a static HTML block. After the block is created, it can be reused
throughout the site.
1.
2.
3.
4.
5.
6.
7.
Navigate to Content Management > Images.

Click New.
Enter the file name of the image, including the extension (such as .png)
Upload the file by selecting Click to add... and browsing for the image.
Click OK.
Click Update.
Navigate to Content Management > Static HTML and click New.
26
8. Paste the following code into the HTML block, substituting the image name as uploaded above. Notice the "x" at
the end of the filename--this is required for image caching.
<img src="mascot.gifx"/>
Now the image is a static HTML block and can be added to any content page. Standard HTML code can be used to
alter the image in the content block.
Dynamic Blocks
Use dynamic blocks for blocks that need to use scripting or pull information from the system. A good use of
dynamic blocks is job postings. Store the postings in knowledge articles and display the postings with a dynamic
block.
ServiceNow provides several predefined dynamic blocks including:
New Content - Each of the new content blocks allows for creating new blocks while editing content pages
Clean Login - The default login page requesting user name and password, which includes a "Remember Me"
check box. After the user logs in, this block triggers login rules.
Login - An area that allows a logged out user to log in and a logged in user to log out. This block is especially
useful on publicly available content pages.
Search - The global text search field. Currently, this is the only form of search that can be included in a content
page.
Search Results - An area for displaying global text search results.
For information about Jelly, see Jelly Tags.
To create a new dynamic block, navigate to Content Management > Dynamic. Click New and fill out the Dynamic
Content form.
Field
Input Value
Name
Enter a unique name for the dynamic content block.
Category
Select a category to provide organization for the dynamic block. The category also determines the detail page in which dynamic
block links will open. Default options include:
None
General
Knowledge Base
Service Catalog
Frame
Select a border styling for the dynamic block. For more information, see Creating a New Frame.
Active
Conditional
Two phase
Select this check box to allow two-phase Jelly.
Dynamic
content
Enter the XML script field that determines the behavior of the dynamic block.
27
Catalog Cart Block

The catalog cart block is a dynamic block provided in the base system. This block provides the same cart available
within the service catalog. If the site definition has the Use external cart option selected, this block needs to be
included in the site so users can interact with their catalog cart.
Live Feed in Content Management Example

You can provide access to Live feed from pages built in the Content Management System (CMS). For example,
allow an end user to access your company feed via the ESS portal.
The ESS Portal template includes the Portal - Live page and Live Feed dynamic block (requires the Live feed
plugin). To provide access to Live feed from CMS pages, add the Live Feed dynamic block to a CMS page or
include the Portal - Live page in a site.
To add Live feed in an iFrame:
1. Navigate to Content Management > iFrames.
2. Click New.
3. Enter the iFrame block details:
Name: enter a unique name (Live Frame)

Frame Name: enter a frame name (live_frame)
URL: https://INSTANCE/live_feed.do?sysparm_doctype=true where INSTANCE is your instance URL (example, <instance
name>.service-now.com)
Sizing: select Fixed Size and enter height and width pixel dimensions according to the page on which you plan to display the feed (example,
width of 1024 and height of 768)
4. Click Submit.
5. Add the block to a page.
iFrame live feed definition
Specialty Blocks
The following three modules contain content types that can be dropped into content management pages in the same
manner as Content Blocks, but speciality content is specific types of content that warrant their own sections. Links
are not blocks, but are key to the navigation of the system and are organized and arranged within "List" blocks. For
example, when creating a link with a category, a list can be generated that calls the content_link table and filters on
the category.
28
Flash Movie Blocks

A Flash movie block can embed any Flash movie (.swf file) in a content page. Flash movie blocks can display Flash
movies as attachments or by referencing a URL.
The Flash movie block is designed to manage the Flash file (.swf). If streaming video or Flash video (.flv) need to be
added (for example, to a knowledge article), please see the Adding Media to HTML Fields page.
To create a Flash movie block, navigate to Content Management > Flash Movies. Click New and fill out the Flash
Movie form.
Field
Name
Input Value
Type a unique name for the Flash movie block.
Source Determines where the Flash movie will be found. Choices are:
Attachment - If this choice is selected Upload the flash movie to this record.
Link to External Object - If this choice is selected, a URL field is displayed. Specify the Flash movie URL and ensure that the Flash
movie is publicly accessible.
Height Height, in pixels, for the Flash movie.

Width
Width, in pixels, for the Flash movie.
Detailed Content Blocks

A detailed content block displays the content of an existing document, such as a knowledge article or a service
catalog request, as a block on a content page. The page that a list of documents points to is determined by the
document content type. The content type determines which document content is displayed in the detailed content
block.
To create a detailed content block, navigate to Content Management > Configuration > Page Detail Settings.
Click New and fill out the Detailed Content form.
Field
Input Value
Name
Enter a unique name for the Detailed Content block.
Category
If the block Type is Show the page's current document (see below), the category displays content from any link of the same
type. Default options include:
None
General
Knowledge Base
Service Catalog
Frame
Select a border styling for the detailed content block. For more information, see Creating a New Frame.
Model
Document
Select the document to display by default. Clicking the reference icon displays the Select Document dialog:
Active
Type
Select the behavior for the block. Select one of the following:
Show a Specific Document - Always displays the Model Document.

Show the page's current document - Displays the currently selected document.
Use a script to find a document - Uses the Script field to select a particular document.
29
Conditional
Enter any scripted conditions to be applied. Selecting this check box adds a Condition script field to the form.
Script
Enter a script to find an appropriate document if the Type is set to Use a script to find a document and is True. The Return
should be set to the GlideRecord of the desired document.
iFrames
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. It is common to define an iframe with forms created in the system and link to the
page in which the iframe resides.
To create a detail block, navigate to Content Management > iFrames and click New.
Field
Input Value
Name
Enter a unique name for the iFrame block.
Frame
Name
Enter a name for the frame on the page. Note that when using iFrames to present ServiceNow content (such as forms or lists), the frame
name should be gsft_main so that links within the iFrame will open within the iFrame.
URL
Enter the URL to display in the iFrame. If using the iFrame to display ServiceNow content, leave off the base instance portion of the
URL and start with the page name. For example, to show the list of requested items, the URL is:
sc_req_item_list.do
Queries can be applied to the URL. For instance, to display a list of requested items where 'Active = True, the URL is:
sc_req_item_list.do?sysparm_query=active=true
For more information, see Navigating by URL.
Sizing
Select an option for iFrame block size. Choices are:
Expand to fit content (internal content only)

Fixed size
Note that the Expand to fit content choice only works with ServiceNow content. If Fixed Size is selected, height and width fields are
displayed for setting the size, in pixels.
Note: Some browsers suppress iFrames because of they use an X-Frame-Options header value of SAMEORIGIN. The
XFrame-Options header was introduced in Internet Explorer 8 RC1, to help detect and prevent frame-based redressing. The
SAMEORIGIN value causes the browser to render a blank page instead of the target page of the <frame> or <iframe> when the
frame target is not on the same origin as the page itself. Support for this header has been implemented in Safari 4.0, Chrome
4.1.249.1042, and Firefox 3.6.9.
Configuring Content Types

Overview
The CMS manages various types of content. One page might display a list of knowledge articles, while another page
displays catalog items or incidents or a combination of the two. Different types of content may have different themes
and provide different user interaction. Content types define the pages that will display content from a table. Each
content type corresponds to a table.
Every type of document that the CMS needs to display has an associated content type. Although changing the
content type requires a knowledge of Jelly script, the common content types (such as service catalog or knowledge
base) come in the base system. Content types can be associated with particular sites. This allows different sites to use
different detail pages for the same content type.
Content Types
Content types define the following features of associated documents:
What does a link to one of these documents look like? For example, if a list of these documents is displayed on a
page, what does each entry in the list look like?
What does a detailed view of one of these documents look like?
What detail page should be used to display the document? (This is important and often an area of confusion for
new CMS users.)
The page that a list of documents points to is determined by the document content type, not by the list itself. The
content from a link is displayed in a detail content block on a page. The content type determines which page's detail
block the document content is displayed in.
For example, the list block Catalog Top 5 displays the top 5 items in the Service Catalog table, sc_cat_item.
Because the table is sc_cat_item, the content type sc_cat_item controls how the Catalog Top 5 list is displayed.
Clicking any item in the list displays the Service Catalog Detail page with the item displayed on it according to the
detail template script. Content types are applied:
in search results to link to the correct page
in the Current Document block to display the current record
in links on lists and other places that link to record types
Several content types are available by default for tables such as Catalog Item [sc_cat_item], Gauge [sys_gauge], and
Page [content_page].
Content type defaults set for CMS can be overridden for individual sites. Use the Content Types related list on the
Site record to customized content types.
30
31
Creating Content Types

To create a content type, navigate to Content Management > Content Types. Click New and fill out the Content
Type form.
Field
Description
Type
Select the table whose content will be rendered in Content Management.
Content site
Select the site that will use this content type.
Media type
Enter one of the following media types to use with this content type or leave the field blank to use the UI11 or classic interface.
doctype: UI15 and UI14 desktop interface only (available starting with the Eureka release)
m: Smartphone interface only (not for CMS use)
mobile: Legacy mobile interface only (not for CMS use)
tablet: Tablet interface only (not for CMS use)
Default detail
page
Select which page is loaded after a link is selected.
Gauge page
Select which page is used as the drill-through target for any gauge. If you display a gauge on a CMS page, then clicking on the
links loads the page specified here.
Summary
Template
Write an XML script that determines how the list is displayed in the list block, if the link is displayed in a list block.
Detail Template
Write an XML script that determines how to display the associated information after a user clicks the link.
Content Management Themes and CSS

Overview
Content pages can be styled with CSS, just like any HTML website.
CSS styles are controlled by three elements:
Style Sheets are records containing CSS declarations.
Themes are groups of style sheets that can be invoked together.
Frames are UI macros that define the outer border of individual content blocks as they appear on a content page
by calling on particular definitions in the style sheets.
Style Sheets
Style Sheets are standard Cascading Style Sheets (CSS) that define the look and feel of all elements within the
interface. 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. 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. If you upload a .cssx file to the platform,
the .cssx file can then be referenced using a URL.
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.
32
Themes
Design themes are the convergence of structure and styling, making them a critical tool for creating a powerful user
interface. Understanding corporate design guidelines and maintaining communication with the art team responsible
for the corporate website are important to the success of the project. If the organization has an art or design
department that maintains branding, they should be included in this process.
A theme is a collection of one or more style sheets (CSS files) that define a consistent look for a set of pages. In most
environments, a large number of pages share a very small number of themes, usually one. Multiple themes can be
used together within a site to create stylistic differentiators between site areas or a single theme can create one
unified look and feel for the site.
Themes can be invoked:

Directly by content pages.
As a content site's default theme.
On the configuration page as a global default.
To create a theme, navigate to Content Management > Themes and click New. enter a name for the them and
make it active. Then, use the Style Sheet related list to add style sheets to the theme.
Frames
Frames provide a way to manage decorative containers for content blocks and any other elements within the site. For
example, one frame might be a container (made of div or span tags) styled with rounded corners. A frame UI macro
is used by individual content blocks to define the frames. When viewing a content block form, the Frame field offers
a choice between the different frame UI macros. The frame UI macro does not, however, have the definition for the
frame within its Jelly script. Instead, it references a particular frame as defined in a style sheet.
Creating a new frame is a two step process:
1. Define the frame in a style sheet.
2. Create the new frame UI macro to invoke the frame definition.
33
Defining the Frame in a Style Sheet

To create a new frame in the style sheet:
1. Navigate to Content Management > Style Sheets and select a style sheet to contain the frame definition. Base
system themes use a separate Frames style sheet.
2. Add the following, substituting the desired frame name and style:
div.FRAMENAME {
border:STYLE;
}
Creating a New Frame UI Macro

1.
2.
3.
4.
Navigate to Content Management > Frames and select one of the existing frame UI macros.
Change the name to match the FRAMENAME used in the style sheet.
Right-click the header bar and select Insert and Stay.
Update the frame name in the XML field as shown:
<div class="FRAMENAME">
#:
5. Submit.
This UI macro can now be selected from any content block's form.
Creating List Blocks

Overview
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 its content type.
Lists are very powerful and flexible. Here are a few places that allow you to have complete control over the list
display:
Frames - frames provide a method to create decorative containers for content blocks, and any other elements,
within the site. When frames are used together with the "Type" field, the designer has complete control over list
placement within any design situation.
List Type - the List Definitions module can be used to define the type of lists available for content pages. On the
List Block form, select a list definition in the Type field.
List Filtering - gives you every field in the referenced table for a more granular results set.
Max Entries - limits results from table to fit the design of the block itself.
Order and Order Direction - sort by any field in the referenced table, in either direction.
34
35
Creating a List Block

There are three steps in creating a list block:
1. Define the list block.
2. Configure the list definition.
3. Configure the content type.
Defining the List Block

To define a list block, navigate to Content Management > Lists and click New.
Field
Input Value
Name
Enter a unique name for the list content block. This name is used to identify the record in ServiceNow and is not displayed on the
content page. Use the Title field for that purpose.
Category
Select a category to provide organization for the list content block. Default options include:
Type
None
General
Knowledge Base
Service Catalog
Select a list definition UI Macro to format the list of links.

For more information on list definitions, see List Definitions below.
Frame
Select a border style for the list block. For more information, see Creating a New Frame.
Advanced
Select this check box to enable generating a list from a script, rather than a simple filtered query on a particular table.
Query
Filters the results using a Condition Builder.
Active
Title
Enter the name to display at the top of the list block when it appears in a content page.
Maximum
Entries
Set the maximum number of entries to be displayed in this list block.
Table
Select a table to query for the list items. The table determines which detail page appears when a user clicks a link in the list block.
For more information, see Configuring the Content Type.
Note: The list shows only tables and database views that are in the same scope as the list block (starting with the
Fuji release).
Conditional
Select this check box to enable the use of scripted conditions. If selected, a Condition script field is added to the form, along with
the Logged On and Omit if empty check boxes.
Configuring the List Definition

List definitions, similar to content management frames, are decorative containers that control the look and feel of the
lists. Specifically, list definitions are UI macros that use Jelly script to define how a list is rendered inside of a list
block. Site design often requires multiple list styles within the layout. Lists are often the primary form of navigation
within a site so it is important to have control over their formatting.
To create a new list definition, navigate to Content Management > List Definitions and click New. Creating a new
list definition requires knowledge of Jelly.
Configuring the Content Type

Content types define how a list is displayed in a list block. Each content type corresponds to a table. Selecting a table
in the list block Table field makes that list block use the corresponding content type.
For instructions on how to define the content type, see Creating Content Types.
Creating a List of External Links

List blocks can also be used to create a list of external links (links to information outside of ServiceNow). Create the
external links as records on the ServiceNow Content Link [content_link] table and then follow the steps above.
Content Management Meta Tags

Overview
Meta tags are special tags added to web pages that contain information about the page rather than being part of the
page. Meta tags are not rendered and are not noticeable to a page visitor unless the visitor looks at the page source
code. Meta tags are read by web search engines as they "crawl" the web, identifying and organizing content. Modern
website designers often use meta tags to embed "hints" to search engines about how to index or otherwise crawl the
site in question.
You can define custom meta tags for content pages.
Adding a Meta Tag

Structurally, a meta tag consists of a tag a name/content pair and looks similar to the following:
<meta name="generator" content="MediaWiki 1.16wmf4" />
The Content Management System allows you to define both site level and page level tags.
Site Level Tags

A meta tag defined on a site is included on every page within that site. If an individual page has a specific tag with
the same name, the page tag takes precedence.
1. Open the site.
2. If not already included, add the related list Meta Tags to the form.
3. On the Meta Tags related list, click New.
4. Enter a Name and Content for the tag.
36
Page Level Tags

A meta tag defined on a specific page is included on only that page.
1.
2.
3.
4.
Open the page.

If not already included, add the related list Meta Tags to the form.
On the Meta Tags related list, click New.
Enter a Name and Content for the tag.
Understanding the Hierarchy

CMS supports page level and site level tags. The system behavior is to show the sum of all page level and site level
tags. For example, if you have two tags on the site and one tag on the page, all with different names, you see three
tags on the page (two from the site, one from the page). If both the site and the page have a tag of the same name,
only the page tag is used.
Example 1
Site Level
Name
breakfast
lunch
Content
eggs
sandwich
Page Level
Name
dinner
Content
steak
Output
Name
breakfast
lunch
dinner
Content
eggs
sandwich
steak
Example 2
Site Level
Name
breakfast
lunch
Content
eggs
sandwich
Page Level
Name
lunch
dinner
Content
tacos <--- overrides site level
steak
Output
Name
breakfast
lunch
dinner
Content
eggs
tacos
steak
37
Note: The Content Management System does not support some commonly used meta tags. For example, you cannot use the
X-UA-Compatible meta tag, which allows you to specify which version of Internet Explorer a should be rendered in.
Using Global Search

Overview
Two different search result blocks are displayed, depending on the user's role (set at System Properties > Global
Text Search):
Search Results (Global) - for users with permission to use the global search within the normal frame set. (The
normal frame set is defined as the default, non-CMS user interface with the set of frames.)
Search Results (No Global) - for users without permission to use the global search. Searches only the knowledge
base and the catalog.
The search bar in the header block and the Search dynamic block provided in the base system both automatically
handle the permissions and direct the user to the appropriate search results. In the base system, the search result
blocks are designed to be deployed on the same Search Results content page.
In order for the global search to work properly, it is important to ensure that the DEFAULT content type directs
users to a working content page. If not, the results from the global search will link back to the frame set, not to pages
within the CMS site.
Note: The global search is similar to the normal frame set user interface and ties to the same roles (set in Global Text Search
properties).
This feature is available with the Aspen Release.
Search Results (Global)

Before using the Search Results (Global) dynamic block, define content types to control the behavior when a user
clicks one of the search results. If no content type is defined for a table, selecting a link on that table renders the
results according to the content type DEFAULT. It is good practice to point the DEFAULT content type to a page
with a normal "Current Document" detailed block and set the content type detail (Detail Template field) to have just
an IFrame.
Following is an example of search results rendered by the Search Results (Global) dynamic block:
38
Using Global Search
Search Results (No Global)

The Search Results (No Global) dynamic block does not require any additional configuration.
Following is an example of Search Results (No Global) dynamic block:
39
Content Management and Jelly

Using Jelly
Apache Jelly is a Java and XML based scripting and processing engine for turning XML into executable code. Jelly
closely resembles XML and should be comfortable for developers familiar with JavaScript, XML, XHTML, or
HTML. ServiceNow, Jelly is used to render items such as forms, lists, and UI Pages. Jelly code renders well within a
dynamic content block, but can have issues when used in static blocks. Note that you can use Jelly tags, calls, and
statements, but HTML acts just like XHTML.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:if test="${current_page.getName()=='Solutions'}">
<h1 class="page_name"><b><a href="solutions.do?" title="${gs.getMessage('Solutions')}">${gs.getMessage('Solutions')}</a></b></h1>
<p class="page_description">
${current_page.getDescription()}
</p><br/>
</j:if>
<j:if test="${current_page.getName()=='IT 3.0'}">
<h1 class="page_name"><b><a href="solutions.do?" title="${gs.getMessage('Solutions')}">${gs.getMessage('Solutions')}</a></b> | ${current_page.getName()}</h1>
</p><br/>
</j:if>
</j:jelly>
Ensure that all tags are closed. If the tag is not a naturally closing tag, then place a forward slash before the end
bracket. For example, a <BR /> or an <IMG src="cms.png" />.
If you are unfamiliar with Jelly, review these wiki pages:
Jelly Tags
Extensions to Jelly Syntax
How to Escape in Jelly
Following is some additional information to get you started.
This tag should be included with all Jelly scripts. It looks complex, but remember the following:
1. Multiple namespaces are used in each Jelly script.
2. There are two types of prefixes used in tags: j and g. The j prefix is used for tags that are natively part of Apache
Jelly. The g prefix is used for tags that ServiceNow created in the system for ServiceNow purposes.
The j2 and g2 prefixes are just like j and g, except that they are processed in a second phase. When Jelly script is
parsed, the parser runs through each j and g tag respectively. For example,:
<j:set var="jvar_phase1" value="Hello" />
<j2:set var="jvar_phase2" value="World" />
${jvar_phase1} $[jvar_phase2]
40

</j:jelly>
In phase one, the parser runs through all of the j and g tags. It then caches the result. Before it runs the second phase,
it takes the j and g namespaces and moves the namespaces to the second phase. It looks something like this:
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="jelly:core" xmlns:g2="glide">
<j2:set var="jvar_phase2" value="World" />
Hello $[jvar_phase2]
</j:jelly>
For subsequent calls of this script, only phase 2 is parsed.

Note: If you plan to use phase 2 Jelly tags (g2 and j2) on the Content Type [content_type] or Dynamic Content
[content_block_programmatic] tables, select the Two phase option on the content form.
The next example creates a report of all open incidents assigned to each group. (For this purpose, you could use a
report and save a lot of time, but it is a good example for learning Jelly.) Start with the Jelly tag:
</j:jelly>
First, you need a list of open incidents. For this, use a g2:evaluate tag. The evaluate tag is used to run script.
Anything inside of the tag is parsed just like a business rule, so you can call, for example, global business rules,
script includes, and gliderecord.
<g:evaluate var="jvar_groups" object="true">
var gr = new GlideRecord("sys_user_group");
gr.orderBy('name');
gr.query();
gr;
</g:evaluate>
</j:jelly>
This is in phase one because we are not expecting frequent changes to the incident assignment groups. Also notice
the var attribute on the evaluate tag. This specifies what variable will be set from this block. At the end of the script,
there is a gr on a line by itself. That last line is what sets the variable.
You can omit the jvar_groups variable, but then all of the variables in the evaluate tag become Jelly variables.
The object=true specifies that the variable is not a primitive data type. If object=true were omitted, the
script would break because jvar_groups would only be able to hold items like integers and strings.
After the evaluate tag, you need to loop through these groups and find the incidents for each one.
gr.orderBy('name');
gr.query();
gr;
</g:evaluate>
<table>
41
42
<tr>
<th>Name</th>
<th>Incidents</th>
</tr>
<j:while test="${jvar_groups.next()}">
<tr>
<td>${HTML:jvar_groups.getValue('name')}</td>
<td></td>
</tr>
</j:while>
</table>
</j:jelly>
You can include normal XML in Jelly script at any time. Since there is no namespace, the Jelly script does not try to
parse the XML tags. Notice the j:while loop. It is a normal while loop and can iterate through a GlideRecord object.
Also notice that you output a value with ${HTML:jvar_groups.getValue('name')}. Here are the
important elements:
The outer brackets, ${}, specify the output of the variable and the phase in which the variable is output: ${}
means first phase, $[] means second phase.
HTML before the expression is for escaping of the output. The expression
jvar_groups.getValue('name') is being escaped for HTML. For other types of escaping, there are JS
(Javascript), NS (No Script), and some other options.
To select only one record and not iterate through a large number of records, the code would look like this:
gr.orderBy('name');
gr.query();
gr;
</g:evaluate>
<j:if test="${jvar_groups.next()}">
We found ${HTML:jvar_groups.getValue('name')}
</j:if>
</j:jelly>
Code Examples
1. Header Example Code
This dynamic content block needs to be active and have the "Two Phase" option clicked. The g:requires tag is
including the UI script defined in the system whose name is "servicenow.website.globals". The file extension in the
call is .jsdbx and is used only in the call to the UI script, not in the name of the script in the system. For JSDBX, the
file being called is a JavaScript(.js) defined within the database (db) that needs to be cached (x).
<g:requires name="servicenow.website.globals.jsdbx" />
</j:jelly>
2. Page Title and Description Example Code

This dynamic content block needs to be active. There are two actions within this code snippet. First is a
forward-looking string container that allows site translation, the ${gs.getMessage('Your Text')} string
call). The second action pulls in the page title and description, ${current_page.getName()} and
${current_page.getDescription()}.
</p><br/>
</j:if>
</p><br/>
</j:if>
</j:jelly>
3. List Block Pulling From Knowledge Articles Example Code

This code example contains one of the best tricks in the CMS. Using the type field with draws from a number of
defined list definitions to make slight, or very dramatic changes, to list display. Because the UI is open to
configuration and innovation, this is a good opportunity to use design skills. Anyone who can use HTML and CSS
knows that a basic list can be turned into a float grid or be made inline. The combinations are limited only by what
the designer can dream up and code.
In the code example, there is a custom logo field (u_logo) added to the Knowledge form. The custom field displays
customer logos, partner logos, and award images on the awards page. There are a number of different sections that
use this list definition so efficient reuse is taking place.
div class="cms_knowledge_list customer_success" - Begin by creating an outer container with
a unique class name that can be used as a basis for CSS style selectors and rules. From the outer container, many
of the child elements can be accessed for theming.
<g:for_each_record file="${current}" max="${jvar_max_entries}"> - Loop for list
creation that calls the selected table record and the entries set on the list form.
<a
href="knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}"><img
src="${current.u_logo.getDisplayValue()}" alt="${current.text}"
width="110px"/> - Defines linking to the article detail in the knowledge base. For further reference, look at
content types within the site definition and you will see some similarities. The knowledge.do? portion of the URL
points to the knowledge detail page which (as mentioned above) is mandatory if you plan to call the knowledge
base in your CMS site. The rest of the URL represents the syntax for calling a knowledge article by its sys_id.
43

Each and every item housed within the system has a unique sys_id.
<ttt>${SP}-${SP}${current.author.first_name}${SP}${current.author.last_name} - This example is commented
out and not used, but it is still interesting in that it has a jelly call ${SP} and it pulls the knowledge article's
author by first and last name.
<div class="cms_knowledge_list customer_success">
<g:for_each_record file="${current}" max="${jvar_max_entries}">
<br/>
<table cellspacing="0" cellpadding="0" border="0" class="background_transparent">
<tr>
<td class="cms_knowledge_list_image">
<j:if test="${current.u_logo.getDisplayValue() != ''}">
<div class="knowledge_article_logo" >
<a href="knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}"><img src="${current.u_logo.getDisplayValue()}" alt="${current.text}" width="110px"/></a>
</div>
</j:if>
</td>
<td width="100%">
<a href="knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}" target="_top">
<span class="cms_knowledge_list_link">${current.short_description}</span>
</a>
<p class="kb_description">
"${current.description}"

</p>
</td>
</tr>
<tr>
<td width="100%" colspan="2" class="kb_learn_more">
<p class="kb_learn_more">
<a href="knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}">Learn More</a>
</p>
</td>
</tr>
</table>
</g:for_each_record>
</div>
</j:jelly>
44
Content Management Navigation
Content Management Navigation

CMS Navigation
After the hierarchical structure of the site has been designed and built with master templates, begin planning site
navigation. Some items to consider:
Placing navigation elements on every page

Locating navigation elements in the same place on every page
Using text or images for navigation
Providing visitors with an easy way to understand where they are in the site, for example, with breadcrumbs or a
specific color scheme
Adding a site map - a hyperlinked, hierarchical outline of the site on one page
Providing logical navigation and a link to the homepage from all pages - remember that visitors may enter your
site on a page other than the homepage
Designing navigation to help visitors find information quickly, with as few clicks as possible
In the CMS, site navigation is defined by navigation menus. Build menus as navigational blocks to create navigation
paths. The menu chosen for the task depends on the size and complexity of your site. Available menu options
include:
Drop-down menus
Two types of tab menus
Vertical, clickable list, usually placed on the left side
Horizontal blocks
Vertical blocks
Super menu (a menu of menus)
For detailed information, see Creating a Navigation Menu Block.
45
Navigation Menus
Navigation Menus
Overview
Navigation menu blocks enable you to create a menu of links to different content pages.
Navigation menus are defined by three objects:
Menu Block - The menu block defines the entire menu block and how it is displayed.
Menu Section - The menu sections define groups of links displayed within the block.
Menu Item - The menu items define the links within the block.
Creating a Navigation Menu Block

To create a new navigation menu block, navigate to Content Management > Navigation Menus and click New.
ServiceNow displays a gallery of available navigation menu blocks.
Select the desired menu block style to open the Navigation Menu form. Older instances open the Navigation Menu
form directly.
Fill out the Navigation Menu form to define the block.
46
Navigation Menus
Field
47
Input Value
Name
Enter a unique name for the block.
Type
Select the type of navigation menu, which determines how the links are displayed. For more information, see Navigation Menu Block
Types.
Frame
Select a border style for the navigation menu block. For more information, see Creating a New Frame.
Conditional Select this check box to enable the use of scripted conditions. If selected, a Condition script field is added to the form, along with the
Logged On check box.
Logged on
Select this check box to display the navigation menu block only if the the user is logged on. This field appears only if Conditional is
selected.
Condition
Enter a script to define the conditions for the navigation menu block. This field appears only if Conditional is selected.
Active
Category
Select a category to provide organization for the navigation menu block. The category also determines the detail page in which menu
links will open.
Creating Menu Sections

Define each section of the menu by navigating to Content Management > Navigation Menu. On the Menu
Sections related list, click New, then fill out the Menu Section form.
Field
Input Value
Name
Enter a unique name for the menu section.
Content block
menu
Select the navigation menu on which this menu section appears.
Redirect to
Select what appears when a user clicks the menu section name and icon.
URL
Click the lock icon to open the edit field, then enter the URL to display when a user clicks the menu section title and icon. This
field is available only if Redirect to is set to The specified URL.
Detail Page
Select the content page to open when a user clicks the menu section title or icon. This field is available only if Redirect To is set to
A content page.
Left Image
Select an icon to appear on the left of the name.
Right Image
Select an icon to appear on the right of the name.
Second Level
Text
A description to appear next to the menu section title.
Active
Select this check box to make the menu section available for use.
Order
Enter a number to indicate where this section appears on the menu relative to other menu sections.
Logged on
Select this check box to display the menu section only if the the user is logged on.
Roles
Click the lock to open a list, then select the roles that can access this menu section if you want to restrict access by role.
Category
Select the category in which the menu section belongs.
Open In
Select the behavior of clicked links.
iFrame
Enter the name of the iFrame where the link should open when a user clicks the menu section title and icon. Make sure that there is
an iFrame on the page where the link opens. This field is available only if Open In is set to Named iFrame.
Navigation Menus
48
Creating Menu Items

Add menu items from the Menu Section form. In the Menu items related list, click New and fill out the Menu item
form.
Field
Input Value
Name
Enter a unique name for the menu item.
Menu
section
Select the menu section in which this item will appear.
Redirect to
Select what appears when a user clicks the menu item name and icon.
URL
Click the lock icon to open the edit field, then enter the URL to display when a user clicks the menu item title and icon. This field is
available only if Redirect to is set to The specified URL.
Detail Page Select the content page to open when a user clicks the name or icon. This field is available only if Redirect To is set to A content
page.
Image
Select an icon to appear with the name.
Active
Select this check box to make the menu item available for use.
Order
Enter a number to indicate where this item appears on the menu relative to other menu items.
Logged on
Select this check box to display the menu item only if the the user is logged on.
Roles
Click the lock to open a list, then select the roles that can access this menu item if you want to restrict access by role.
Category
Select the category in which the menu item belongs.
Open In
Select the behavior of clicked links.
iFrame
Enter the name of the iFrame where the link should open when a user clicks the menu item name and icon. Make sure that there is an
iFrame on the page. This field is available only if Open In is set to Named iFrame.
Menu Types
By changing the Type field on the navigation menu block, you can format the same menu in different ways.
Drop-Down Menu
The drop-down menu renders the menu sections as drop-down list. Use the mouse to hover over the menu name and
view the menu items.
Navigation Menus
Tab Menu for Headers
The tab menu renders the menu sections as tabs. Use the mouse to click the tab and view the menu items.
Horizontal Blocks
The horizontal blocks menu renders the menu sections as block headings with menu items as links within the blocks.
The blocks are arranged horizontally.
Tab Content Block
The tab content block (horizontal) menu renders the menu sections as tabs with menu items as links within the block.
Vertical List
The vertical list menu renders the menu sections as headings with menu items as links below them.
49
Navigation Menus
Vertical Blocks
The vertical blocks menu renders the menu sections as block headings with menu items as links within the block.
The blocks are arranged vertically.
Super Menu
The super menu is a hybrid between the drop-down menu and the tabbed system that allows the user to create a
menu out of any number of menus.
Customizing the Menu Style

The following customizations can be made in the style sheets your site uses. Navigate to Content Management >
Design > Style Sheets to customize style sheets.
1. Supplementary Page Navigation Menu Example Code

In the example below, look at the CSS class selectors and rules. Also, note how the block containers
(div.cms_menu_section_blocks)
are
defined
based
on
the
outer
container
(TD.layout_content_submenu_column). The outer container is actually a part of the site layout. This is
clearer if you compare the styles to those used in the super menu further down in the example. The lesson is that
there is no need to make a completely new menu system - just use CSS to change the look and feel of existing
menus.
/*********************************************************************************************************************************************************
SUB MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu
(cms_menu_section_blocks UI Macro)
*********************************************************************************************************************************************************/
TD.layout_content_submenu_column DIV.cms_menu_section_blocks {
width: 156px;
height: auto;
float: left;
50
Navigation Menus
51
position: relative;
border-style: solid;
margin: 0px 0px 0px 0px;
border: 0px solid #e0e0e0;
padding: 0px;
background: none;
padding: 24px 12px 0px 12px;
}
TD.layout_content_submenu_column DIV.sub_menu_section {
width: 156px;
height: 20px;
float: left;
padding: 0px;
background: none;
}
SPAN.cms_sub_menu_list_link, TD.submenu_cell A
color: #FFF;
}
TD.layout_content_submenu_column IMG.menu_bullet{
display: none;
}
TD.cms_menu_section_blocks_title h2, TD.cms_menu_section_blocks_title

h2 a, TD.cms_menu_tab_blocks_text h2 {
margin:0;
padding: 0px;
font-size: 11px;
text-transform: uppercase;
color: #42C4DD;
font-weight: normal;
white-space: nowrap;
}
TD.layout_content_submenu_column a.cms_menu_block_item {
margin:0;
padding: 0px;
font-size:11px;
color:#FFF;
}
TR.layout_content_submenu_row TD.layout_content_submenu_column{
Navigation Menus
background: transparent url(sub_menu_background.gifx) repeat-y
center top !important;
}
2. Super Menu Sections Example Code

This menu is essentially a simple float grid. The defaults are written first. Then, below the "SUPER MENU
VARIATIONS..." comment, the defaults are overwritten by adding a containing div with a unique class. In the code
that renders the header for the base system, the bottom menu resides in a table cell with the class of
"cms_header_bottom_menu" (note the TD.cms_header_bottom_menu CSS selector).
/*******************************************************************************************
Section Blocks Menu (cms_menu_section_blocks UI Macro)
*******************************************************************************************/
div.cms_menu_section_blocks {
width: 260px;
height: 260px;
float: left;
padding: 10px;
background: url(blue/portal_horizontal_bkg.pngx) repeat-x center
bottom;
}
p.cms_menu_separator {
border-top:1px dotted #ccc;
margin-top: 6px;
margin-bottom: 6px;
}
td.cms_menu_section_blocks_title h2, td.cms_menu_section_blocks_title

h2 a, td.cms_menu_tab_blocks_text h2 {
margin:0;
padding: 0px;
font-size: larger;
color:#444;
}
a.cms_menu_block_item {
margin:0;
padding: 0px;
color:#999;
font-size: inherit;
}
/*******************************************************************************************
52
Navigation Menus
53
SUPER MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu

*******************************************************************************************/
TD.cms_header_bottom_menu .cms_menu_super_menu_bar { /*style the super
menu drop down bar */
z-index: 199;
float: left;
background: none;
margin-left: 44px;
}
TD.cms_header_bottom_menu div.cms_menu_section_blocks {
width: 200px;
float: left;
border: 0px;
padding: 0px;
background: none;
}
TD.cms_header_bottom_menu p.cms_menu_separator {
margin-top: 0px;
margin-bottom: 0px;
}
TD.cms_header_bottom_menu
.cms_menu_super_menu_bar_item {
/*style an
item on the super menu drop down bar*/

z-index: 200;
float: left;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 8px;
padding-top: 4px;
cursor: pointer;
cursor: hand;
font-weight: bold;
color: #000;
border-left: 1px solid #FFF;
border-top: 1px solid #FFF;
}
.cms_menu_super_menu_bar_item_selected {
/*style a selected item on the super menu drop down bar*/

z-index: 200;
float: left;
padding-left: 12px;
Navigation Menus
54
padding-top: 4px;
cursor: pointer;
cursor: hand;
background: #fff url(super_menu_bkg.gifx) no-repeat left top;
font-weight: bold;
border-right: 0px solid #CCC;
border-bottom: 0px solid #CCC;
border-left: 1px solid #DDD;
border-top: 1px solid #EEE;
.cms_menu_super_menu_content { /* style
super menu content block */

position: absolute;
z-index: 999;
height:260px;
display: none;
padding: 18px;
background: #dedfe0 url(super_menu_bkg.gifx) no-repeat left top;
box-shadow: 5px 5px 6px #666;
-webkit-box-shadow: 5px 5px 6px #666;
-moz-box-shadow: 5px 5px 6px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666,
offX=5, offY=5, positive=true);
}
TABLE.super_menu_video_table {
background: #787878 url("grey_background.pngx") repeat-y scroll
center top;
width: 184px;
}
Content Management Testing
Content Management Testing

CMS Testing
Test your site to ensure that all pages display correctly, links go to the specified address, and images are not broken.
It is important to test the site as you build it; do not wait until just before launch to begin testing. Also, test templates
as you create them so any issues are resolved before creating other content based on the templates. Recruit as many
people as possible to help you test.
Here are some general site testing guidelines:
Test on the browsers and platforms your site visitors use

Test on a variety of monitors (for example, LCD and CRT)
View pages using different screen resolutions
View pages using different color settings
Test all navigation and links
Test items that can be downloaded (for example, PDF files)
Test the search functionality
Test site security

If required, test for accessibility (for guidelines, see the W3C Website Accessibility Initiative [1])
References
[1] http:/ / www. w3. org/ WAI/ eval/
55
56
Reference
Content Management Application Reference
Modules, Tables, and Parameters
The Content Management System contains several modules, tables, and parameters. Use the table names as a
reference to each item that you add within the system. For example, when generating navigational lists within a CMS
site, you need to reference the content_link and content_page tables.
The Content Management application is laid out according to the inherent site building hierarchy:
Site
Pages
Content blocks
All of the design elements are separated from the code into their own tables:
Themes are a collection of CSS files

CSS can either be internal or external
Layouts are table based
Frames are decorative containers
Images are added as static HTML content blocks
Top Level Modules

At the top of the application are modules that provide inventory lists of pages and sites created within the system,
whether used or unused.
Module Table
Parameter
Sites
Site
Site [content_site]
Pages
Page
Page [content_page]
All Blocks
Pages are built from reusable pieces of code called blocks. Blocks represent the different types of content that can be
added to a content page. For more information, see Using Content Blocks.
Content Management Application Reference
Module
57
Table
Parameter
Block Types
All
Content Block
Content Block [content_block]
Headers
Header
Header Block [content_block_header]
Navigation Menus Navigation Menu Navigation menu [content_block_menu]

Dynamic
Dynamic Content Dynamic Content [content_block_programmatic]
Lists
List of Content
List of Content [content_block_lists]
Static HTML
Static Content
Static Content [content_block_static]

Specialty Content
Flash Movies
Flash Movie
Flash Movie [content_block_flash]
Content Links
Content Link
Content Link [content_link]
IFrames
IFrames
IFrames [content_block_iframe]
Design
These modules define the visual style of the content pages:
Themes
Style sheets
Layouts
Frames
Images
Configuration
These modules control how the content management pages function:
Configuration Page
Page Detail Settings
Content Types
List Definitions
Login Rules
For more information, see Configuring Content Pages.
Content Management Best Practices

Overview
Best practices and good intranet design go beyond the Content Management System (CMS). Key considerations
include limiting team size, placing talent where appropriate, and establishing clear lines of communication. Some of
the most successful CMS projects are built on good communication and clearly designated ownership. Best practice
should speak from the voice of experience, as the actual act of launching a website is the best teacher. It is important
to note that not all design needs may be addressed on the first try, but through revisions you can continually improve
your CMS.
Best practice should also place a strong focus on the application data you intend to use within your site. Take a look
at the CMS data integration portion of the wiki. The integration page is a good introduction and can provide you with
ideas for bringing data into the system.
Read through the case studies as well. Each study breaks down the chronology, business needs, time, and manpower
associated with each web project.
This Best Practices page is the first step in defining a methodology for delivering the highest quality CMS site in the
shortest period of time. The fundamental prerequisites for design in the CMS are:
Researching what good and useful intranets contain and what information they provide.
Understanding the ServiceNow system and what areas of system data you plan to use.
Setting expectations and deliverables based on the resources you have
Along with the ServiceNow wiki, you may want to do some extended research on usability. For example, the Nielsen
Norman Group has spent years focusing on usability and their annual intranet design report [1] may help you with
design decisions:
You should not plan on launching a CMS site as part of your ServiceNow Phase 1 deployment. Many considerations
need to be addressed before starting to work with the CMS. Initially, the structure of the website is defined within
the CMS application, but the majority of the work exists in other applications.
Planning and Required Research

Planning and prototyping is the most important phase of website design. In this phase, start with the data you plan to
use. The team should define the following:
what services the site will provide
the common actions and data needed by site users
how the data will be consumed and navigated by users
Knowing the data structure you are designing for is important and will prevent superfluous customizations or the
creation of unnecessary database tables.
This phase focuses on the language, concepts, and organizational hierarchies of the website instead of the design.
Language and content define look and feel, not vice versa. The team should also evaluate the naming conventions
used in the CMS and in the organization. Consolidate and combine names when possible.
58
Planning Checklist
Read the Content Management System pages of the wiki so you understand how the system works.
Determine the business needs the website must fulfill and consider the return on investment (ROI).
Interview the user base and compile a cohesive list of requirements that may be mandated by sites in current use.
Identify the ServiceNow system data that will be brought into the CMS site, as well as data from any other
sources.
Use the content and data definition to establish a rudimentary site map and entry pages for the site.
Establish consistent site language and terminology by using an existing organizational style guide or creating a
style guide if necessary.
Use categorization and hierarchies to create a consistent navigational model.
Address these related questions:
Is site translation or localization a requirement?

Will there be user or employee-contributed content?
Will commenting features be used?
Would ratings and feedback be useful?
CMS Content from System Data

A website is only as good as the content it provides and how accessible the information is to users. Before building a
website in the CMS, understand the data behind what you are building. While staying organized within the CMS is
important for long-term site maintenance, most data will probably live within other applications in the system. For
more information, see Content Management Integration Points.
As a CMS site manager, communicate with the people who are administering your knowledge base, service catalog,
business service portfolio, and any other system data accessible through the CMS site. It is difficult to design for data
that is not in place. Therefore, data within the instance should be at a mature point before the CMS site is designed.
Look at the instance and the ITIL processes that will be implemented in the CMS site. Ensure that the data within
the system is at a level where it represents a clear vision of the applications to be built (for example, service
catalog, knowledge management, and incident management).
Ensure that the hierarchies and categories in the system (for example, the topics and categories in the knowledge
base or the categories and subcategories in the service catalog) are logical and will be in place for a reasonable
amount of time. These categories are very important when designing the entry page into the knowledge base,
service catalog, or any table within the system.
One of the biggest challenges is organizing the content so the interface is usable. The organizational process depends
on what data is going to be used in the CMS.
Some of the best lessons learned from the launch of the ServiceNow corporate website were about data and where
data lived. Knowing the data helped us understand who was bet suited to perform long-term maintenance of the site.
The requirement that maintenance should be as easy as possible made it clear that administrator skill sets should be
matched to the application where the data they manage lived. Once the initial design was created, very little work
was done in the CMS; most work was in the knowledge management application. Organizing the data often occurred
where the data lived in the system. Sites, parent pages, pages, and navigational menus in the CMS site should be a
direct reflection of how your data is organized. For example, the catalog has "category" and the knowledge base has
"topic" and "category." The following section provides examples of system data used in CMS sites and how base
system applications can address some of your most basic needs.
59

More than Just a Knowledge Base
In the corporate website case study, all of the content lives in the knowledge base. There were a number of
considerations that led to this decision:
Ease of use - the interface had to be easy to use and easy for employees without technical knowledge of HTML
and markup to manage articles.
Built-in publishing - basic publishing controls mirrored the lifecycle of the content.
Interaction - commentary, rating, flag, and "Was this Helpful?" voting are available when needed.
Generating content, such as HR job postings, news articles, event announcements, customer case studies, and
training videos, demonstrated clear parallels to successful knowledge bases. Where there is a service being provided,
there is a relational knowledge base to manage the content. Someone may point out that this is not ITIL and not
being ITIL could have an impact on sites that purely serve IT.
Best practices factored in because there was a functional fit for the content. Purists would probably create a new
database table for every type of content, but this approach would needlessly complicate the data being used. Every
piece of data in the site could be managed in the knowledge base. Thoughtfully created topics and categories met the
business needs of the corporate website.
The key point was considering where data lived within the ServiceNow application set. This takes significant
knowledge of the ServiceNow platform and application set, which is the foundation of best practices. If you have
system data that does not obviously fit, think about the relational aspects of the data and how you intend the data to
be consumed. Plan on having the majority of the CMS website content managed outside of the CMS application.
Thoughts on organizing content
While creating our corporate website in the CMS, the team worked together, evaluating many of the naming
conventions used in the knowledge base. Misunderstandings and assumptions at this stage need to be eliminated by
proper investigation into the data layers you plan to use.
Define what application data will be behind the CMS site, down to the database table and field. Do not
over-complicate the work; instead, leverage existing parts of the system. Organize the content so the interface is
usable. The organizational process depends on what data is going to be used, both in the CMS (sites, parent pages,
pages, and navigational menus) and throughout the rest of the system. Start with knowledge, service catalog, and the
business services portfolio.
A high volume of content can heavily influence the look and feel of the site and the site hierarchy. When deciding
what content to show, keep in mind the realities of long-term maintenance. Design for ease of maintenance and the
people who will be taking care of the system. This level of planning can be time-consuming, but is important. Here
are some other basic tips on site planning:
Start with listing all the content you want to host on the CMS site.
Think about current solutions to implement right away and ideas for the future.
Paper Prototypes
The use of wireframes, mindmaps, and PowerPoint presentations to create prototypes is essential. Prototypes are a
powerful tool to expedite the design process. Many user interface designers use prototypes because they create a
clear line of communication between the designer and the project manager. The task is to create a text-based
blueprint of your website with prototypes. If you bypass this step, the project can experience scope creep because of
design revisions.
Define the sitemap of the entire site, either on paper or digitally, to visualize the site.
Define detailed paper prototypes of every intended page, including elements such as links, link destinations,
content, page names, and page descriptions.
60

Print out and annotate the prototypes, noting what needs to be done on the different pages within the site.
Resource Planning
Since you determined the data you will be using, you also have an understanding of the content owners. The best
insights from the launch of the ServiceNow corporate website were about data, but they translated directly to the
people involved with long-term maintenance of the site.
When it comes to resources, quantity does not always equal quality. The number of people added to a project
involving site design may not matter. Sheer numbers do not increase productivity and may even stifle progress. The
following actions are essential:
Limit team size.
Place talent where appropriate.
Establish clear lines of communication.
These actions can prevent team members from interrupting or duplicating each other's work. The actions can also
establish security definitions and role-based views for everyone working on data within the system.
Start with a small, focused team
Before starting work on a website, two groups should be identified:
One group gathers corporate style design guidelines, defines all of the copy (written terminology and text that will
exist in the site), and defines the site flow. This is a content management group with skills that include:
Knowledge of organizational and industry-specific language

Ability to write clearly and concisely
Information architecture for planning site layout and navigation menus
Connections with subject matter experts (SMEs) from Marketing, Sales, Training, and other departments, to
keep content updated
The second group executes the designs and creates the website. They also create templates, icons, and graphical
elements. This is a webmaster group with skills to maintain a working website, including:
Basic ServiceNow administration skills

HTML
CSS
Graphic design and web design
Reach out to your corporate design team

Leverage the corporate designers that own the style design guidelines. In many cases, the look and feel of your site is
dictated by a style guide. Style guides are often lengthy, detailed, and pertain to any corporate interface.
Many organizations have an art team that designed the organization's website. Contact this team and involve
designers early. They can help and give the interface their approval. Without approval, you risk having to
redesign the entire site because it does not adhere to organizational guidelines.
Corporate style guides take the guesswork out of design. The example style guide shown is defined down to the
pixel. Creating a site without following the style guide takes a great deal of time. With the style guide it is easy to
create clean CSS and HTML for the site.
Forms may require some modifications to style guidelines. The content area of any CMS design should be no
smaller than 860px or service catalog forms will be clipped. (The sample style guide shown calls for the content
area to be 576px, which would clip those forms.)
61
The base system site template, the ESS portal, illustrates how the platform can be themed to match corporate
branding guidelines.
Base System Resources
The ESS portal is a simplified working example for customers to use. Rather than editing the base system examples
within content management, we suggest that you make copies of the sites, pages, themes, and blocks. Then, modify
your copies. This ensures that you can leverage the base system updates that will be rolled into future releases of the
content management plugin.
If the ESS portal meets the business needs of your project, copy the portal and use it as a reference guide to your new
site. If you need to do a great deal of customization, helpful pages include Creating a Content Page, Using Content
Blocks, and Styling in Content Management. Light customization would be changing the logo, adding a few links to
the menu, and changing the colors of the tables and menus. Heavy customization would be altering the layout,
changing the menu system, or editing anything within the content area.
62
63
Visit Other Websites

Has anyone else already created your
portal? Sometimes you can get good
ideas by looking at the work of others.
Our ESS portal was based on common
designs throughout the ServiceNow
community. There are many ways to
organize and present data so it is easily
accessed.
For customer examples, view this
ServiceNow community blog [2].
Icon-based menu interface similar to shopping sites and modern operating systems. Uses
a menu and imagery based experience that guides user travel within the hierarchies
defined within the system.
References
[1] http:/ / www. nngroup. com/ reports/ intranet/ design/
[2] http:/ / community. service-now. com/ blog/ markodonnell
Content Management Integration Points

Overview
Content Management System (CMS) integration information supplements the Best Practices page. Be sure to read
the Best Practices page first.
A discussion on integration points could go from authentication, to JavaScript libraries, to search configuration, to
pulling data from a wide range of places in the system. The power of the CMS is that it can display any data within
the ServiceNow system. Some data links and displays correctly by default and other data may take some custom
work. List blocks offer the easiest way to dynamically display data.
One of the benefits of the CMS is how easily you can create UI prototypes and navigation wireframes using the wide
assortment of navigation menus available. On the Employee Self-Service Portal (ESS Portal) homepage, notice that
there are 12 links pointing to a very small portion of the system data. This discussion uses the ESS Portal as a
working example and expands it by adding a second menu below and making about 40 links pointing to a targeted
area of the extended application set. The second menu links to a number of different items that have become a
common part of CMS portals.
64
Introduction to the CMS Integration Points

When the CMS was first introduced, lists were the only method available to create navigational systems for sites.
Generating lists from the ServiceNow system is straightforward, especially if you have ever used filtering within the
system. It is important to understand how lists link to the detailed data they reference. This is where content types
come into play.
System record links are defined in content types. Two templates are defined: one for the list (summary template) and
one for the detail (detail template) as rendered in a page. The two templates work together to pass data attributes or
unique record identifiers (sysid) into a single detail page that manages the data. Any attribute variations use the URL
sent to the page.
Understanding how content types work may not be critical if you are creating a micro-site, a demo, or a rapid
prototype, but in building a production-ready site it may mean the difference between a site with 20 pages versus a
site with 200 pages. There is a time for both types of data calls. Depending on the task, there are appropriate times to
use static content and times for dynamic methods. The following discussion helps illustrate the relationship between
the link and the detail.
Static Methods
In the CMS application shown, note the items highlighted in gray. These CMS modules were created for ease of use.
Form-based menu management and WYSYWIG code editing can be extremely useful to both advanced and
entry-levels users. The technical ability of subject matter experts (SMEs) managing the language of your site may
vary considerably. Allowing SMEs to write the content and a technical resource to manage the linking may work
well. This division of labor can expedite menu and link creation within the system.
Navigation Menu Links are a great way to group similar links and
are some of the most powerful interface components available to
site designers using the CMS. They are base system templates used
to group content links for placement on the page. Though the
terminology is a bit different (menu sections and menu items), this
type of linking behaves the same way as content links. For more
information, see the Navigation Menus wiki page.
Static HTML Details may be present on a page to which a link
points. These content blocks are only useful for areas that are
administered by those unfamiliar with HTML or markup. Anyone
familiar with markup should use dynamic blocks because they are
extendable. For more information, see the section about static
HTML on the Using Content Blocks wiki page.
Content Links are the predecessors to navigation menus and were
used when the CMS was first introduced. Use content links to make
navigational links by defining a number of content links under the
same category. Then, call the links as a list referencing the Content Link [content_link] table.
iFrame Details are used both dynamically and statically throughout the system. Using them can be an extremely
easy way to bring any form or list into your CMS pages. For more information, see the section about iFrames on
the Using Content Blocks wiki page.
Dynamic Methods
While static methods can be a powerful navigational tool, the dynamic nature of the system allows you to have more
control over data rendering. You can reference common code in the system and make long-term maintenance of the
site easier. A team member with coding skills can be very useful when implementing dynamic methods.
Dynamic Blocks are the blocks where the majority of your work will reside. For more information, see the
dynamic blocks section on the Using Content Blocks wiki page.
Frames should be mentioned together with dynamic blocks because frames are essentially UI macros with the
category of frame. Frames are meant to be decorative wrappers around any block in the system. Frames apply the
${body} variable to a block and define where the block is inserted when rendered on the page.
Lists generate links to records within the system based on the filtering rules you define. Lists can be sorted for
presentation by any field in the corresponding record. Lists are a powerful tool to help supplement navigation and
pull data from outside the CMS. For more details, see the Creating a List Block wiki page.
Content Types provide site-specific control of how system data defined as templates is rendered. First considered
is the rendering of lists (summary templates), followed by the detail template, which allows control over the
record rendering. For more information and examples, see the Content Types wiki page.
List Definitions enable you to extend the summary template defaults defined on the site level. Used together with
frames, list definitions can be a powerful way to render the same data differently based on its placement on the
page or site. More details are available on the discussion of list definitions on the Creating a List Block wiki page.
Detailed Content (in Page Detail Settings) are blocks that display the content of an existing document as a block
on a content page. For more information, see Using Content Blocks.
Linking to Content
You can use URLs to link to elements within the system. See the Navigating by URL wiki page for an overview of
URL syntax in ServiceNow.
Firefox Developer Tools

To understand what is being passed via the URL address bars between the system frame sets, use some available
tools. For example, the Firefox browser has developer tools and an easy way to view records that render within the
main content frame (gsft_main) of the ServiceNow system. Also, Firefox is good for quickly building menus and
linking to records within the system. This Firefox functionality is useful when stepping through the menu items
section on this page.
65

The Incidents list offers a quick example of viewing a form within its own tab. This viewing method illustrates how
to append the URL string to render more specific content within your site.
1. Navigate to Incidents > Open.
2. Click the All link in the navigation menu (breadcrumbs).
3. Right-click in a blank area within the content frame and select Open Frame in New Window or Open Frame in
New Tab.
The URL returned should look something like this:
your instance/incident_list.do?sysparm_userpref_module=b55b4ab0c0a80009007a9c0f03fb4da9
The elements that comprise the URL are:

incident_list.do? is the call to the list with no parameters passed into it. Explore context menu options as well as
list filtering variations to see how the URL string is appended with each action.
incident_list.do?sysparm_query=&sysparm_view=ess is an example of how the view is passed in the URL
string.
incident_list.do?sysparm_query=GROUPBYactive&sysparm_view= is how the URL looks when the group
by option is chosen from the context menu.
incident_list.do?sysparm_query=category%3Dsoftware is the result of applying a category is software filter
to the list.
Explore all of the options available within the right-click menu as well as clicking through to the Incident form itself
(incident.do) to see what the URL string does when parameters are passed into it.
Examples
These examples show how to create a site that points to a variety of system data in several different data tables. The
following areas of system data are emphasized:
Knowledge: building a versatile front-end for a knowledge base, from overview page to variations on the list
definitions used in the site.
Catalog: ideas for a business-to-consumer shopping experience that pulls a variety of items and forms from your
service catalog.
Service Portfolio: using the business service portfolio to contain all defined services offered by your
organization.
Featured reports: methods for linking to the most important reports.
66
67
Navigation Menus and Content Links

The methods for choosing a link target (Open in: current window, iframe, or new window) and referencing the item
linked (Redirect to: page reference, attachment reference, or URL reference) are similar, so learning how to link
within any of these elements is useful.
A content page reference helps you select the desired page.
For example, the value home.do links to the site homepage.
Attachment reference allows you to reference a single file attached to the menu item or section record. If there is
more than one attachment, only the first is referenced.
Link is generated automatically and displays a browser file save prompt,
The specified URL reference allows you to link to a full URL string that may be in the ServiceNow system or part
of another system.
For example,
com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=66c313e7c0a8016b008ebe1a8e3d97f5&sysparm_nameofsta
links to the Ask a Question record producer.
If you need to link to a page in an existing intranet system, this attribute can be useful.
Menu Sections
Menu sections define groups of links and how the links behave. For example, link behavior determines which page
opens when the link is clicked and how it opens (such as in a new page or a new frame).
To view a sample menu section:
1.
2.
3.
4.
5.
Navigate to Content Management > Blocks > Navigation Menus.

Click Portal - Block Menu.
In Menu Sections, click Order Things.
Click the reference icon next to Detail Page.
In Related Links, click Edit Page.

By default, the link goes to the Order Things page that has the Portal - Order Splash Menu (Vertical Block
Menu) in the content area of the page.
In the majority of the default CMS menus, the menu section serves as the menu title followed by secondary text, a
separation line, and whatever links you define as menu items. The two menus primarily illustrate CMS menus.
Although the design is versatile and flows well between pages, there could be questions about linking and scalability
to large catalogs. This may only be a good practice for a small catalog with limited items. Look at the request catalog
list / grid view demo in the code example demos menu on the ESS Portal:
1. Open your instance.
2. Add /ess/manage.do to the address in your browser address bar. The address should look similar to:
https://yourinstancename.service-now.com/ess/manage.do.
3. In the Code Example Demos section, click Request Catalog List / Grid View.
4. Browse the catalog items.
Menu Items and Content Links
Menu items can be seen as featured links from each section. There are many choices in URL definitions and link
options. Links within the ESS Portal all link to content pages within the site. In turn, each page has an iFrame or set
of blocks that houses the corresponding data. This method is useful for rapid prototyping, but consider where you
need to create dynamic detail pages. Looking across all the menu sections, this discussion explains some of the
linking options available to records within the system.
Before proceeding to the links themselves, it is important to mention content links in the CMS. Menu items are
similar to content links except they are called by the list block, not as part of a navigation menu block. Menu items
and content links function the same as far as how they are defined and the options available for linking to items
within the ServiceNow system. Content links are meant to be called through a list block that calls the Content Link
[content_link] table. Content links do not have the Logged in field or the Roles option that can be very useful for
controlling the UI experience for various roles defined in the system.
Linking to catalog items, reports, and business services
68
69
Business Services links to a content page (CMS page referenced: Business Service Portfolio, URL:
business_service_category.do) that pulls the system service catalog homepage into a frame within the content area.
Each link within this section leverages the browse by category page, where you pass in the name of the category to
return results.
Target page's iFrame URL:

catalog_home.do?sysparm_nameofstack=aabdae07ef221000914304167b22567d&sysparm_view=business&sysparm_clear_stack=
Target page's frame name: gsft_main
Desktop Computing URL: category_browse.do?category=Desktop Computing

Business Applications URL: category_browse.do?category=Business Applications
Communications Services URL: category_browse.do?category=Communications Services
Infrastructure Services URL: category_browse.do?category=Infrastructure Services
Hosting Services URL: category_browse.do?category=Hosting Services
Featured Services links to to a content page which pulls a small subset of services into an iFrame.
iFrame URL:
com.glideapp.servicecatalog_category_view.do?sysparm_parent=d67c446ec0a80165000335aa37eafbc1&sysparm_view=
Frame name: gsft_main
Install Software URL:
catalog.do?uri=com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=10d69689c611227600ffeba41c664824
Email Account URL:
catalog.do?uri=com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=d67a86b6c0a80165009386c752cd4a09
Electronic Messaging URL:
catalog.do?uri=com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=533798810a0a0b2600f1a03593e19058
VPN RSA Token URL:
catalog.do?uri=com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=d67b099ac0a80165019d0c276b772502
Shared Storage (SAN) URL:
catalog.do?uri=com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=cedd458a0a0a0b8300c3b1e32e7a3ac2
Reporting links to a content page that pulls the reports page into an iFrame. All links within this menu leverage
homepages in the system, which creates an issue with the home.do URL. Notice in the links below that ../ is used to
create a relative URL outside of the CMS site home.do definition. Without this, the site homepage would render
within the iFrame.
iFrame URL: report_home.do
Cost Management Overview URL:
../home.do?sysparm_userpref_homepage=fa81ae91c0a805c64c0942ab2e4b852b
70
Administration Overview URL:

../home.do?sysparm_userpref_homepage=8b7b11f6c611228901ff3fcfbdb3cc8f
Portfolio Overview URL: catalog_home.do?sysparm_view=business
Service Availability URL: ../home.do?sysparm_userpref_homepage=8ee772000a0a0bad00c38eb7e68b93d0
Service Level Agreements (SLA) URL:
../home.do?sysparm_userpref_homepage=757e86a30a0006d4010a6851639498d1
iFrame Methods
The following examples show how system records are pulled into an iFrame that is placed on a content page. For
system lists or forms, use the frame name gsft_main so that click-throughs work properly.
Order Hardware is an example of linking to a catalog category.
URL:
com.glideapp.servicecatalog_category_view.do?sysparm_parent=d258b953c611227a0146101fb1be7c31&sysparm_view=
My Aprovals List is an example of linking to a list with a view filter and a JavaScript that reference the
authenticated user.
URL:
sysapproval_approver_list.do?sysparm_query=approver=javascript:getMyApprovals()&sysparm_view=ess
Service Catalog Home Page (system) references the system catalog page within the Service Catalog application.
If you are satisfied with the way the catalog looks in the system and do not want to make a change, this is an easy
way to bring the page into a CMS design.
URL: catalog_home.do?sysparm_view=catalog_default
Problem Management Overview references a homepage. The ../ is added to make the URL string relative to
system homepages; without it, the URL string would always resolve to the default CMS homepage reference in
the site.
URL: ../home.do?sysparm_view=problem_overview
Managing System Content

The majority of the content used in a CMS site will be managed in different locations throughout the system. For
example, if you are building a site in CMS that searches knowledge articles, the pages, blocks and other collateral
will exists in the CMS application, but the knowledge articles themselves will be managed and authored in the
knowledge management application. The same goes for any other type of content you plan to leverage in your site.
Taking time to understand the table structure of data is the first step in becoming acquainted with content. Where
linking to content is primarily a static procedure, this section will take an in depth look at the document tree and how
field values are formatted for use within the CMS. Before proceeding take some time to right-click on forms in the
system so that the information provided below makes sense. Choose the "Show XML" to view the document tree for
the referenced database table, if you would like to see the table values for each field right-click on the gray form
label and choose Show - Field Name or Configure Dictionary (Personalize Dictionary in versions prior to Fuji)
for reference.
Now that you have taken some time to look at accessible table data, take a look at any internet news sites for ideas
on formatting dynamic list data as well as the full article detail. Blog sites, shopping sites, and any other site you feel

are easy to use should also be part of this research as layout and usability can be extremely time consuming. Do not
be afraid to emulate your interface after a site design that inspires you.
This New York Times example has 2 separate list formats [1]
The CNN example has at least 5 list formats working on this page [2]
On the ServiceNow website, we use a number of different list formats
Knowledge Articles - kb_knowledge table

When you right-click and select Show XML on any form within the system the document tree for the referenced
database table will be reference-able. A selected subset of the document tree is shown below, acquainting yourself
with the the content readily available to your site design.
<kb_knowledge>
<active>true</active>
<author display_value="First Last Name">Use this field value if author name is important</author>
<short_description>Use this field value as the link to the full article detail</short_description>
<description>Provide this field value as a 1-2 sentence summary of the article</description>
<number>Unique ID can be leveraged in a number of different ways</number>
<published>Published time stamp of the article </published>
<rating>This field value provides a 1 to 5 star rating similar to iTunes</rating>
<sys_updated_on>Add to supplement article published timestamp</sys_updated_on>
<sys_view_count>8</sys_view_count>
<topic>Useful field value in creating hierarchical breadcrumbs</topic>
<category>Also useful in organizing articles hierarchically </category>
<use_count>Use this similar to Facebook's "like" feedback, answer to the question was this useful</use_count>
</kb_knowledge>
<br/>
<tr>
</div>
</j:if>
</td>
<td width="100%">
</a>
71
</p>
</td>
</tr>
<tr>
</p>
</td>
</tr>
</table>
</div>
</j:jelly>
References
[1] http:/ / www. nytimes. com/ pages/ todayspaper/ index. html
[2] http:/ / www. cnn. com/ WORLD/
Our ESS Portal

Overview
The Employee Self-Service (ESS) Portal is a combination of many design contributions from the ServiceNow
community. The goal was to deliver a portal that
is configurable
adheres to best practices in self-service design
illustrates theme use
follows corporate design guidelines
ESS Portal use is typically based on the people using the data within your system and how easy it is to train them.
Self-service users can make requests, view articles, log incidents, interact through live feed or chat, and search the
knowledge base through a user-friendly website.
For those who have been using the Content Management System (CMS) for years, the ESS Portal may be new. CMS
initially started out with two site demos: Austere and Visionary. While the initial site demos were useful, they only
represented a starting point for building out extended functionality in the portal. The ESS Portal is designed as a
working portal template and a delivery mechanism for new functionality. New ESS Portal functionality is added
continuously throughout the development cycle. Substantial efforts by the ServiceNow community have allowed us
to roll good designs back in as demo data for public use by the entire community.
By default, the URL for the self-service portal is:
http://instancename.service-now.com/ess/
72
Our ESS Portal
Recommended Use
If the ESS Portal meets your business needs, you have a few options. Here are some recommended use cases for the
ESS Portal:
Lightly edit the default ESS Portal site and use it.
Copy the ESS Portal to create a new site, then use the default ESS Portal as a reference guide to the new site. If
the new site needs to be heavily customized to meet your business needs, take a look at the site building
examples.
If you create your own site, working with a copy of the ESS Portal can help you understand the basic
requirements for a website. For example, at the very least a site needs a homepage, a search results page, a catalog
item detail page, and a knowledge detail page.
Making your own theme allows you to explore and edit the base system CSS without risking any changes to the
base system. Having a working example can help you troubleshoot any issues that may arise in your site building
project.
Ensure that you receive updates and new code improvements by working with a copy of the ESS Portal. Any change
you make to base system code is respected by any subsequent updates that ServiceNow pushes to your system.
Given the simplicity of setting up a new site, it makes sense to leave the ESS Portal code as a read-only master
template so you can obtain the newest functionality with just an upgrade and always have a working master system
to work from. If you would like to keep current with updated code and demo examples, use the pages and the entire
ESS Portal as read-only master templates. It is very easy to copy pages and an entire site.
73
Our ESS Portal
ESS Portal Site Reference

The pages in the ESS Portal can be grouped by their functional purpose within the site. The homepage and parent
pages provide navigational menus within the site. Other pages are specifically designed to handle dynamic data,
forms, and record details within the system. This section explains the different types of pages and how they relate to
the site as a whole.
Portal Homepage
The homepage is designed to immediately communicate the purpose of the site and provide clear paths to common
actions within the system. As plugins are activated within the system, menu items are added to the homepage along
with their corresponding detail pages. For example, notice that on the right side of the header (item 1), the chat queue
option is activated. Also notice that in the far right of the content area (item 2), at the bottom of the "Get Help"
menu, the "Live Feed" link is active (turned on when the "Live Feed" plugin is activated).
Item 1: Header Block

The header is designed to be a single block that manages a large part of the branding and site navigation. Managing
these two areas should be easy, so the header block provides a wide range of configuration options. For more
detailed information about using header blocks, see the discussion of header blocks on the Using Content Blocks
wiki page. Briefly, the header block is a dynamic block that calls many UI macro elements for functional and display
options. Following is a look at some of the base system options being used in this header.
74
Our ESS Portal

Navigation Menus
There are two menu systems in this header block:
a standard drop-down (site-wide link collective) below the logo
a super menu located to the left of the logged in user's name
Both menus work together to provide persistent system navigation. The Home, Order Things, Knowledge, and Get
Help options on the drop-down menu each provide site overview pages; they are also used as parent pages. All
actions that are specific to the logged in user are organized within this menu. Super menus group actions in
functional areas of the user interface. While the Account Settings Menu in this example is a simple design, super
menus are a powerful way to design very complex menus.
The drop-down menu was created to provide a consistent collection of site-wide links prominently visible to the
user.
The super menu was coded in the CMS as part of the ServiceNow corporate website project. It is used here to
provide a useful secondary menu with minimal impact on the interface. The super menu was created to show
common self-service actions near the displayed user name. The links themselves point to pages that use iframes to
pull in the corresponding data. For more information, see the discussion of iFrames.
One of the unique qualities of the super menu is that it allows you to embed menus within menus. While the super
menu is similar to the other base system menus and is comprised of menu sections and menu items, the main
difference is that menu sections can contain another menu. This enables the designer to group larger menus together
in a hierarchical manner. Another noticeable difference from the other menus is the introduction of the header and
the footer fields on the menu form (which it only shares with horizontal blocks menus). These fields allow you to
stack menus on top of menus. Once you get a feel for the possibilities, you can see the many design options. For a
more advanced example, see Active Super Menu.
Here is the functional breakdown of the items in the menu:
Approvals provides a list of current approvals and their status

Open Orders is a list of open requested items that have been ordered by the logged in user.
Get Help Status is a list of incidents opened by the logged in user.
Your Profile links to the user profile record within the system.
CMS Administration is a useful page. Currently, there is an administration (navigation) menu that points to
many related wiki articles, descriptive menus for all blocks and navigation menus, and a prototype for passing
dynamic categories. In the future, this page will be the gateway to new functionality and community examples in
the CMS. This portion of the ESS Portal is described in greater detail in the Site Administration section.
75
Our ESS Portal

System Actions
Logo - image field that allows you to upload an image and links back to the site homepage.
Text - supplementary text field to communicate the title or purpose of the site.
Logout - displays the current user login name and a log out link.
Font Sizer - a useful accessibility tool for changing font sizes globally (use relative font declarations in your CSS to
enable this to work).
Search Bar - can search globally or any number of custom search groups you specify (by default, the non-global
search groups reference catalog items and the knowledge base).
Chat Queue - displays any chat queue you reference (the example uses the Service Desk Chat queue) from the
header as an easy, one-click entrance into the chat application. This option only appears if the chat plugin is activated
and a queue is referenced in the header. To learn more, see Making Help Desk Chat Accessible to End Users.
Item 2: Portal Block Menu

Like the header menus, the menus in the content area serve a unique purpose. These menus allow site administrators
to create float grids for a variety of layout possibilities. Inspiration for these come both from our community and
popular websites such as the Apple Store, Google Shopping, and Amazon.com. Imagery used in such sites
immediately grabs the eye and communicates meaning to those browsing the homepage.
Linking all pages, forms, and other content together can be a daunting task. Header blocks are designed to make
branding easier and navigation menus enable site administrators to manage links and navigation easily. As you click
through the ESS Portal, see how linking can be managed in a few different ways. By using navigation menus
together with list blocks, site administrators have a powerful blend of static and dynamic navigation capabilities at
their fingertips.
For more details, see Navigation Menu Blocks.
Item 3: Powered by ServiceNow Footer

The footer is simple, but the "Powered by ServiceNow" statement is important because otherwise people do not
immediately understand that this portal is part of the ServiceNow system. For another interesting example of a
footer, see Building Our Website in CMS.
Page Templates - Looking Beyond the Homepage

The homepage is the most critical introduction to your site, but the majority of a site is the pages that support the
homepage. Now we'll stop looking at the ESS Portal as an observer and begin viewing it as a site administrator and
builder of templates. In this tutorial on building our corporate website, we start with page templates and move to the
complexities of homepage design. Page templates help you work toward a single design for the entire site. This
design work needs to take place first because it is the foundation and structural blueprint of the entire site.
Look at the site record in this illustration. The ESS Portal site record is a collection of all site child pages. Attributes
defined at the site level, such as layout and theme, apply to all pages in the site, but you can make different selections
for individual pages.
76
Our ESS Portal
Notice the four page reference fields in the left column of the site record.
Home Page - the landing page for your site (mandatory)

Search Page - the landing page for your search results (mandatory)
Login Page - a standalone login page (useful if you want to enforce authentication for your entire CMS site)
Gauge Page - detail for any gauges used in the site
These pages are the first steps in understanding page templates and defining site defaults. View the Pages related list
at the bottom of the site record; it is sorted by layout. Notice that three pages have a layout specified and all of the
others are blank. This shows that thought has been put into the common design of the site, not just the exceptions.
First, design for what is common throughout the site, not for the exceptions. One of the biggest beginner design
mistakes is to put the majority of effort into the homepage, leaving the design of all supporting pages as an
afterthought.
Layout and Column Considerations

The header and footer are shared elements, so they are not a focus here. Instead think of the two columns below the
header and the wide variety of content that needs to be displayed within the dimensions of the columns. Generating a
dynamic list and having it appear within a column around 200px wide is the easy part of this layout. The greater
challenge is ensuring that the main content area has enough space to display any forms you may want to call from
ServiceNow. Addressing these considerations is a big objective for page templates.
When creating a common layout, consider the following:
Left hand column (1) - Both the Common Answers and Current Issues blocks are dynamic lists that are
specifically designed to render within a narrow column. Each list uses the Type setting of navigation_list_style,
which uses HTML and CSS to restrict width and use smaller font sizes.
Main Content Column (2) - One of the reasons a fluid layout was selected for the content area of the ESS Portal
was to allow large and complex forms to be displayed within the center column without horizontal scrolling.
77
Our ESS Portal
Page Template Use

Now that the ESS Portal homepage is defined, move on to the pages that use the page template. Every page except
the homepage should use a page template. The first master template defines the defaults for the site. This includes all
pages (excluding exceptions), the default theme, and the default layout.
When you design your own site, begin with a page template definition so you can define the defaults for the site and
not waste time defining redundant values for the pages. Layout and theme values defined at a site level are applied to
all pages within the site.
Here are the page level defaults:
Parent Pages - a master page template that addresses all of the organizational sections (parent pages) and their
child pages defined within the site. The ESS Portal site contains three parent pages: Order Things, Knowledge,
and Get Help. Because they act as mini homepages within the site, their design may differ slightly from the detail
pages.
Detail Pages - a dynamic page that differs from the parent page (the content area displays a full article or detail
instead of an array of related content and navigation menus).
Parent Pages
Parent pages are the homepage supporting cast and provide a way to take a large menu system and expand it across a
few highly organized pages. Doing this allows the designer to arrange how users navigate the site and have their
specific needs met. While the temptation to add many links to the homepage is there, realize that the more links
added to the homepage, the more complex the page becomes and the more difficult it is for users to find the links
they need. Keep the site simple and use parent pages as secondary navigation in concert with your homepage.
Order Things - Catalog items and services can be requested from the Order Things page. The categories of items
to order are displayed, along with quick links to the top requests.
Selecting a category displays a list of items in the category.
78
Our ESS Portal

Selecting the items displays the catalog form for the item, with a shopping cart for making requests.
Knowledge - Knowledge articles can be found through the Knowledge page. The front page displays Highest
Rated, Most Viewed, and Current News.
The search bar at the top searches the entire knowledge base. Results can be refined based on category.
Feedback, including comments and ratings, can be given about the article.
Get Help - The Get Help portal can be used to ask questions, find answers, and monitor tickets.
Selecting Something Broken displays a form to submit an incident.
Selecting Ask a Question displays a form to submit a question.
Selecting Status displays a list of previously submitted questions and incidents.
Detail Pages
Understanding detail pages not only unlocks the mysteries of CMS, it attunes you to the dynamic nature of the
system. If you have a large site (over 100 pages), you may need to consider moving to a more dynamic model. Detail
pages pull attributes from URL to populate the main content of the page. Without any attributes, the content area is a
blank container or iFrame. Without detail pages, the links of your lists will go nowhere, resulting in a "form not
found" error message. Detail pages are defined in several places where definitions work together to serve detailed
records from the system. For example, the configuration section of the CMS application menu contains the "Page
Detail Settings" and "Content Types" forms.
Content types are important as gateways to the data tables in ServiceNow. Like layouts and themes, content types
defined for a site become defaults for the site, but you can change the content type settings for individual pages and
blocks that need to behave differently.
The important fields in the Content Type form are:
Type - specifies the database table referenced, which determines the type of content defined in the remaining
fields.
Summary Template - establishes default formatting for list blocks throughout the site. Design the layouts to fit
common use. Summary definitions can be overridden by the "Type" field on the List form. The List Definitions
module provides a list of . The purpose of the summary template is to give designers all of the fields data that
comprise the referenced database table. For more information on how this works, see the excellent example of the
power of list definitions from the corporate website.
Detail Template - ties directly to the a Detailed Content record (created in the Page Detail Settings module),
which defines the block placed on the page, as well as all of the fields data that comprise the referenced table.
More often than not, the detail of the ServiceNow record is passed back in an iFrame exactly as it looks in the
system. If a simplified view of the record is needed, define a simplified detail template. Depending on the data or
database tables you plan to use, you may also need additional detail pages defined by content types.
NOTE: These detail pages are mandatory if you plan to access ServiceNow system data. For example, if you are plan
to show the service catalog in your CMS site, then you need both a Service Catalog content type (referencing the
sc_cat_item table) and a detail page that provides the full view of the item. The ESS Portal site uses only the
knowledge base, so required only a knowledge content type (referencing the kb_knowledge table) and a knowledge
article detail page. This is explained on the Creating Content Types page.
79
Our ESS Portal
80
Menu to Detail - Working Examples

To illustrate how parent pages flow into the detail pages, look at the ESS Portal. The three buckets of actions that are
organized on the homepage offer a good starting point for understanding the content types (there are seven) defined
in the ESS Portal. This section looks at the parent pages that flow to the following detail pages:
Service catalog detail page - detail page for all catalog items, content items, order guides, and record producers
(mandatory for this site).
Knowledge detail page - used to display full knowledge article detail (mandatory for this site).
Order Things (Parent Page to Detail)
In this example, a horizontal navigation menu provides a limited catalog category set that links to the catalog item
detail. Catalog items and services can be requested from the Order Things page. The categories of things to order
are displayed as a vertical navigation menu block, along with a list of quick links to the top requests within the
catalog:
Selecting a category navigates to another page that pulls the corresponding category list of items into an iFrame. The
Cart displays for the first time within the flow of the ordering process. There are two types of links on this page:
Links within the iFframe (catalog items) whose click-throughs are handled because they are contained within an
existing iFrame .
Dynamic List links in the left column. This list pulls knowledge articles and record producers created in the
service catalog. Hover over the Delegate roles to group member link and you will see something similar to:
catalog.do?uri=com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=1bc632740a0a0b1f00
The detail page URL is catalog.do and this page is passed the ID of the record producer. Details are given in the Get
Help Example.
Our ESS Portal
Selecting a catalog item from the list displays the catalog detail with a shopping cart for making requests.
81
Our ESS Portal
82
Knowledge (Parent Page to Detail)

The content in this example references the Knowledge [kb_knowledge] database table and is entirely list based. This
makes it a good illustration of linking between list blocks and detail pages. Content types define the look and feel of
the list and the record detail.
On this page, the individual links in lists all use the URL that is defined in the Summary Template field of the
Content Type form. This is similar to the catalog example above, but calls a different detail page, knowledge.do.
knowledge.do?&sysparm_document_key=kb_knowledge,3b0fccee0a0a0b9b00d34b36ea41a43e
Open this page in edit mode and click the pencil on either of the lists stacked in the left column. The Type field
identifies the list definition that is an extension of the summary template for the content type. The
g:content_summarizer call pulls in the summary code. This shows where you can override the summary
definition by placing similar code where this call is located. That is the power of list definitions.
<div class="content_list_container">
<div class="content_list_title">${jvar_title}</div>
<div class="content_list_menu_items">
<ul>
<li>
<g:content_summarizer content="${current}"/>
</li>
</ul>
</div>
Our ESS Portal

</div>
</j:jelly>
Looking at the knowledge article details, note that it is essentially the same formatting as defined in the rest of the
system. It is important to have the rating and feedback as part of the default detail display so that users can give
feedback, including comments and ratings, about the article. If you need to remove anything from this detail, remove
it from the detail field of the kb_knowledge content type.
Search Results (All Pages to Results Detail Page)

The search results page is one of the most important pages in the portal. Before using the Search Results (Global)
block, you must define content types to control the actions that occur when a user clicks one of the search results. If
no content type is defined for a table, selecting a link on that table renders the results according to the content type
DEFAULT.
Following is an example of Search Results (Global) in use:
83
Our ESS Portal
CMS Site Administration

One of the biggest questions in content management is how to incorporate good ideas from the community back into
the product. The CMS Administration pages of the ESS Portal are a step in this direction. These pages were created
to bridge the gap between the ESS Portal and the documentation on the Wiki.
84
Our ESS Portal

Look at the section on who is using the CMS and the dynamic catalog category demo (login as a system
administrator):
https://<instance name>.service-now.com/ess/admistration.do
Our Website
Overview
Early in 2011, the ServiceNow corporate website was rebuilt with the Content Management System. The goal was to
have the website live by the Knowledge11 User Conference in May 2011. The marketing team evaluated the CMS
and presented a vision, a list of requirements, design specifications, and new content. In many ways, the project
pushed the boundaries of what we thought possible in the CMS. We also discovered a few common obstacles in the
CMS. Some of the innovations resulting from the project made the CMS application a more stable and robust
offering for customers.
On the live ServiceNow corporate website many elements worked together. The Development, Human Resources,
Marketing, and Documentation departments actively edit the website. Development works within the structural
portion of the website and evaluates website enhancement requirements to see if they should be made publicly
available. Other departments work within the processes defined in the Knowledge Management System.
The structural framework is defined in the CMS. The maintenance skills required are advanced knowledge of
XHTML, JavaScript, CSS, and cross-browser compatibility.
The majority of the copy is defined in the knowledge base. The vision to utilize Knowledge Management was not
just to create an in-house ITIL knowledge base, but to provide the content managers and writers with an easy way
to maintain the copy. With basic document template training, members of the Human Resources department can
manage the entire lifecycle of job postings within the site. Members of the Events team can manage the news and
events portion of our website.
Videos are hosted on a third-party service that specializes in optimized streaming content. An outside video firm
and in-house video editors edit the videos.
Define the First Page Template

When you are ready to create your own site, start by defining templates. To avoid creating a complicated design,
start by breaking the website into two separate master page templates. First, define the shared resources in the system
(header, CSS, menus, layouts) and where any exceptions exist. Most pages in a website are fixed width, center
aligned with a header, footer, and right hand column. Almost every page, except the homepage, fits this design so it
is a good place to start. Create the master template first to get the site up for testing. Testing enables you to address
any blocking issues that live within the template. See Creating a Site for a more in-depth look at the first steps of site
building.
85
Our Website
86
Which Pages Need Templates?

Every page that is part of the site needs a template. When building the framework for a new site, the following pages
are the foundation. These pages are identified on the site record and are the first steps in understanding page
templates and defining site defaults.
Home page - the landing page for the site (mandatory).

Search page - the landing page for search results (mandatory).
Login page - a standalone login page (useful if you want to force authentication for all of the CMS site).
Gauge page - detail page for any gauges used in the site.
Depending on the data or database tables you plan to use, you might also need detail pages that are defined by
content types (also defined at a site level).
Knowledge detail page - used to display the full knowledge article detail (mandatory for the site).
Incident page - detail page for the incident record.
Catalog page - detail page for all items, content items, order guides, and record producers.
Default Master Page Template

The first master template defines the site level defaults. This includes all pages (excluding exceptions), the default
theme, and the default layout. Start with this definition to set the defaults on the site level and not waste time
defining redundant values on the page level. Layout and theme values defined at a site level become the default for
all pages that reside in the site. Following are the page level defaults that are being considered here:
Section pages - a master page template that addresses all of the organizational sections (parent pages) and their
child pages defined within the site. The ServiceNow site contains six sections: solutions, learn more, customer
success, about us, news and events, and we're hiring. The sections serve as mini homepages within the site and
may differ slightly from the detail pages.
Detail page - a master page template containing a content area that displays a full article or detail (in contrast to
the parent page that displays an array of related content)
Note: These two generic templates are mandatory if you plan on accessing system data. For example, if you plan to show the service
catalog in your CMS site, then you need both a service catalog content type (referencing the sc_cat_item table) and a detail page that
provides the full view of the item.
Using the New Master Templates

Creating the basic structure of the site is an essential stepping stone to the next phase of site design: working with
content managers to add content. First, create the site pages (home page, search page, login page, and gauge target
page), then create the parent pages (each parent page may have slight differences in the blocks), and finally create
the pages themselves using the "Copy" action on pages.
It is important to understand the difference between "Copy" at a page level and at a site level. "Copy" on the page
record duplicates the page itself and reuses all of the elements in the copied page. "Copy" on the site record is a
much larger action - it creates a new record of the site, all of the pages under the site, and all of the blocks used in the
site. Copying the site at this point in the process is not necessary and should not be used until you need a complete
copy of the site for site versioning.
To use the master template:
Copy from template all site pages (home, search, login, and gauge target) and make appropriate block changes.
Copy from template and create all parent pages within the site - because the content may not yet be defined, it
may make sense to add placeholder blocks that can be edited at a later date by content managers.
Our Website
87
Copy the parent pages to create all child pages, using common blocks where possible and page-specific blocks
where needed.
Site Navigation - Connecting the New Pages

Once the hierarchical structure of the site has been established and built by applying your master templates, start
thinking about navigation menus. The menu chosen for the task is going to depend on the size and complexity of
your site. With 130 pages and six main sections (parent pages), ServiceNow needed a menu that could handle at least
22 links per section in an organized manner. For a quick comparison, the Employee Self-Service Portal has
approximately 30 pages, which is an amount that could be managed by a standard drop-down menu. With 130 pages,
we needed the newest addition to the block family - the super menu.
Master Template Reference

1. Header
The header is a content block
containing many items. The logo,
global search, and two menu systems
work together in the header. In our site,
once the navigation of the site was
defined, the menus were built as
navigational menu blocks referenced
by the different rows of the header
block. A dynamic content block is also
located within this section of the layout
(or dropzone) to accommodate global
JavaScript code.
Top of the page- Items 1- 4. Distill the entire site to a single, reusable master
template. It must satisfy the default theme and layout requirements for the majority
of pages in the site. From there, identify the exceptions.
If you look at the header block form

within the CMS, you'll see a reference
field to the list of defined navigation
menus in the right column:
The Top menu resides in the row above the logo and uses only menu sections to create a single level menu
structure.
The Bottom menu resides below the logo and uses the super menu type.
A dynamic content block is within this dropzone in case script includes need to be added late in the design
schedule. When expecting the unexpected, having a dynamic content block in each dropzone of a template can
save time in the long run. Adding a block to a page is easy, but when there are 100 pages, it becomes a time
consuming task. See the use case example for a possible global js dynamic content block in this article.
Our Website
88
2. Page Title and Description

We used a single dynamic block to pull the Title and Description fields from the Page record. For production, we
made a different Page Title and Description block for each section of the site. Keep in mind that the title field also
defines the name in the browser when a page displays in a new window or tab.
For the same reason the dynamic content block was put in the header dropzone, it is a good idea to place a global
block and a section-specific block (both dynamic content blocks) placeholder within your master template. They
can always be removed, but adding them to an entire site later can be time consuming. The code example section
in this article contains an example of how to pull the page title and description.
3. Page Content
Both static and dynamic CMS blocks are dependent on the nature of the content.
Use static blocks when content managers and writers have entry-level HTML knowledge. For example, job
postings (knowledge articles created with the system HTML editor) are managed by members of our human
resources department with no HTML experience. We provided a template and a brief explanation of the process.
Use dynamic blocks for blocks that need to use scripting or pull from the system backend. Anyone that edits their
own HTML, Jelly, or Javascript may find the HTML editor in the static block limited. The HTML editor can also
add tags or formats that advanced coders find unnecessary.
4. Right Column
Using data from the page table, the right column displays a different graphic based on the parent page (divided into
the six sections of the bottom header menu) and even at the page level if necessary. Initial designs had the right
column content change almost on every page, so code was put in place to allow these type of changes in a single
block. We ended up using consistent content within the right column because it fit the site design.
The most important actions of the site were defined and added as buttons within this column.
Once again, it is a good idea to place a global dynamic content block and a section-specific dynamic content
block as placeholders within your master template. They can always be removed, but adding them to an entire site
is tedious.
5. Horizontal Action Block

For this part of the layout, a dynamic
block was created to work together
with the actions in the right content
column.
The
first
rectangle
dynamically pulls in the page name,
with the remainder of the blocks listing
important links chosen by the content
managers. The goal was to have a
single block that defined these actions across the entire site.
6. Supplementary Page Navigation Menu

When first designed, this section had the same links as the super menu of the corresponding section (for this
example, the Solutions Menu). Instead of creating another navigation menu block, this supplementary page menu
was the same as the Solutions section of the header super menu. The only difference was the CSS rules applied. The
CSS rules needed to be different in several ways. For example, the super menu background is light gray, the
supplementary menu is dark blue, and the text coloring, as well as the block menus widths, needed adjustments.
Our Website
89
7. Footer
Redundancy with menus can be good. We have yet another menu in the footer, along with a standard corporate
website copyright notice.
8. Super Menu Sections

Super menus are unique because each
section contains a separate horizontal
block menu. A super menu is actually
seven navigation menus combined into
one:
One super menu record that defines
all sections.
Six menus, each of which contains
all links for that section of the super
menu.
Only horizontal block menus can be called by the super menu sections. First, create the horizontal block menu, the
contains menu8, then you can call it from the super menu section's Contains Menu field.
Here is a quick way to understand how super menus are created. First, create a super menu and add a menu section.
In the right column of the Menu Section form, you'll see a Contains menu reference field. This may seem strange if
you have not created the referenced menu yet, but it is not a problem. Just define the sections first, then create
placeholder menus for each section. Once each placeholder is created, go into each section and reference the
Contains menu menus you just made.
Please note that Section 11 describes the super menu in more detail, including more information about the theme and
CSS level where you can modify the horizontal block menu styles to fit within the super menu container. (These
modifications were briefly mentioned earlier in the Supplementary Page Navigation Menu section where the CSS for
horizontal blocks was modified to work within the container of the submenu.)
9. Parent Page and Page Breadcrumb

The code in this section is the same code mentioned in the [[#2. Page Title and Description|Page Title and
Description section, except for one difference. The code here shows both the parent page and page name in the
breadcrumb. When you dynamically pull both the page name and description, clearly identify the purpose of the
page. Sites that do not call these attributes dynamically need to create a unique block for each page, which is far
from dynamic.
In the future, the ESS Portal should start pulling this information into its pages. The fields did not exist when the
ESS Portal was created.
Notice that this example has list-based page content and that the page description is not called. This design decision
was made by the ServiceNow marketing team because the description seemed too obvious to be placed in the page.
Our Website
90
10. List Block Pulling From

Knowledge Articles
Because the people responsible for
maintaining the ServiceNow content
were not well versed in HTML, XML,
or Jelly, it was clear that they should
use the WYSIWYG editor. (The editor
was already used to write knowledge
articles and static content blocks.)
Another reason to have all of the
content work done in the knowledge base was the possibility of adding commentary and rating to the items posted.
With experience creating custom lists that drew from catalog and knowledge data, it was easy to visualize how the
pages would look, from the overview pages that housed lists down to the detail pages themselves. To keep the
backend simple, we created a few custom fields and some well planned topics, categories, and subcategories, which
created a single area where the marketing team could manage the majority of the content.
Before navigation menus were added to the CMS, the only way to create a navigational structure was to create a list.
While lists may not make sense at first, after you create one, the backend calls start to fall in line. Using a filter
interface that has access to any field in the table makes list filtering easy. Because lists are dynamic and tie directly
to a database table whose content is not maintained in the CMS, you should take a look at the table's corresponding
application (in this case, the Knowledge Base). As mentioned before, having the content managers use the
WYSIWYG editor in the Knowledge Base application, not the CMS application, kept them focused on their content
and deliverables.
List blocks are very powerful and flexible. Here are a few places that allow you to have complete control over the
list display:
Frames - frames allow you to place a decorative border and wrap HTML code around any existing block. By
combining frames with list types, the designer has complete control over list placement in any design situation.
List Types - are set up in the List Definition module and are explained further in the example code below. The
Type reference field on the List of Content form enables you to write HTML code that defines list appearance
and what fields are used in the list display.
List Filtering - lets you create a query based on any combination of fields in the referenced table for a more
granular definition of list contents.
Maximum Entries - easily limits results from the table to fit the design of the List block itself.
Order and Order Direction - sort the list by any field in the referenced table, in either direction.
Our Website
91
11. Active Super Menu

Although the requirements of the
ServiceNow
corporate
website
produced a number of new CMS
features, the most important is the
super menu. The super menu solves a
problem that traditional drop-down
menus could never manage properly a combination of engaging page
content and a list of items. While the
super menu possibilities may not be
obvious at first, we can show you how
to create an attractive and useful super
menu for your site. As mentioned
before, the super menu is a single
menu that allows each menu section to
contain another entire menu, for a total
of 7 menus. Picture the submenu (item
8), contained within the "Solutions"
menu section of the super menu.
Anatomy of a super menu:
One super menu record
Six separate menu sections that each reference their own unique menus defined in the contains menu reference
field
Six separate menus to support each section
Code Examples
1. Header Example Code
This dynamic content block needs to be active and have the Two phase option selected. The g:requires tag is
including the UI script defined in the system whose name is servicenow.website.globals. The file extension in the
call is .jsdbx and is used only in the call to the UI script, not in the script name in the system. For JSDBX, the file
being called is a JavaScript(.js) defined within the database (db) that needs to be cached (x).
<g:requires name="servicenow.website.globals.jsdbx" />
</j:jelly>
Our Website
92
2. Page Title and Description Example Code

This dynamic content block needs to be active. There are two actions within this code snippet. First is a
forward-looking string container that allows site translation, the ${gs.getMessage('Your Text')} string call). The
second
action
pulls
in
the
page
title
and
description,
${current_page.getName()}
and
${current_page.getDescription()}.
</p><br/>
</j:if>
</p><br/>
</j:if>
</j:jelly>
3. Supplementary Page Navigation Menu Example Code

In the example below, look at the CSS class selectors and rules. Also, note how the block containers
(div.cms_menu_section_blocks)
are
defined
based
on
the
outer
container
(TD.layout_content_submenu_column). The outer container is actually a part of the site layout. This is
clearer if you compare the styles to those used in the super menu further down in the example. The lesson is that
there is no need to make a completely new menu system - just use CSS to change the look and feel of existing
menus.
/*********************************************************************************************************************************************************
SUB MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu
*********************************************************************************************************************************************************/
TD.layout_content_submenu_column DIV.cms_menu_section_blocks {
width: 156px;
height: auto;
float: left;
position: relative;
padding: 0px;
background: none;
}
Our Website
93
TD.layout_content_submenu_column DIV.sub_menu_section {
width: 156px;
height: 20px;
float: left;
padding: 0px;
background: none;
}
SPAN.cms_sub_menu_list_link, TD.submenu_cell A
color: #FFF;
}
TD.layout_content_submenu_column IMG.menu_bullet{
display: none;
}
TD.cms_menu_section_blocks_title h2, TD.cms_menu_section_blocks_title

h2 a, TD.cms_menu_tab_blocks_text h2 {
margin:0;
padding: 0px;
font-size: 11px;
text-transform: uppercase;
color: #42C4DD;
white-space: nowrap;
}
TD.layout_content_submenu_column a.cms_menu_block_item {
margin:0;
padding: 0px;
font-size:11px;
color:#FFF;
}
TR.layout_content_submenu_row TD.layout_content_submenu_column{
background: transparent url(sub_menu_background.gifx) repeat-y
center top !important;
}
Our Website
94
4. List Block Pulling From Knowledge Articles Example Code

This code example contains one of the best tricks in the CMS. Use the Type field with draws from a number of list
definitions to make slight, or very dramatic changes, to list display. Because the UI is open to configuration and
innovation, this is a good opportunity to use design skills. Anyone with HTML and CSS skills knows that a basic list
can be turned into a float grid or made inline. The combinations are limited only by what the designer can dream up
and code.
In the code example, a custom logo field (u_logo) has been added to the Knowledge form. The custom field displays
customer logos, partner logos, and award images on the awards page. A number of different sections use this list
definition, so efficient reuse is taking place.
div class="cms_knowledge_list customer_success" - Begin by creating an outer container with
a unique class name that can be used as a basis for CSS style selectors and rules. From the outer container, many
of the child elements can be accessed and themed.
<g:for_each_record file="${current}" max="${jvar_max_entries}"> - Loop for list
creation that calls the selected table record and the entries set on the list form.
<a
href="knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}"><img
src="${current.u_logo.getDisplayValue()}" alt="${current.text}"
width="110px"/> - Defines linking to the article detail in the knowledge base. For further reference, look at
content types within the site definition and you will see some similarities. The knowledge.do? portion of the URL
points to the knowledge detail page which (as mentioned above) is mandatory if you plan to cal the Knowledge
base in your CMS site. The rest of the URL represents the syntax in calling a knowledge article by its sys_id.
Each and every item housed within the system has a unique sys_id.
${SP}-${SP}${current.author.first_name}${SP}${current.author.last_name} - This
example is commented out and not used but it is still interesting in that it has a jelly call ${SP}, and that it pulls
the knowledge article's author by first and last name.
<br/>
<tr>
</div>
</j:if>
</td>
<td width="100%">
</a>
Our Website
95
</p>
</td>
</tr>
<tr>
</p>
</td>
</tr>
</table>
</div>
</j:jelly>
5. Super Menu Sections Example Code

If you have taken a look at the ESS Portal homepage, you already know what a horizontal block menu is (CSS rules
called section blocks). This menu is essentially nothing more than a simple float grid. The defaults are written first.
If you look at the portion below the commented SUPER MENU VARIATIONS..., you can see how we are
overwriting the defaults by adding a containing div, with a unique class. In the code that renders the default header,
the bottom menu resides in a table cell with the class of cms_header_bottom_menu (hence the
TD.cms_header_bottom_menu CSS selector).
/*******************************************************************************************
Section Blocks Menu (cms_menu_section_blocks UI Macro)
*******************************************************************************************/
div.cms_menu_section_blocks {
width: 260px;
height: 260px;
float: left;
padding: 10px;
background: url(blue/portal_horizontal_bkg.pngx) repeat-x center
bottom;
}
p.cms_menu_separator {
margin-top: 6px;
margin-bottom: 6px;
}
Our Website
96
td.cms_menu_section_blocks_title h2, td.cms_menu_section_blocks_title

h2 a, td.cms_menu_tab_blocks_text h2 {
margin:0;
padding: 0px;
font-size: larger;
color:#444;
}
a.cms_menu_block_item {
margin:0;
padding: 0px;
color:#999;
font-size: inherit;
}
/*******************************************************************************************
SUPER MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu
*******************************************************************************************/
TD.cms_header_bottom_menu .cms_menu_super_menu_bar { /*style the super
menu drop down bar */
z-index: 199;
float: left;
background: none;
margin-left: 44px;
}
TD.cms_header_bottom_menu div.cms_menu_section_blocks {
width: 200px;
float: left;
border: 0px;
padding: 0px;
background: none;
}
TD.cms_header_bottom_menu p.cms_menu_separator {
margin-top: 0px;
margin-bottom: 0px;
}
.cms_menu_super_menu_bar_item {
item on the super menu drop down bar*/

z-index: 200;
/*style an
Our Website
97
float: left;
padding-left: 12px;
padding-top: 4px;
cursor: pointer;
cursor: hand;
font-weight: bold;
color: #000;
border-left: 1px solid #FFF;
border-top: 1px solid #FFF;
}
.cms_menu_super_menu_bar_item_selected {
/*style a selected item on the super menu drop down bar*/

z-index: 200;
float: left;
padding-left: 12px;
padding-top: 4px;
cursor: pointer;
cursor: hand;
background: #fff url(super_menu_bkg.gifx) no-repeat left top;
font-weight: bold;
border-top: 1px solid #EEE;
.cms_menu_super_menu_content { /* style
super menu content block */

position: absolute;
z-index: 999;
height:260px;
display: none;
padding: 18px;
background: #dedfe0 url(super_menu_bkg.gifx) no-repeat left top;
box-shadow: 5px 5px 6px #666;
-webkit-box-shadow: 5px 5px 6px #666;
-moz-box-shadow: 5px 5px 6px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666,
Our Website
offX=5, offY=5, positive=true);
}
TABLE.super_menu_video_table {
background: #787878 url("grey_background.pngx") repeat-y scroll
center top;
width: 184px;
}
Our Mobile Site

Overview
When we launched our corporate website at the Knowledge11 User Conference in May 2011, it was only the first
step in rolling out our brand via the Content Management System (CMS). For mobile users, there was a brief "Under
Construction" window that occurred while the mobile design specs were expanded.
From the beginning of the project, mobile was part of the second phase site launch plan. In retrospect, this may or
may have not been the best route. Some design theories state that a single site should render properly in all devices.
That makes sense in theory, but in practice it was not happening in our project. Judging by our needs and resources,
there were some clear benefits to creating a separate mobile site within the CMS.
While going through the process of taking the main site live, we discovered areas that could be improved. A new
mobile site would include those improvements and be a step in the right direction. The basic concept for the mobile
site was to reuse all of the existing content and blocks wherever possible so development and maintenance time were
minimized. With the site containing 130 pages and countless knowledge articles, it became clear that the mobile site
project would be an exercise in simplifying the experience for a smaller screen resolution.
The same team that created the corporate website [1] spent approximately one month working on the mobile site:
Two people divided up tasks, with one managing the content, copy, and menus, while the other executed the
specifications within the CMS.
Two weeks were spent on design and navigational prototypes. We conducted research by surveying Internet
mobile clients and finding good ideas to use.
Two weeks were spent on execution (building out all the layouts, menus, and mobile CSS) and testing across a
wide range of mobile devices.
Simplifying for Mobile

With code reuse in mind, the whole purpose of the mobile project was to apply a minimalist approach to the existing
design. Because many existing mobile menus are list based, we began looking at list content blocks and navigation
menus.
One main menu was used with the headings Solutions, Customer Success, News and Events, Documentation,
Locations.
Three supporting menus were created for the sections that did not leverage dynamic list blocks.
List blocks were used on the Customer Success and the News and Events pages, using the same blocks as the
regular site (unless it was necessary to use a different list definition for formatting).
98
Our Mobile Site
99
Mobile CMS Site Redirect

Mobile redirects are done through a built-in function based on the URL suffix field. The function looks for another
site with "_mobile" added to the existing URL suffix. If there is a site that meets this rule, then the mobile client
redirects to the new site. If there is none, no redirect takes place and the site is rendered in full. For example, if your
site is test_portal, leverage the mobile site redirect by using the URL suffix test_portal_mobile.
Meta for Mobile

One of the nice parts about being able to add and configure meta tags on a page level is that there are new and
established ways to target devices in the meta tags. There are a number of options here, the only one we used was
viewport.
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">
In addition to solving our biggest concern (width of the content), the viewport tag has more options to try:
width - The width of the viewport in pixels. If width is not set, it defaults to a desktop size (980px on mobile
Safari).
height - The height of the viewport in pixels.
initial-scale (0 to 10.0) - A multiplier that sets the scale of the page after its initial display. Safe bet: if you need
to set it, set it to 1.0. Larger values indicate that the view is zoomed in; smaller values indicate that the view is
zoomed out.
minimum-scale (0 to 10.0) - The minimum multiplier the user can zoom out to. Defaults to 0.25 on mobile
Safari.
maximum-scale (0 to 10.0) - The minimum multiplier the user can zoom in to. Defaults to 1.6 on mobile Safari.
user-scalable (yes/no) - Inidicator of whether users are permitted to scale (zoom) in/out. Defaults to yes for
mobile Safari.
Mobile Layout
For the mobile site, most of the layout work had already been done and coded in the main site. The majority of the
work needed was layout-based and CSS-based. You can see how simplistic the mobile approach is by looking at the
code for the layout. The only reason for using three separate rows within this single column layout was to change the
look of the menus, if needed, depending on what row the menus were in using CSS.
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<table id="${jvar_name}" class="cms_layout_table_mobile" border="0" cellspacing="0" cellpadding="0">

<tr>
<td id="dropzone0" dropzone="true" class="cms_layout_header_mobile" />
</tr>
<tr>
<td id="dropzone10" dropzone="true" class="cms_layout_content_mobile" />
</tr>
<tr>
<td id="dropzone100" dropzone="true" class="cms_layout_footer_mobile" />
</tr>
</table>
</j:jelly>
Our Mobile Site

Typically, dropzone0 is used for the header, dropzone10 is used for the content area, and dropzone100 is used for the
footer. You can use any number you like, but most of the base system layouts work this way. Using this common
pattern, already in place within the ESS Portal and the corporate website, makes swapping layouts easy.
CSS Handling
When you browse your site on a mobile device, you will notice that the only CSS being referenced is a file named
mobile_theme.css, even if you have a theme defined at the site level. The workaround is to load the CSS in a
dynamic content block, call it from a macro, or if you want it cached, call it as a UI script within the system the same
way you call large JavaScript libraries. One method that works is to use a theme while you are building the site, test
with browsers and a tablet if necessary, and then call the CSS when you begin device testing.
Mobile Reference Template

In the image, items 1 - 4 represent the base template used in the mobile site. If you look at the mobile layout as
reference, you can see that the dropzones and class names logically tie to the defined content. One of the main
reasons the layout was created with different dropzones and class names was so that menus and lists could be reused
and made to look different depending on their zone. This is described in some detail in the super menu section of the
website tutorial.
dropzone0 - contains CSS reference (and all CSS if need be), a header block, and a dynamic block for social
media.
dropzone10 - contains the main content.
dropzone100 - contains the menu, any supplementary lists, and the footer copyright information.
100
Our Mobile Site
1. Header, Menu, and CSS styles

In contrast to the main site, the header handles the CSS call for the mobile site. A header block and two dynamic
blocks are contained within this dropzone. The topmost dynamic block houses the CSS, the next block is a header
block (search and menus disabled for now), followed by a dynamic block used for social network links and the
"Request More Info" form.
2. Main Content Area

The content area for mobile was designed to be similar to the content area in the main site. CSS was used to tighten
the spacing to fit the layout. CSS also modifies the look and feel of the content itself as part of dynamic blocks and
knowledge articles.
New list types (or list definitions) were created just to ensure that the look and feel of the main site was not affected.
The lists are almost the same between sites and use the same filtering, but they call different list types.
The lists, as well as the details of the items themselves, are part of dropzone10. Dynamic list blocks tied to the
knowledge base are used in the Customer Success and News and Events sections, while all of the content used in the
Solutions section leveraged dynamic content blocks.
Unique content types were not needed for this site, but they could be used here instead of or in combination with
new list definitions. The developer creating the site makes the choice.
The most important point is that content types define the look and feel of lists (summary template), as well as
details (detail template) for data from any table within the system. List types (or list definitions) allow you to
override the site defaults set for lists in the content type.
3. Navigation Menu
Because of the limited real estate in mobile resolutions, a few extra menus were created to increase mobile usability.
The menus needed to present the actions available to the user as defined by the owners of the site.
Solutions - goes to another menu that provides an overview of the basic application set.
Customer Success - goes to a dynamic list of knowledge articles defined in the system.
News and Events - goes to another menu that specifies the different areas within News and Events. Each one of
these links in turn links to a corresponding page that has a dynamic list populated by the knowledge base.
Documentation - goes to another menu that links to the main sections of the ServiceNow Wiki. We decided to
open these links in new pages so that viewers could maintain their path in the site.
Locations - opens a page with a single static block that lists all of the contact information for ServiceNow global
offices.
The menus are all placed within dropzone100, because dropzone100 resides below the content on all sections of the
site. If future design decisions affect the content, the menus will not be affected.
4. Powered by Bar, Highlighted Events, and Supplementary Footer

Footers often contain important site information and links. On our mobile site, the footer is visually divided from the
menus and the content so that it is not a distraction to the main menu.
Powered by Bar - Even though we authored and launched our site within the CMS in June 2011, people are still
surprised to learn that we are using our CMS system for the site. The "Powered by ServiceNow" logo placement
helps deliver the message.
Highlighted Events - If you go to the News and Events section of our site in a non-mobile client, you will see a
highlighted events list at the top of the page. The same list is used at the bottom of the mobile site.
Supplementary Footer - At the bottom of every mobile page, there is a copyright notice, links to the privacy
policy (defined as a knowledge article), and redundant social network links.
101
Our Mobile Site
References
[1] http:/ / www. service-now. com
Content Management Knowledge10 Lab

Overview
The best way to learn about the content management system is to build a site. First, complete the steps in Content
Management Step-By-Step Overview, then build a master template site and add content pages.
This example demonstrates how to build a basic knowledge site with all the necessary components. The steps in this
tutorial can be used as reference material for creating any kind of site. This method was taken from the Content
Management Lab presented at the Knowledge 2010 Conference. The goal of this example is create a basic
knowledge management interface that uses the terminology of content management and shows the importance of
master templates.
Why Create a Master Template

After obtaining style guides for your organization, create the initial site pages. These first pages establish the
standard by which all other pages in the site are measured. The first pages you create can also be used as master
templates or blueprints for other pages in the site. All of the site components above the description field serve as the
master templates for the site:
Here are a few reasons why master templates are so useful when creating CMS sites:
Rapid, no-risk page copying. Creating new pages from the master template saves you the work of creating the
same elements over and over again.
Working restore point for pages within the system. Always have a working template available if something
goes wrong in one of the blocks or in the theme CSS. It may be easier to start over using the template, instead of
troubleshooting complex changes.
Functional reference for any and all editors within the site project. Referring back to the master template
ensures that pages continue to conform to the style guide.
The base system sites and their associated files serve as good master templates.
For administrators new to the CMS, the base system sites provide pristine working restore points and reference.
It is easy to copy the base system pages and restyle them to match your requirements.
102
Building Master Templates - Step by Step

There are numerous shared components in a page. It is important to understand how the components work together
to create each CMS page in the system. Follow the steps below to create a single master page and generate all
important components within the site.
1. Build a Layout. Regardless of the interface, sites can be distilled into a few simple layouts.
2. Build a Theme. The theme defines the structure of the layouts in CSS as well as the base styles, such as fonts
and colors.
3. Build the Common Blocks. Pages are composed of content blocks. Most content blocks are reused on multiple
pages. For the master template, build basic blocks such as a header, side navigation, and some basic content for
the main content area of the page. More detailed content can be added later, but content that will be reused on
many of the pages in the site should be defined here.
4. Build a Site Entry Page. Design the first page that users see when entering the site.
5. Build a Detail Page. Design the detail pages to determine how pages such as knowledge articles, catalog items,
and search results will be displayed.
6. Assign the Pages Created to the New Site. Create the site and apply the layout and theme to the site defaults.
Then, navigate to the All Pages list and specify the master template site in the Site column for all of the master
template pages.
Below are examples of steps for building a knowledge management site.
Building a Layout
Within the ServiceNow platform, a layout defines where you can place elements on a page and the width of space
they can occupy. Layouts are used within the content management system and for homepages. For the knowledge
management site, the first step is to build the layout that arranges the content.
This example shows a common layout used in site design that employs a header with a narrow left column for
navigation and a wide center column for content. The layout is built with a basic HTML table that is within a div
container. The class definitions abstract any rendering details in order to leverage CSS rules within a theme. In this
example, the container div centers the interface, and the left and right content areas adhere to specific
measurements. Remember to look up the dimensions of the corporate layout in the corporate design style guides.
For more information on layouts, see Defining a Layout.
<div align="center" class="layout_container">
<table border="0" cellspacing="0" cellpadding="0" id="${jvar_name}" width="1000px" height="100%">

<tr>
<td colspan="2" id="dropzone0" dropzone="true" class="content_header"/>
</tr>
<tr>
<td id="dropzone1" dropzone="true" class="content_left" />
<td id="dropzone2" dropzone="true" class="content_right"/>
</tr>
</table>
</div>
103
Building a Theme
Themes are a collection of CSS files. The Lab theme, used in the example, consists of a base style sheet and a
separate style sheet specific to the tab interface on the entry page. The information is in two different style sheets
mostly for organizational purposes, but also to allow for sharing styles between themes without code duplication.
Because the tab interface is common to another theme, all of the rules associated with the widget are contained
within a single style sheet.
Lab - Base Styles is the style sheet that defines the classes referenced in the layout. This is important because the
layout classes are portions of the theme that are defined in order to set column dimensions and gutter widths.
DIV.layout_container{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
td.content_left{
width: 192px;
border-right: 12px solid #FFF; /***creates the separation gutter
between the left and right columns***/
white-space: normal;
vertical-align: top;
}
td.content_right{
border-right: 12px solid #FFF;
width: 808px;
vertical-align: top;
}
104
Building the Common Blocks

In this example, only four pages are created and only a few blocks are needed, such as a header, side navigation, and
some basic content for the main content area of the page. More detailed content can be added later, but content that
will be reused on many of the pages within the site should be defined for the master template.
Pages remain blank until the blocks are added. To guide this page building exercise, each block is named with the
prospective dropzone. This is done here to illustrate the relationship between the block and the layout. These blocks
will be used to design the first page that users see when entering the site.
For more information, see Using Content Blocks.
1. Lab 0 Header (dropzone0). Uses a graphic as a decorative header.

2. Lab 1 Navigation Links (dropzone1). Displays a list generated by querying the Page [content_page] table by
site.
3. Lab 2 Content Body Heading (dropzone2). Shows a simple way to pass the page title to render on the page
dynamically.
4. Lab 2 Homepage Search and Welcome (dropzone2). Illustrates how you can use a dynamic block to call an
existing system macro.
5. Lab 2 Tab Menu for Knowledge (dropzone2). Lists knowledge articles by relevance and attributes available to
articles.
6. Lab 2 Specific Article Group (Most Helpful) (dropzone2). Knowledge articles grouped by relevance and article
attributes.
7. Lab 2 Specific Article Group (Most Read) (dropzone2). Knowledge articles grouped by relevance and article
attributes.
8. Lab 2 Specific Article Group (Newest) (dropzone2). Knowledge articles grouped by relevance and article
attributes.
105
Lab 0 Header
This block can be either a static or dynamic content block because it will simply hold a single image. This example
uses a dynamic content block.
To create the header
1.
2.
3.
4.
5.
6.
Navigate to Content Management > Images.

Click New.
Enter a Name for the image.
Select Click to Add and upload the header image.
Navigate to Content Management > Dynamic and click New.
Add this reference to the header image between the Jelly tags:
<img src="lab_0_header.pngx" />
Lab 1 Navigation Links
Some navigation within CMS sites revolves around generating lists of links. This example creates a basic site map of
the existing pages within the site, by calling the Page [content_page] table. To figure out the basic arrangement, look
at the choices in the Order and Order Direction fields.
For more advanced control over list rendering, use the Type and Frame fields. These settings can be used alone or
together for control over lists in the system.
Lab 2 Content Body Heading
Other discussions on content management stress the importance of organizing the site URL suffix and page Name
fields to establish and maintain a meaningful URL in the browser address bar. This example takes this one step
further and leverages the Name field within a page record as the title of the page.
106
Lab 2 Homepage Search and Welcome

This block is primarily text, with a system search rendered horizontally across the block. The block references a UI
macro. For more information on calling macros, see UI_Macros.
Here is the macro call:
<g:text_search_widget size="130"/>
Here is the full code of the dynamic block. Please note the macro call at the bottom:
<p>The ServiceNow content management system is designed to provide a
branded, business-to-consumer interface between your IT department and
your user community. Rich in functionality and entirely browser-based,
the content management system offers:
<br />
</p>
<ul>
<li>A familiar, business-to-consumer interface</li>
<li>Full integration with your existing ServiceNow IT management
suite</li>
<li>Robust style and customization options to allow easy corporate
branding</li>
<li>Standard, web-based building blocks designed for use by non
programmers</li>
</ul>
<p />
<br/>
<form name="content_search" id="content_search" action="content_search.do" method="post" style="padding-left:5px; padding-bottom:10px;">
<input type="HIDDEN" value="${current_page.getSiteID()}" name="sysparm_current_site"/>
<span class="globalSearch contextSearch" >
<g:text_search_widget size="130"/>
</span>
</form>
<br/>
Lab 2 Tab Menu for Knowledge

This tab interface is and easy way to have three separate lists occupy the UI space of a single list. In the interface
shown in the graphic above, note that four blocks are used.
Lab 2 Tab Menu for Knowledge. Controls the look and feel of the tabs, as well as which of the blocks are
visible.
Lab 2 Most Helpful. Displays a list of the highest rated articles in the knowledge base.
Lab 2 Most Read. Displays a list of the articles with the highest view count.
Lab 2 Newest. Displays the most recently published articles.
Following is the code that powers the tab interface. The code floats a few div containers to create the tabs and
gives them onClick actions that set the visibility of the blocks stacked below the menu.
<script language="JavaScript">
107

function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
function setButtons(id){
document.getElementById("most_helpful").className="tabs_top_search";
document.getElementById("most_read").className="tabs_top_search";
document.getElementById("newest").className="tabs_top_search";
document.getElementById(id).className="tabs_top_search_active";
</script>
<div style="background-color=#FFF;">
<div class="tabs_top_search_active" id="most_helpful" onclick="setButtons(this.id);setVisibility('helpful_kb', 'inline');setVisibility('most_read_kb', 'none');setVisibility('bookmarked_kb', 'none');setVisibility('newest_kb', 'none');">Most helpful</div>
<div class="tabs_top_search" id="most_read" onclick="setButtons(this.id);setVisibility('helpful_kb', 'none');setVisibility('most_read_kb', 'inline');setVisibility('bookmarked_kb', 'none');setVisibility('newest_kb', 'none');">Most read</div>
<div class="tabs_top_search" id="newest" onclick="setButtons(this.id);setVisibility('helpful_kb', 'none');setVisibility('most_read_kb', 'none');setVisibility('bookmarked_kb', 'none');setVisibility('newest_kb', 'inline');">Newest</div>
<div style="clear:both;"></div>
</div>
The defined CSS rules are referenced by this code. The CSS visibility attribute is set by default to
display:none; while the JavaScript toggles the value from "none" to "inline".
div#helpful_kb, div#most_read_kb, div#bookmarked_kb, div#newest_kb,
div#solutions_kb{
display: none;
}
Notice that both the Type and Frame fields are defined in this list record. This is important because both of these
fields call macros used to wrap markup around the list itself. This demonstrates how to use the Type and Frame
fields for more control over the list.
Following is the code behind the selected list Type.

Macro Name: Lab 2 Tabs Interface Definition - Decorative background for the most helpful, most read, and
newest knowledge articles.
The styles were left inline to illustrate the use of this particular macro as a decorative container.
108

<div class="content_list_title">${jvar_title}</div>
<div id='get_help' style="display:block; padding:4px 10px;
background-color: #f6f6f6; border-left: 1px dotted #CCCCCC;
border-right: 12px solid white;">
<ul>
<g:for_each_record file="${current}"
max="${jvar_max_entries}">
<li style="padding:4px;">
<g:content_summarizer
content="${current}"/>
</li>
</ul>
</div>
Following is the code behind the Frame field.
Macro Name: KB Most Helpful - Wraps a container around the list (represented in the code with the ${body}
variable) to control the visibility.
<div id="helpful_kb">
${body}
</div>
Building a Site Entry Page

Creating a site entry page involves adding the blocks previously created onto a page. Use the graphic at the
beginning of the Building the Common Blocks section as a reference. Once the graphic is recreated as a page, the
first master page template is complete. Congratulations!
The next step is to create a detail page template by duplicating the master page template and replacing one block
with a detail block.
Building a Detail Page

Creating a detail page as one of the master templates is important because it allows you to:
Become familiar with how detail pages work and how to render any ServiceNow form within the CMS.
Construct the detail page early enough in the design phase so you can adjust the site layout and CSS to
accommodate custom forms. For example, if the knowledge base articles displayed by the CMS use screenshots
that are greater than 1024px wide, either the layout or the screenshots need to be adjusted.
To create a detail page, make a copy of the site entry page and add a content block called current document to the
page.
109
Assigning the Pages to a Site

Now that there are two pages for the master template, create a site.
To assign the pages to a new site:
1. Navigate to Content Management > Sites.
2. Click New.
3. Enter a Name for the site.
4. Enter the URL suffix.
5. In the Home page field, select the site entry page so it is presented first when a user opens the site.
6. Right-click the form header bar and Save the site.
7. In the Pages related list, click Edit.
8. Select the site entry page and the detail page created above.
9. Click Save.
10. Update the site.
The pages are now associated with the site and the master template is complete.
110
Article Sources and Contributors
Article Sources and Contributors

Content Management Overview Source: http://wiki.servicenow.com/index.php?oldid=240096 Contributors: Fuji.publishing.user, Phillip.salzman
Content Management Administration Source: http://wiki.servicenow.com/index.php?oldid=246814 Contributors: CapaJC, Cheryl.dolan, David.Bailey, Fuji.publishing.user,
Joseph.messerschmidt, Maneesha.Nanda, Peter.smith, Rachel.sienko, Suzanne.smith, Tyler.jones
Content Management Step-by-Step Overview Source: http://wiki.servicenow.com/index.php?oldid=244783 Contributors: Cheryl.dolan, Fuji.publishing.user, Peter.smith, Phillip.salzman,
Suzanne.smith
Content Management Planning Source: http://wiki.servicenow.com/index.php?oldid=136639 Contributors: Cheryl.dolan, Emily.partridge, Suzanne.smith
Creating Sites Source: http://wiki.servicenow.com/index.php?oldid=246339 Contributors: Cheryl.dolan, David.Bailey, Davida.hughes, G.yedwab, Guy.yedwab, Joseph.messerschmidt,
Maneesha.Nanda, Mark.odonnell, Peter.smith, Rachel.sienko, Suzanne.smith, Tyler.jones, Wallymarx
Content Management Security Source: http://wiki.servicenow.com/index.php?oldid=233308 Contributors: Cheryl.dolan, Joseph.messerschmidt, Michael.randall, Rachel.sienko,
Suzanne.smith, Tyler.jones, Vaughn.romero
Creating Pages Source: http://wiki.servicenow.com/index.php?oldid=240142 Contributors: Cheryl.dolan, David.Bailey, Davida.hughes, Emily.partridge, Fuji.publishing.user, G.yedwab,
Guy.yedwab, Jacob.Kimball, Joseph.messerschmidt, Liz.malone, Phillip.salzman, Rachel.sienko, Suzanne.smith, Tyler.jones
Content Management Templates Source: http://wiki.servicenow.com/index.php?oldid=123519 Contributors: Cheryl.dolan, Suzanne.smith
Using Content Blocks Source: http://wiki.servicenow.com/index.php?oldid=236865 Contributors: Cheryl.dolan, David.Bailey, Davida.hughes, Emily.partridge, G.yedwab, Guy.yedwab,
Joseph.messerschmidt, Mark.odonnell, Rachel.sienko, Suzanne.smith, Vaughn.romero
Configuring Content Types Source: http://wiki.servicenow.com/index.php?oldid=104140 Contributors: Cheryl.dolan, Emily.partridge, Fuji.publishing.user, Guy.yedwab,
Joseph.messerschmidt, Suzanne.smith
Content Management Themes and CSS Source: http://wiki.servicenow.com/index.php?oldid=123523 Contributors: Cheryl.dolan, Davida.hughes, G.yedwab, Joseph.messerschmidt,
Suzanne.smith
Creating List Blocks Source: http://wiki.servicenow.com/index.php?oldid=240158 Contributors: Cheryl.dolan, Davida.hughes, Fuji.publishing.user, G.yedwab, Guy.yedwab,
Joseph.messerschmidt, Neola, Rachel.sienko, Suzanne.smith
Content Management Meta Tags Source: http://wiki.servicenow.com/index.php?oldid=238598 Contributors: Cheryl.dolan, Davida.hughes, Emily.partridge, Guy.yedwab, Pat.Casey,
Phillip.salzman, Publishing.user, Suzanne.smith, Wallymarx
Using Global Search Source: http://wiki.servicenow.com/index.php?oldid=123526 Contributors: Cheryl.dolan, Guy.yedwab, Joseph.messerschmidt, Rachel.sienko, Suzanne.smith,
Sydney.nickell
Content Management and Jelly Source: http://wiki.servicenow.com/index.php?oldid=245019 Contributors: Anat.kerry, Cheryl.dolan, Julie.phaviseth, Suzanne.smith
Content Management Navigation Source: http://wiki.servicenow.com/index.php?oldid=123529 Contributors: Cheryl.dolan, Suzanne.smith
Navigation Menus Source: http://wiki.servicenow.com/index.php?oldid=130191 Contributors: Cheryl.dolan, Davida.hughes, Emily.partridge, G.yedwab, Guy.yedwab, Joseph.messerschmidt,
Suzanne.smith
Content Management Testing Source: http://wiki.servicenow.com/index.php?oldid=123531 Contributors: Cheryl.dolan, Suzanne.smith
Content Management Application Reference Source: http://wiki.servicenow.com/index.php?oldid=123499 Contributors: Cheryl.dolan, Joseph.messerschmidt, Suzanne.smith
Content Management Best Practices Source: http://wiki.servicenow.com/index.php?oldid=169060 Contributors: Cheryl.dolan, Joseph.messerschmidt, Mark.odonnell, Suzanne.smith,
Vaughn.romero
Content Management Integration Points Source: http://wiki.servicenow.com/index.php?oldid=240094 Contributors: Cheryl.dolan, Emily.partridge, Fuji.publishing.user, Mark.odonnell,
Suzanne.smith
Our ESS Portal Source: http://wiki.servicenow.com/index.php?oldid=92690 Contributors: Cheryl.dolan, David.Bailey, Davida.hughes, G.yedwab, Guy.yedwab, Joe.Westrich, Joey.mart,
Joseph.messerschmidt, Mark.odonnell, Rachel.sienko, Suzanne.smith, Tyler.jones
Our Website Source: http://wiki.servicenow.com/index.php?oldid=92686 Contributors: Cheryl.dolan, David.Bailey, Guy.yedwab, Joe.Westrich, Joseph.messerschmidt, Mark.odonnell,
Rachel.sienko, Suzanne.smith, Tyler.jones
Our Mobile Site Source: http://wiki.servicenow.com/index.php?oldid=92688 Contributors: Cheryl.dolan, Mark.odonnell, Mark.stanger, Suzanne.smith, Tyler.jones
Content Management Knowledge10 Lab Source: http://wiki.servicenow.com/index.php?oldid=123548 Contributors: Cheryl.dolan, Joe.Westrich, Joseph.messerschmidt, Mark.odonnell,
Suzanne.smith
111
Image Sources, Licenses and Contributors
Image Sources, Licenses and Contributors

Image:ess_overview.png Source: http://wiki.servicenow.com/index.php?title=File:Ess_overview.png License: unknown Contributors: Fuji.publishing.user, Mark.odonnell
Image:cern.png Source: http://wiki.servicenow.com/index.php?title=File:Cern.png License: unknown Contributors: Mark.odonnell
Image:Cms menu.png Source: http://wiki.servicenow.com/index.php?title=File:Cms_menu.png License: unknown Contributors: Mark.odonnell, Suzanne.smith
Image:content_configuration.png Source: http://wiki.servicenow.com/index.php?title=File:Content_configuration.png License: unknown Contributors: Mark.odonnell, Suzanne.smith
Image:Warning.gif Source: http://wiki.servicenow.com/index.php?title=File:Warning.gif License: unknown Contributors: CapaJC
Image:Design guide.png Source: http://wiki.servicenow.com/index.php?title=File:Design_guide.png License: unknown Contributors: Mark.odonnell
Image:simple_catalog_display_yes.png Source: http://wiki.servicenow.com/index.php?title=File:Simple_catalog_display_yes.png License: unknown Contributors: Suzanne.smith
Image:simple_catalog_display_no.png Source: http://wiki.servicenow.com/index.php?title=File:Simple_catalog_display_no.png License: unknown Contributors: Suzanne.smith
Image:site.png Source: http://wiki.servicenow.com/index.php?title=File:Site.png License: unknown Contributors: Mark.odonnell, Suzanne.smith
Image:CopySite.png Source: http://wiki.servicenow.com/index.php?title=File:CopySite.png License: unknown Contributors: Guy.yedwab
Image:CMS_page_form.png Source: http://wiki.servicenow.com/index.php?title=File:CMS_page_form.png License: unknown Contributors: Fuji.publishing.user
Image:Content.jpg Source: http://wiki.servicenow.com/index.php?title=File:Content.jpg License: unknown Contributors: G.yedwab, Suzanne.smith
File:CMS_Key_Pages.png Source: http://wiki.servicenow.com/index.php?title=File:CMS_Key_Pages.png License: unknown Contributors: Suzanne.smith
Image:CMS_Edit_Icon.png Source: http://wiki.servicenow.com/index.php?title=File:CMS_Edit_Icon.png License: unknown Contributors: Suzanne.smith
Image:LiveiFrame.png Source: http://wiki.servicenow.com/index.php?title=File:LiveiFrame.png License: unknown Contributors: Fuji.publishing.user, Rachel.sienko
Image:Select document.png Source: http://wiki.servicenow.com/index.php?title=File:Select_document.png License: unknown Contributors: Guy.yedwab
Image:content_type_list.png Source: http://wiki.servicenow.com/index.php?title=File:Content_type_list.png License: unknown Contributors: Mark.odonnell, Suzanne.smith
Image:Style Sheet form.png Source: http://wiki.servicenow.com/index.php?title=File:Style_Sheet_form.png License: unknown Contributors: Guy.yedwab
Image:Theme form.png Source: http://wiki.servicenow.com/index.php?title=File:Theme_form.png License: unknown Contributors: Guy.yedwab
Image:ESS_globalsearch.png Source: http://wiki.servicenow.com/index.php?title=File:ESS_globalsearch.png License: unknown Contributors: Guy.yedwab
Image:ESS_noglobalsearch.png Source: http://wiki.servicenow.com/index.php?title=File:ESS_noglobalsearch.png License: unknown Contributors: Guy.yedwab
Image:CMS-menu.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu.png License: unknown Contributors: G.yedwab, Guy.yedwab
Image:CMS-menu-dropdown.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu-dropdown.png License: unknown Contributors: G.yedwab
Image:CMS-menu-headertabs.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu-headertabs.png License: unknown Contributors: G.yedwab
Image:CMS-menu-horizontalblocks.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu-horizontalblocks.png License: unknown Contributors: G.yedwab
Image:CMS-menu-horizontaltabs.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu-horizontaltabs.png License: unknown Contributors: G.yedwab
Image:CMS-menu-verticallist.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu-verticallist.png License: unknown Contributors: G.yedwab
Image:CMS-menu-verticalblocks.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu-verticalblocks.png License: unknown Contributors: G.yedwab
Image:CMS-menu-super.png Source: http://wiki.servicenow.com/index.php?title=File:CMS-menu-super.png License: unknown Contributors: Guy.yedwab
Image:blocks.png Source: http://wiki.servicenow.com/index.php?title=File:Blocks.png License: unknown Contributors: Mark.odonnell
Image:frame_view.png Source: http://wiki.servicenow.com/index.php?title=File:Frame_view.png License: unknown Contributors: Mark.odonnell
Image:cms_integration_points.png Source: http://wiki.servicenow.com/index.php?title=File:Cms_integration_points.png License: unknown Contributors: Mark.odonnell
Image:menu_item.png Source: http://wiki.servicenow.com/index.php?title=File:Menu_item.png License: unknown Contributors: Mark.odonnell
Image:content_link.png Source: http://wiki.servicenow.com/index.php?title=File:Content_link.png License: unknown Contributors: Mark.odonnell
Image:integration_points_small.png Source: http://wiki.servicenow.com/index.php?title=File:Integration_points_small.png License: unknown Contributors: Mark.odonnell
Image:ess_numbers.png Source: http://wiki.servicenow.com/index.php?title=File:Ess_numbers.png License: unknown Contributors: Mark.odonnell
Image:super.png Source: http://wiki.servicenow.com/index.php?title=File:Super.png License: unknown Contributors: Mark.odonnell
Image:site_record.png Source: http://wiki.servicenow.com/index.php?title=File:Site_record.png License: unknown Contributors: Mark.odonnell
Image:page_templates.png Source: http://wiki.servicenow.com/index.php?title=File:Page_templates.png License: unknown Contributors: Mark.odonnell
Image:Cm-ess3.png Source: http://wiki.servicenow.com/index.php?title=File:Cm-ess3.png License: unknown Contributors: G.yedwab, Mark.odonnell
Image:admin_page_Berlin.png Source: http://wiki.servicenow.com/index.php?title=File:Admin_page_Berlin.png License: unknown Contributors: Suzanne.smith
Image:site_page.png Source: http://wiki.servicenow.com/index.php?title=File:Site_page.png License: unknown Contributors: Mark.odonnell
Image:page_bottom.png Source: http://wiki.servicenow.com/index.php?title=File:Page_bottom.png License: unknown Contributors: Mark.odonnell
Image:Super menu.png Source: http://wiki.servicenow.com/index.php?title=File:Super_menu.png License: unknown Contributors: Mark.odonnell
Image:filters.png Source: http://wiki.servicenow.com/index.php?title=File:Filters.png License: unknown Contributors: Mark.odonnell
Image:Super menu_active.png Source: http://wiki.servicenow.com/index.php?title=File:Super_menu_active.png License: unknown Contributors: Mark.odonnell
Image:solutions_menu.png Source: http://wiki.servicenow.com/index.php?title=File:Solutions_menu.png License: unknown Contributors: Mark.odonnell
Image:site_mobile.png Source: http://wiki.servicenow.com/index.php?title=File:Site_mobile.png License: unknown Contributors: Mark.odonnell
Image:CMS_K10_master_templates.png Source: http://wiki.servicenow.com/index.php?title=File:CMS_K10_master_templates.png License: unknown Contributors: Suzanne.smith
Image:theme.png Source: http://wiki.servicenow.com/index.php?title=File:Theme.png License: unknown Contributors: Mark.odonnell
Image:page_edit.png Source: http://wiki.servicenow.com/index.php?title=File:Page_edit.png License: unknown Contributors: Mark.odonnell
Image:list_site.png Source: http://wiki.servicenow.com/index.php?title=File:List_site.png License: unknown Contributors: Mark.odonnell
Image:page_name.png Source: http://wiki.servicenow.com/index.php?title=File:Page_name.png License: unknown Contributors: Mark.odonnell
Image:most_helpful.png Source: http://wiki.servicenow.com/index.php?title=File:Most_helpful.png License: unknown Contributors: Mark.odonnell
112

Content Management PDF

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Content Management PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Content Management PDF

Uploaded by

Copyright:

Available Formats

Content Management

Creating a Front-End for ServiceNow

Introduction to Content Management

Design a company-wide service catalog that offers a collection of services.

Activating the Content Management System

Content Management Overview

The ESS Portal

Icon-based menu interface.

At the ServiceNow Knowledge11 user

Content Management Overview

Content Management Administration

Content Management Administration

Content Management Application Framework

Content Management Administration

Lists all images. Use images to add visual interest to pages.

Content Management Administration

Setting Application Configuration Defaults and Site Configuration

Content Configuration Page

Page Detail Settings

Content Management Step-by-Step Overview

Content Management Step-by-Step Overview

Content Management Planning

CMS Prerequisite Checklist

Content Management Planning

Gather People Resources

Basic ServiceNow administration skills

Organize and Design When the Data is Ready

Content Management Planning

Content Management Planning

Leverage Corporate Style Design Guidelines

Content Management Planning

Create Prototypes and Leverage Rapid Web Design

Creating a New Site

A unique name for the site.

A full description of the site.

As an example, following is the site record for the ESS Portal:

Adding Meta Tags to a Site

1. Navigate to Content Management > Sites > [Site Name].

Content Management Security

Content Management Security

How Do CMS URLs Work?

Content Management URLs

Content Management Security

Setting the Doctype

CMS Sites and Single Sign-On (SSO)

Generating Email Links To Tickets and Applications Through the CMS

The CMS now supports email links with following format:

Content Management Security

Creating a Content Page

Navigate to Content Management > Sites.

A default CMS administration page

A document ID of a record to display by default.

Select a status for the page, such as Published or Retired.

Enter a title for the page.

Enter a description of the page.

Adding Content to the Page

Under Related Links on the Page form, click Edit Page.

1. Navigate to Content Management