{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":42609,"path":"platform-user-interface/service-portal/t_ConfigureAPage.md","title":"Create and edit a page using the Service Portal Designer","bundle":null,"doc_type":null,"release":"australia","body":"\n# Create and edit a page using the Service Portal Designer\n\nCreate or edit a page and use layouts to organize the columns that house the widgets.\n\n## Before you begin\n\nRole required: sp\\_admin or admin\n\n## About this task\n\nThese 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.\n\n## Procedure\n\n1.  Navigate to **All** &gt; **Service Portal** &gt; **Service Portal Configuration**.\n\n2.  Select **Designer**.\n\n3.  Switch to the portal you want to design pages for by selecting the portal name in the header.\n\n    \\[Omitted image \"DesignerSwitchPortal.png\"\\] Alt text: Service Portal Designer header with the portal name SP highlighted\n\n4.  From the Service Portal Designer, select a page to customize or select **Add a new page**.\n\n5.  Under Layouts, select **Container** and drag it onto the page.\n\n6.  Drag one of the other layouts and drop it in the container.\n\n    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.\n\n7.  Use the filter to search for a widget, then drag the widget to the layout.\n\n    \\[Omitted image \"ConfigurePage.gif\"\\] Alt text: Gif showing how to drag containers, layouts, then widgets onto a page\n\n    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](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/c_ConfigureWidgetInstances.md).\n\n8.  Edit page properties.\n\n    1.  Select **Edit Page Properties**.\n\n        The page record from the Pages table \\[sp\\_page\\] opens.\n\n    2.  Edit the form.\n\n<table id=\"table_ygl_qdt_3z\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nTitle\n\n</td><td>\n\nInternal name of the page. Use the title to search for a page in the Service Portal Designer.\n\n</td></tr><tr><td>\n\nID\n\n</td><td>\n\nA 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.\n\n</td></tr><tr><td>\n\nApplication\n\n</td><td>\n\nThe application scope.\n\n</td></tr><tr><td>\n\nPublic\n\n</td><td>\n\nEnables 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.\n\n</td></tr><tr><td>\n\nDraft\n\n</td><td>\n\nMark 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.\n\n</td></tr><tr><td>\n\nRoles\n\n</td><td>\n\nLimit user access to a page by role.\n\n</td></tr><tr><td>\n\nShort description\n\n</td><td>\n\nDescribes the portal page. This field isn’t public facing.\n\n</td></tr><tr><td>\n\nPage Specific CSS\n\n</td><td>\n\nUnless 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.\n\n</td></tr><tr><td>\n\nDynamic page title\n\n</td><td>\n\nCreate variables to generate descriptive titles depending on the content loaded into a page.\n\n For more information, see [Add dynamic titles to a page](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/add-page-title.md).\n\n</td></tr><tr><td>\n\nClone Page\n\n</td><td>\n\nEnables 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.\n\n</td></tr><tr><td>\n\nUse SEO script\n\n</td><td>\n\nOption to enable a script include that adds SEO tags for canonical URLs and hreflang tags.\n\n For more information, see [Enable SEO for localized versions of a portal page](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/seo-header-tags.md).\n\n</td></tr><tr><td>\n\nSEO script\n\n</td><td>\n\nScript 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.\n\n</td></tr><tr><td>\n\nHuman readable URL structure\n\n</td><td>\n\nAdd 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`.\n\n For more information, see [Add human readable keywords to page URLs](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/add-human-readable-keywords-page-urls.md).\n\n</td></tr></tbody>\n</table>9.  Edit container properties.\n\n    1.  Select within the container you would like to edit, or select **Container** in the breadcrumbs.\n\n    2.  Select the edit icon \\[\\[Omitted image \"IconEditOption.png\"\\] Alt text: Edit icon\\].\n\n        The container record from the Containers table \\[sp\\_container\\] opens.\n\n    3.  Edit the form.\n\n<table id=\"table_evm_ng4_qbb\"><thead><tr><th>\n\nField\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nName\n\n</td><td>\n\nInternal name of the container.\n\n</td></tr><tr><td>\n\nOrder\n\n</td><td>\n\nThe 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.\n\n</td></tr><tr><td>\n\nPage\n\n</td><td>\n\nThe page that includes the container.\n\n</td></tr><tr><td>\n\nScreen reader title\n\n</td><td>\n\nThe title used by a screen reader.\n\n</td></tr><tr><td>\n\nSemantic tag\n\n</td><td>\n\nThe semantic HTML tag that includes the container. Options include:-   None: All content on the page between the header and footer is included in the **&lt;main&gt;** tag.\n-   Main: The **&lt;main&gt;** tag includes only the container and its contents. The **&lt;main&gt;** 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.\n\n**Note:** The **&lt;main&gt;** tag can be applied to a container, row, or column. For more information, see [Configure the main tag on a page](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/configure-main-tag-on-page.md).\n\n-   Header: The &lt;header&gt; tag is used as introductory content. It can be used multiple times per page, including inside an &lt;article&gt; tag.\n-   Nav: The &lt;nav&gt; tag is used in page-level navigation. It can be used multiple times in each page.\n-   Section: The &lt;section&gt; tag groups related content under a common heading or theme.\n-   Article: The &lt;article&gt; tag is self-contained content that can stand alone or be reused.\n-   Details: The &lt;details&gt; tag can be used in expand/collapse sections, and intended for FAQs.\n-   Summary: &lt;summary&gt; tag is the first child of &lt;details&gt; and acts as the clickable label.\n-   Time: &lt;time&gt; tag is for dates, times, and durations. Add for machine-readable values.\n-   Fig caption: &lt;figcaption&gt; tag is only valid as a child of &lt;figure&gt; and provides the caption for a figure.\n\n\n</td></tr><tr><td>\n\nApplication\n\n</td><td>\n\nThe application scope.\n\n</td></tr><tr><td>\n\nWidth\n\n</td><td>\n\nWidth of the container. Options include: -   Fixed\n-   Fluid\n\n\n</td></tr><tr><td>\n\nParent class\n\n</td><td>\n\nParent CSS class for the container.\n\n</td></tr><tr><td>\n\nCSS class\n\n</td><td>\n\nThe CSS classes for the container. Overwrites page-specific CSS.\n\n</td></tr><tr><td>\n\nBackground color\n\n</td><td>\n\nThe background color of the container.\n\n</td></tr><tr><td>\n\nBackground image\n\n</td><td>\n\nBackground image for the container.\n\n</td></tr><tr><td>\n\nBackground style\n\n</td><td>\n\nThe display style of a background image. Options include: -   Default\n-   Cover\n-   Contain\n-   Repeating\n\n\n</td></tr><tr><td>\n\nBootstrap alternative\n\n</td><td>\n\nSelecting 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.\n-   Standard Bootstrap class in the row record within the container.\n-   The **Size - xs**, **Size - sm**, **Size - md**, and **Size - lg** fields in column records within the container.\n Only select this field if you plan to provide custom CSS classes and CSS for the container, row, and column records.\n\n</td></tr><tr><td>\n\nMove to header\n\n</td><td>\n\nWhen selected, the container sticks to the header and doesn’t scroll. Use this option to create a subheader.\n\n</td></tr></tbody>\n</table>10. To switch to a different page, select the **Pages** tab in the left pane, then select the next page you want to configure.\n\n11. Use the Preview button in the header to view your page as you design it.\n\n    You can also use **Preview** to view your page in mobile or tablet mode through the controls presented in the header.\n\n    \\[Omitted image \"DesignerIPadView.png\"\\] Alt text: Page preview with the iPad view mode selected.\n\n\n**Parent Topic:**[Creating portal pages](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/platform-user-interface/service-portal/c_Pages.md)\n\n## Add a subheader to a page\n\nSelect a container record to serve as a page subheader. A subheader sticks to the page header and does not scroll.\n\n### Before you begin\n\nRole required: admin\n\n### Procedure\n\n1.  Navigate to **All** &gt; **Service Portal** &gt; **Service Portal Configuration**.\n\n2.  Select **Designer**.\n\n3.  Select a page.\n\n4.  Switch to the portal you want to design pages for by selecting the portal name in the header.\n\n    \\[Omitted image \"DesignerSwitchPortal.png\"\\] Alt text: Service Portal Designer header with the portal name SP highlighted\n\n5.  Select the container that you would like to use as a subheader, or select the container using the breadcrumbs.\n\n6.  Select the edit icon \\(\\[Omitted image \"IconEditOption.png\"\\] Alt text: Edit icon\\).\n\n7.  Select **Move to header**.\n\n\n### Result\n\nAs a subheader, the container sticks to the header and does not scroll.\n\n## Include font icons on a page\n\nInclude font icons on a page so that all the widgets on the page have access to the font-icon set.\n\n### Before you begin\n\nRole required: sp\\_admin or admin\n\n### Procedure\n\n1.  Navigate to **All** &gt; **Service Portal** &gt; **Pages** and click the page you want to add font icons to.\n\n2.  Attach the font-icon file to the page record.\n\n3.  In the Page Specific CSS field for the page, add the CSS for the font-icon definition.\n\n    Use the sys\\_id of the attachment as the src in the CSS. For example:\n\n    ```\n    /* fallback */\n    @font-face {\n      font-family: 'Material Icons';\n      font-style: normal;\n      font-weight: 400;\n      src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');\n    }\n    \n    .material-icons {\n      font-family: 'Material Icons';\n      font-weight: normal;\n      font-style: normal;\n      font-size: 24px;  /* Preferred icon size */\n      display: inline-block;\n      line-height: 1;\n      text-transform: none;\n      letter-spacing: normal;\n      word-wrap: normal;\n      white-space: nowrap;\n      direction: ltr;\n    \n      /* Support for all WebKit browsers. */\n      -webkit-font-smoothing: antialiased;\n      /* Support for Safari and Chrome. */\n      text-rendering: optimizeLegibility;\n    \n      /* Support for Firefox. */\n      -moz-osx-font-smoothing: grayscale;\n    \n      /* Support for IE. */\n      font-feature-settings: 'liga';\n    }\n    ```\n\n\n### Result\n\nYou 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:\n\n`<p style=\"text-align: center;\"><em class=\"material-icons\">flight_land</em></p>`\n\n"}}