Service Portal pages are one of the entities used for content organizing. It consists of containers and rows, which, in turn, consist of columns. Manage page layouts, and you will reach the best user experience.

Portal pages are divided by containers implementing the page layout. Containers are divided into rows. Typically, container contains a single row, but there can be more than one row. Rows are divided into columns. Specify a number of columns for a row depending on your needs.



Reuse pages provided by the vendor basing on them as templates. This workaround facilitates the page developing process since you do not need to develop it from scratch.

To create a page from scratch, navigate to Portal Structure → Pages and fill in the form as described in the parent article.

Configuring page layout

You can configure your page layout responsive to various device screen sizes. By default, four main screen sizes are supported:

  • Extra small (xs) - devices with screen width less than 768px (phones, for example).
  • Small (sm) - devices with screen width 768px and up (tablets, for example)
  • Medium (md) - devices with screen width 992px and up (small laptops)
  • Large (lg) - devices with screen width 1200px and up (laptops and desktops)

To implement the responsive page layout, please complete the steps below:

  1. Create a container (as many as you need) within a page. Containers are placed upside down on the page and can be sorted by the Order field in the Container record form.
  2. Create rows within a container. Rows are container parts available for keeping the content items. They are placed upside down within a container and can be sorted by the Order field in the Row record form.
  3. Rows can be divided vertically into maximum 12 equal parts.
  4. Create columns in which you can place your widgets implementing portal logic.
  5. To define column width, use multipliers which concept is based on the Bootstrap grid system. You can specify a number defining how much row volume can this column take.

If not specified, then the column takes up all the row width available (the same behavior as if the max value 12 was specified).

Example

You created row with 2 columns in it. Your desired display conditions are:


Device classDisplay condition
DesktopColumns and content in them should be of equal width
Small laptopsColumn 1 should take up 1/3 of the screen, column 2 should take up the rest.
TabletsColumn 1 should take up 1/3 of the screen, column 2 should take up the rest.
PhonesColumn 1 should take up 2/3 of the screen, column 2 should take up the rest.


Implementation

Specify values in the Large Devices, Medium Devices, Small Devices and Extra-Small Devices fields for the Columns record forms as shown below:


Large Devices (lg size)Medium Devices (md size)Small Devices (sm size)Extra-Small Devices (xs size)
Column 16448
Column 26884


"12" is the maximum multiplier value for all columns in a row. In other words, columns multiplier sum (if there are more than one column in a row) cannot exceed 12. For example, three columns can have multipliers (4,4,4), or (5,5,2), or any other combination which is 12 in sum.

If the multipliers sum exceeds 12, then the column moves to the new line.

Customizing portal header menu

Portal header contains menu structure consisting of menu groups and items used for quick access to necessary business functionality (for example, Service Catalog, or "My Tasks" (list of tasks a user is assigned to). Portal header implements Tree Structures functionality, so it can be easily reconfigured.

To customize portal headers (that is, to add or delete items) in the most convenient way, please complete the steps below:

  1. Navigate to Portal Structure → Portals.
  2. Open the record of your portal.
  3. Click on the reference in the Header Navigation Menu and navigate into it.
  4. Create necessary records in the Node related list. Generally, you'll need to specify only title, order and (optionally) parent item for your new item.
    1. To delete redundant records, select them and click Delete on the related list form.
    2. To move an item back and forth within the header, set the relevant Order value. Items are sorted in ascending order.

Adding portal header and footer

Portals allow deeply controlling of the portal behavior. The header main menu helps to implement this control and it is one of the navigation anchors for users.

To configure a portal header menu, please complete the steps below:

  1. Navigate to Portal Structure → Container and create a container for a header or a footer. respectively.
  2. Create a row-and-column structure within this container and fill it in with necessary content (widgets, text, images).
  3. To define a container as a header or a footer, specify it in the Footer Container or Header Container field of the related portal record.

Assigning a page as a homepage or a default 404 error page

A page can be opened by default, as a homepage, when a portal is referenced by its URL accompanied with the portal suffix (for example, https://instance.example.com/sp). This page, generally, contains major information for a wide range of users.

The 404 error page should be opened when some broken link has been opened during the navigation session.

You need to create a page first before completing these steps. Also, you can reuse the pages delivered by the vendor.

To set a page as a home page for a portal, please complete the steps below:

  1. Navigate to Portal Structure → Pages.
  2. In the list that appeared, find a record for the page you need to configure and navigate into it.
  3. Select the Use For Home Page checkbox if unselected.
  4. Click Save or Save and Exit to apply changes.
  5. Navigate to Portal Structure → Portals.
  6. In the list that appeared, find a record for the portal for which you need to add a homepage and navigate into it.
  7. Add the preliminary configured page in the Home Page field.
  8. Click Save or Save and Exit to apply changes.

To set a page as a default 404 error page, please complete the steps below:

  1. Navigate to Portal Structure → Portals.
  2. In the list that appeared, find a record for the portal for which you need to add a homepage and navigate into it.
  3. Add the preliminary configured page in the 404 Page field.
  4. Click Save or Save and Exit to apply changes.