CMS for Dummies

Daniel Barrett
Solution Consultant
ServiceNow

Confidential
Skills
Required skills
ServiceNow administration skills
HTML
CSS
Very useful skills
Graphic Design & Web Design
Jelly Scripting

Confidential
 Why use a CMS?

- Themed interface to satisfy strict corporate branding guidelines

- Simplifying an overly complex user interface / consumerisation of IT

- Complete control over the look and feel of the system

Confidential
 2012 ServiceNow All Rights Reserved Confidential 4
 2012 ServiceNow All Rights Reserved Confidential 5
CMS Components Content Site

Content Site - a group of related content pages that will have the same basic
theme, layout, and URL suffix.

The content site represents one unified front-end for the instance. Different
audiences can be presented with different sites suited to their needs, based
on Login Rules.

Confidential
CMS Components Content Page

Content Page - 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.

Confidential
CMS Components Content Blocks

Content Block- A content page is constructed by arranging customized blocks

of content on a page. Content blocks are, therefore, the backbone of the
Content Management System (CMS).

-Existing content such as reports, gauges, and record lists are automatically
available as content blocks and more can be created within the CMS.

-Once content blocks are defined, they can be reused on any content page by
adding them to drop zones within the layout.

Confidential
CMS Components Block Types

List List of records from a Service-Now table using a query

Static HTML Any HTML code
Dynamic Coded with Jelly Login Block is an example
Flash Movie Display Flash Movies
iFrame Embeds a URL within a frame. It can be used to embed external
pages or to render ServiceNow content within the content page.
Detailed Content Displays the content of an existing document, such as a
Knowledge Base article or Incident
Header Branding and system-wide functionality
Navigation - Navigational links to different content pages or external content

Confidential
Example CMS Page Construction

Content Block - Header

Content Block Navigation Menu

Content Block - iFrame

Content Block - List

Layout - 3 Columns Large

Centre

Content Page - home.do

Confidential
ServiceNow ESS Page Construction

HEADER BLOCK
NAVIGATION BLOCK

LIST BLOCK
iFRAME BLOCK
URL:
com.glideapp.servicecatalog_cat_item_view.do?sysparm_id=3f1dd0320a0a
LIST BLOCK 0b99000a53f7604a2ef9

LIST BLOCK

Confidential
CMS Components Themes & CSS
Theme Group of CSS (Cascading Style Sheets) or link to external style
sheets

- CSS Styles define how to display HTML elements

- Enables you to change the appearance of all the pages in a Web site, just by
editing one single file!

Confidential
CMS Components ID Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1"

<p id=para1>Hello World</p>

#para1{text-align:center;color:red;}

Confidential
CMS Components CLASS Selector

The class selector is used to specify a style for a group of elements.

Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a ".
In the example below, all HTML elements with class="center" will be center-aligned:

<p class=center>Hello World</p>

.center {text-align:center;}

Confidential
CMS Components SPECIFIC CLASS

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class="center" will be center-aligned:

<p id=center>Hello World</p>

p.center {text-align:center;}

Confidential
CSS Demo

Confidential
Content Types

Content Types are required so that the CMS knows how to handle
each table / document type in the system (such as Incident or
Problem).
Content Types are defined for each table / document Type that you
will use in your CMS
They determine how list block content is rendered
They determine what happens when a list record is selected

Confidential
Page Detail Settings

Page Detail Settings or Detailed Content Blocks are used to display

document forms
They can accept URL parameters fed from the Content Type and
render the current document

Confidential
Layouts

Layouts' defines the overall structure of the page by arranging where on the page
dropzones appear.

The dropzone is where Content Blocks (which make up the content of the page)
can be added.

Most Content Blocks match the width of the dropzone, so the dropzone controls
both the location and sizing of the Content Block.

DIV layouts now supported in Berlin

Confidential
<div class="layout_container>
<div id="${jvar_name}" class="site_layout">
<div class="content_header_container" id="dropzone0" dropzone="true" />
<div class="content_body_container_2_column">
<div id="dropzone20" dropzone="true" />
<div id="dropzone10" dropzone="true" />
<div style="clear:both;" />
</div>
<div class="content_footer_container" id="dropzone100" dropzone="true" />
</div>
</div>

layout_container
site_layout
dropzone0

content_body_container_2_column
dropzone10 dropzone20

dropzone100

Confidential
 .layout_container { .site_layout{ layout_container
margin: 0px; width: 80%; site_layout
padding: 0px; min-width: 960px;
dropzone0
position: relative; margin-top: 0px;
background: #f4f4f4 margin-left: auto; content_body_container_2_column
url(header-tile- margin-right: auto; dropzone10 dropzone20
admin.pngx) repeat-x padding-bottom:
scroll; 5px; dropzone100
} }

dropzone10 dropzone20

DIV.content_body_container_2_column DIV#dropzone10{ DIV.content_body_container_2_column DIV#dropzone20{

vertical-align: top; vertical-align: top;
text-align: left; text-align: left;
width: auto; padding:0px;
margin: 0 200px 0px 0px; float: right;
background-color: #f4f4f4; width: 180px;
min-width: 860px; border-color: #fffeff;
} }

DIV.content_body_container_1_column, DIV.content_body_container_2_column{
position: relative;
padding:0px;
}

Confidential
 DROPZONE0
DROPZONE1

DROPZONE2

DROPZONE3
<div class="layout_container>
<div id="${jvar_name}" class="site_layout">
<div class="content_header_container" id="dropzone0" dropzone="true" />
<div class="content_header_container" id="dropzone1" dropzone="true" />
<div class="content_header_container" id="dropzone2" dropzone="true" />
<div class="content_footer_container" id="dropzone3" dropzone="true" />
</div>
</div>

Confidential
 DROPZONE0

DROPZONE1

DROPZONE2
DROPZONE3

<div class="layout_container>
<div id="${jvar_name}" class="site_layout">
<div class="content_header_container" id="dropzone0" dropzone="true" />
<div class="content_body> <!set the width -->
<div id="dropzone1" dropzone="true" />
<div class="content_body_2_column>
<div id="dropzone2" dropzone="true" />
<div id="dropzone3" dropzone="true" />
</div>
</div>
</div>
</div>

Confidential
Creating a new CMS page

Confidential