Create and edit a page using the Service Portal Designer
Create or edit a page and use layouts to organize the columns that house the widgets.
Before you begin
Role required: sp_admin or admin
About this task
These steps are intended for users with little to no coding experience. The Service Portal Designer includes several layers of customization from simply adding widgets in a particular configuration on a page, to adding CSS classes.
Procedure
Navigate to All > Service Portal > Service Portal Configuration.
Select Designer.
Switch to the portal you want to design pages for by selecting the portal name in the header.
Image omitted: DesignerSwitchPortal.png Service Portal Designer header with the portal name SP highlighted
From the Service Portal Designer, select a page to customize or select Add a new page.
Under Layouts, select Container and drag it onto the page.
Drag one of the other layouts and drop it in the container.
This layout defines the structure of your page and the space available to drop widgets. The structure of the layout aligns with the Bootstrap grid template and adds up to 12.
Use the filter to search for a widget, then drag the widget to the layout.
Image omitted: ConfigurePage.gif Gif showing how to drag containers, layouts, then widgets onto a page
For widgets that do not contain any information by default, you must configure the options for their widget instances before they will appear on a portal page. For more information about configuring widget instance options, see [Configure widget instances](c_ConfigureWidgetInstances.md).
Edit page properties.
Select Edit Page Properties.
The page record from the Pages table [sp_page] opens.
Edit the form.
Field
Description
Title
Internal name of the page. Use the title to search for a page in the Service Portal Designer.
ID
A unique ID for the page. The ID is what you use to assign a page to a portal. It also determines the URL for the page, for example `https://instance name.service-now.com/doc_portal/?id=doc_page`, where doc\_page is the page ID.
Application
The application scope.
Public
Enables the page to be accessed without the need for authentication. If Public is selected, all users can view the page no matter the roles listed.
Draft
Mark a page as draft to limit user ability to view the page while you’re still creating it. Only users with the admin role can view a page in draft, all other users see a 404 page.
Roles
Limit user access to a page by role.
Short description
Describes the portal page. This field isn’t public facing.
Page Specific CSS
Unless a page has Page Specific CSS, the page inherits CSS from the Theme and Branding. If you need a page to look different, the Page Specific CSS overrides the inheritance from the Theme and Branding.
Dynamic page title
Create variables to generate descriptive titles depending on the content loaded into a page. For more information, see Add dynamic titles to a page.
Clone Page
Enables you to make a copy of a page that can be modified. If you copy a base system page, a new widget instance is created for each widget on the page.
Script include to apply to the page. By default, the system uses the SPSEOHeaderTags script include, which includes the default implementation for the canonical URL and hreflang tags for Service Portal Analytics pages.
Human readable URL structure
Add human readable keywords to the page URL to improve search engine optimization \(SEO\) and click-through rates for public pages. Human readable URLs also help users understand what to expect on a page for public and non-public pages. For example, `https:///kb/en/faq/what-is-a-cookie?id=kb_article_view&sysparm_article=KB0000007`. For more information, see Add human readable keywords to page URLs.
Edit container properties.
Select within the container you would like to edit, or select Container in the breadcrumbs.
Select the edit icon [
Image omitted: IconEditOption.png Edit icon\].
The container record from the Containers table \[sp\_container\] opens.
3. Edit the form.
Field
Description
Name
Internal name of the container.
Order
The order in which the containers appear on a page. To set a container to appear above all other containers, give the container the lowest number in the Order field.
Page
The page that includes the container.
Screen reader title
The title used by a screen reader.
Semantic tag
The semantic HTML tag that includes the container. Options include:- None: All content on the page between the header and footer is included in the <main> tag. - Main: The <main> tag includes only the container and its contents. The <main> tag is a semantic HTML element that contains the main content of the page. It should be applied to content that is unique to the page and should be configured for only one element on the page.
Header: The <header> tag is used as introductory content. It can be used multiple times per page, including inside an <article> tag.
Nav: The <nav> tag is used in page-level navigation. It can be used multiple times in each page.
Section: The <section> tag groups related content under a common heading or theme.
Article: The <article> tag is self-contained content that can stand alone or be reused.
Details: The <details> tag can be used in expand/collapse sections, and intended for FAQs.
Summary: <summary> tag is the first child of <details> and acts as the clickable label.
Time: <time> tag is for dates, times, and durations. Add for machine-readable values.
Fig caption: <figcaption> tag is only valid as a child of <figure> and provides the caption for a figure.
Application
The application scope.
Width
Width of the container. Options include: - Fixed - Fluid
Parent class
Parent CSS class for the container.
CSS class
The CSS classes for the container. Overwrites page-specific CSS.
Background color
The background color of the container.
Background image
Background image for the container.
Background style
The display style of a background image. Options include: - Default - Cover - Contain - Repeating
Bootstrap alternative
Selecting this field removes the standard Bootstrap grid classes and disables the Bootstrap grid system in the container. If selected, the following aren’t applied: - The Width field in the container record. - Standard Bootstrap class in the row record within the container. - The Size - xs, Size - sm, Size - md, and Size - lg fields in column records within the container. Only select this field if you plan to provide custom CSS classes and CSS for the container, row, and column records.
Move to header
When selected, the container sticks to the header and doesn’t scroll. Use this option to create a subheader.
To switch to a different page, select the Pages tab in the left pane, then select the next page you want to configure.
Use the Preview button in the header to view your page as you design it.
You can also use Preview to view your page in mobile or tablet mode through the controls presented in the header.
Image omitted: DesignerIPadView.png Page preview with the iPad view mode selected.
Select a container record to serve as a page subheader. A subheader sticks to the page header and does not scroll.
Before you begin
Role required: admin
Procedure
Navigate to All > Service Portal > Service Portal Configuration.
Select Designer.
Select a page.
Switch to the portal you want to design pages for by selecting the portal name in the header.
Image omitted: DesignerSwitchPortal.png Service Portal Designer header with the portal name SP highlighted
Select the container that you would like to use as a subheader, or select the container using the breadcrumbs.
Select the edit icon (
Image omitted: IconEditOption.png Edit icon\).
Select Move to header.
Result
As a subheader, the container sticks to the header and does not scroll.
Include font icons on a page
Include font icons on a page so that all the widgets on the page have access to the font-icon set.
Before you begin
Role required: sp_admin or admin
Procedure
Navigate to All > Service Portal > Pages and click the page you want to add font icons to.
Attach the font-icon file to the page record.
In the Page Specific CSS field for the page, add the CSS for the font-icon definition.
Use the sys_id of the attachment as the src in the CSS. For example:
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Result
You can select an icon from the icon set for any widget on this page. For example, in the HTML widget you can use the Source Code option to use an icon. For example: