Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Service Portal pages are one of the entities used for structuring 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. For more information about portal structure, please refer to the Creating a Self-Service Portal article.

Note

You should consider portal structure first before configuring because a portal set up incorrectly may not work abnormal. So it is recommended to work through portal structure carefully in advance.


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 the number of columns for a row depending on your needs.

To divide a column in a rows, please refer to the Columns section of the Creating a Self-Service Portal article.

Image Added



Tip
Reuse

You can reuse portal pages provided by

the

vendor basing on them as templates. This workaround

facilitates

allows to speed up 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

Creating a Self-Service Portal article.

Configuring

a column gridTo configure a column grid and 

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
  1. Within a page, containers are placed
upside down
  1. in descending order based on the
page

Как настроить адаптивность Как в рамках одной страницы портала расположить элементы разных размеров

Нужно:

  1. Создать контейнер, возможно, даже не один. Он занимает всю ширину окна. Контейнеры идут сверху вниз. Порядок задается полем Order.
  2. Создать строки в контейнере. Строки делят контейнер на логические элементы, в которых можно дальше размещать элементы содержимого.
  3. Строки идут вертикально сверху вниз, порядок задается полем Order.
  4. Строки должны быть делимы вертикально (структура типа “сетка” - 12 равных частей) и поддерживать следующие размерные классы сеток:
    • xs (for phones - screens less than 768px wide)
    • sm (for tablets - screens equal to or greater than 768px wide)
    • md (for small laptops - screens equal to or greater than 992px wide)
  5. lg (for laptops and desktops - screens equal to or greater than 1200px wide)
  6. Строки (Rows) делятся вертикально на колонки (Columns).
    1. Ширина колонки задается множителем от 1 до 12 для каждого класса сетки (по умолчанию 12, это значит, что 1 колонка занимает всю ширину ряда)
  1. Для каждого размера устройства может быть задан свой пропорциональный множитель.
  2. Если множитель не задан, то колонки занимают равную ширину в рамках строки. 
  3. Если сумма множителей колонок превышает 12, то колонки, включая ту, с которой начинается превышение переносятся вниз на “новую строку”.

В итоге пример:

Создаем строку, в ней создаем колонку, в ней размещаем виджет. Мы хотим, чтобы на больших экранах он занимал все поле, а на остальных устройствах - половину экрана. Что тогда? Тогда мы в поле LG пишем 12, а в остальные поля - 6.

Необходимо учитывать, что 12 - это максимальная сумма множителей колонок на строку. Т.е. если в строке несколько колонок, то они суммарно не могут занимать больше 12 (по каждому полю).

Если получается больше 12, то колонки, включая ту, с которой начинается превышение переносятся вниз на “новую строку”.

  1. Содержимое контейнера по умолчанию позиционируется относительно центра страницы и занимает фиксированную максимальную ширину в зависимости от размерного класса (large = 1200Px, medium = 992px, small/xsmall  = 768px). Опционально можно задать адаптивную ширину содержимого, когда содержимое подстраивается под всю ширину контейнера. Атрибут fixed_width:
    • true - фиксированная ширина в зависимости от размерного класса (large = 1200Px, medium = 992px, small/xsmall  = 768px)
    • false - ширина зависит от размера окна, контейнер занимает всю ширину окна
  2. Контейнеры располагаются вертикально друг под другом, порядок определяется числовым параметром.
  3. Контейнеры содержат горизонтальные секции -  строки.
  4. Строки располагаются вертикально друг под другом, порядок определяется числовым параметром.
  5. Строки должны быть делимы вертикально (структура типа “сетка” - 12 равных частей) и поддерживать следующие размерные классы сеток:
    • xs (for phones - screens less than 768px wide)
    • sm (for tablets - screens equal to or greater than 768px wide)
    • md (for small laptops - screens equal to or greater than 992px wide)
  • lg (for laptops and desktops - screens equal to or greater than 1200px wide)
  1. Строка содержит вертикальные секции - колонки.
  2. Колонки располагаются горизонтально друг за другом, порядок определяется числовым параметром.
  3. Ширина колонки может быть задана пропорциональным множителем от 1 до 12 для каждого класса сетки (по умолчанию - 12, означает что 1 колонка будет занимать всю ширину ряда).
  4. Для каждого размера устройства может быть задан свой пропорциональный множитель.
  5. Если множитель не задан, то колонки занимают равную ширину в рамках строки. 
  6. Если сумма множителей колонок превышает 12, то колонки, включая ту, с которой начинается превышение переносятся вниз на “новую строку”.

Service Portal security

По умолчанию, сервис портал доступен всем сотрудникам, в том числе и не обладающим никакими ролями. Можно было бы ограничивать доступ к элементам портала с помощью критериев, но это пока невозможно. 

Сделать страницу публичной

Как здесь: https://docs.servicenow.com/bundle/quebec-servicenow-platform/page/build/service-portal/concept/c_SPSSOLoginAndRedirects.html#d339502e56

Making public pages

  1. Created at field value 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
.
  1. . They are placed in descending order based on the value of the Order field  in the Row record form.
    Row is a more high-level entity than a column. Row can be divided into maximum 12 columns.
  2. Create columns in which you can place your widgets implementing portal logic.
  3. 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.
Info

If the width is not specified, then the column takes up all the row width available (the same behavior as if the max value 12 was specified). If more than one column are used and the width is not specified, then the columns share the row space equally.

Example

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

Device classDisplay condition
DesktopColumns and content in them should be of equal width
PhonesColumn 1 should take up 2/3 of the screen, column 2 should take up the rest.
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.


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


Note

"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.

Note

In the cases below, we consider that you have fully configured and functional portal structure. You can use vendor-provided portal pages and other items as a sample. Copy them and build your own portal basing on them, it may speed up the process.


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 will 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.

Portal header menu form fields

FieldMandatoryDescription
TitleYSpecify an item title to display in the header.
Active
Select this checkbox to make this item active or inactive. If the checkbox is not selected, the header item is not displayed.
TreeY

In this field, specify a reference to the previously created tree containing node structure of the portal header menu.

Tip

You can use baseline tree provided by vendor for this purposes. It is called Portal Header Menu and located in the Trees dictionary.


OrderYSpecify an integer number to arrange items in the header.
General tab fields
Access criteriaNSpecify the User Criteria defining user access to this node (card or header element). If no criteria selected, then all users are allowed to use this element and its sub-elements as long as they are not protected by separate criteria.
Node typeNSpecify a node type by choosing from the previously created.
Nesting levelY

Node nesting level. This field is populated automatically.

This parameter shows on which nesting level this item is located at.

ParentY

Specify a parent item if you are implementing a structure with some nesting levels, like this:

Code Block
* Parent item 1

** Child item 1

** Child item 2

** Child item 3

* Parent item 2

** Child item 4

** Child item 5


Extra attributes tab

URLY

Specify an URL for an item. In this field, you can specify either absolute or relative URL (relative to the current portal referring to the tree to which the current node is assigned):

Absolute URL: https://instance.example.com/portal/profile

Relative URL: /profile

On the screenshots below, you can see a simple example of creating a catalog item.


Image AddedImage Added


Adding portal header and footer


Portals allow deep control of their 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.

Info

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
.

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:

  • Navigate to Portal Structure → Container and create a container for a header or a footer. respectively.
  • Create a row-and-column structure within this container and fill it in with necessary content (widgets, text, images)
    1. .
  • 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.
  • Service Portal is designed to allow customers to have deep control over the behavior of their portals. One of the main navigation controls for users is the header main menu. The menu options are determined by the assignment of the main menu to the portal, but the look and behavior of the menu are defined within the theme and associated header.

    https://docs.servicenow.com/bundle/quebec-servicenow-platform/page/build/service-portal/task/configure-header-menu.html#configure-header-menu

    Как сделать ту или иную страницу публичной

    Как сделать разных элементов на портале бутстраповых

    Настройка на странице различных блоков ()




    Table of Contents
    absoluteUrltrue
    classfixedPosition
    printablefalse