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

  1. Navigate to All > Service Portal > Service Portal Configuration.
  2. Select Designer.
  3. Switch to the portal you want to design pages for by selecting the portal name in the header.
    Service Portal Designer header with the portal name SP highlighted
  4. From the Service Portal Designer, select a page to customize or select Add a new page.
  5. Under Layouts, select Container and drag it onto the page.
  6. 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 always adds up to 12.
  7. Use the filter to search for a widget, then drag the widget to the layout.
    Figure 1. Drag containers, layouts, then widgets onto a page
    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.

  8. (Optional) Edit page properties.
    1. Select Edit Page Properties.
      The page record from the Pages table [sp_page] opens.
    2. Edit the form.
      Table 1. Page fields
      FieldDescription
      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 clone a base system page, a new widget instance is created for each widget on the page.
      Use SEO script

      Option to enable a script include that adds SEO tags for canonical URLs and hreflang tags.

      For more information, see Enable SEO for localized versions of a portal page.
      SEO script

      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://<instance>/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.
  9. (Optional) Edit container properties.
    1. Select within the container you would like to edit, or select Container in the breadcrumbs.
    2. Select the edit icon [].
      The container record from the Containers table [sp_container] opens.
    3. Edit the form.
      Table 2. Container fields
      FieldDescription
      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.
        Note: The <main> tag can be applied to a container, row, or column. For more information, see Configure the main tag on a page.
      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 If selected, the container sticks to the header and doesn’t scroll. Use this option to create a subheader.
  10. (Optional) To switch to a different page, select the Pages tab in the left pane, then select the next page you want to configure.
  11. (Optional) 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.
    Figure 2. Designer tablet view
    Page preview with the iPad view mode selected

Add a subheader to a page

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

  1. Navigate to All > Service Portal > Service Portal Configuration.
  2. Select Designer.
  3. Select a page.
  4. Switch to the portal you want to design pages for by selecting the portal name in the header.
    Service Portal Designer header with the portal name SP highlighted
  5. Select the container that you would like to use as a subheader, or select the container using the breadcrumbs.
  6. Select the edit icon ().
  7. 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

  1. Navigate to All > Service Portal > Pages and click the page you want to add font icons to.
  2. Attach the font-icon file to the page record.
  3. 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:

<p style="text-align: center;"><em class="material-icons">flight_land</em></p>