Portal pages

Use portal pages to organize content and design portal user experiences for your constituents. A page provides the base structure for how a collection of information is displayed in the constituent-facing GOV.UK Design System Service Portal. Pages house elements such as layouts, patterns, containers and rows (which, in turn, house widgets), and other components to display information. By manipulating the layout of the page and the widgets within it, you can construct the desired user experience and display the information your user needs to access.

• Pages are referenced using the page ID.
• Pages and its widgets can be referenced in more than one portal.
• Use base system pages as templates.

Several pages are included with the GOV.UK Developer Toolkit application for use with the GDS Service Portal. You can use these portal pages as is, or you can customize them to suit your needs. The GDS Service Portal contains the following pages by default:

Create and edit a GDS Service Portal page using Service Portal Designer

By default, the GOV.UK Developer Toolkit supplies you with already-configured pages that contain widgets and other elements that adhere to GDS guidelines, but you can create or edit existing pages to organize the columns that house the widgets and widget instances.

1. Navigate to All > Service Portal > Service Portal Configuration.
2. Select Designer.
3. Select UK Government Portal to switch to editing or designing pages for the GDS Service Portal.

   

4. From the Service Portal Designer, select a page to customize, or select Add a new page.

   For example, to customize the 503 Service Unavailable error response page for the GDS Service Portal, select UK GDS 503.

5. Edit page properties by selecting Page settings in the menu bar.

   Here, you can configure properties such as page title and ID, short description, and add page-specific custom CSS.

6. Optional: Under Layouts, select Container and drag it onto the page, then drag one of the other layouts and place it in the container.

   This layout defines the structure of your page and the space available to place widgets. The structure of the layout aligns with the Bootstrap grid template and adds up to 12. If you are editing an existing page and the existing layout of the page meets your needs, you may skip this step.

7. Edit container properties by selecting the Container, then selecting the edit icon ().

   Here, you can customize properties such as container name, width, CSS class, and the background color or image for that particular container (and its widgets).

8. Use the Widget filter to search for an existing widget, then drag the widget to the container layout to add it to the page.

   Each widget added to a page becomes its own instance. Widget instances get their logic from the base widget template, as well as other set scripts and properties that can be configured specific to that instance. Select the pencil icon () to edit an instance of a widget on this page. You may have multiple instances of the same widget on a page, each with different instance options configured. Editing the instance options of a widget does not affect the properties of the base widget template.

   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.

   For more information on the library of widgets and other page components that are included with the GOV.UK Developer Toolkit and GDS Service Portal, see GOV.UK Developer Toolkit GDS Service Portal Widget Library.

9. Select the Preview tab to preview your changes to the page, or the icon to view the edited page in a new tab.

   Your changes save automatically.

Result

The page is created with, or is edited to include, the desired content and widgets.