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.

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.

To access the Service Portal Designer, navigate to Service Portal > Service Portal Configuration, and then click Designer.

Procedure

  1. 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
  2. From the Service Portal Designer, select a page to customize or click Add a new page.
  3. Under Layouts, select Container and drag it onto the page.
  4. 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.
  5. Use the filter to search for a widget, then drag the widget to the layout.
    Figure 1. Customize a page
    Drag a widget onto a page
  6. (Optional) Edit page properties.
    1. Click Edit Page Properties.
      The page record from the Pages table [sp_page] opens.
    2. Edit the form.
      Table 1. Page fields
      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 are 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 is not 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.
      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.
  7. (Optional) Edit container properties.
    1. Click within the container you would like to edit, or select Container in the breadcrumbs.
    2. Click the edit icon [].
      The container record from the Containers table [sp_container] opens.
    3. Edit the form.
      Table 2. Container fields
      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 in which the container appears.
      Screen reader title The title used by a screen reader.
      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 are not 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 does not scroll. Use this option to create a subheader.
  8. (Optional) To switch to a different page, click the Pages tab in the left pane, then select the next page you want to configure.
  9. (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