Skip to main content
Version: 1.21.3

Page Structure

The page structure contains various types of elements linked with each other. This allows you to build flexible and configurable pages.

The diagram below illustrates a typical page structure.

For more clarity, the following table contains a brief glossary.

TermDescription
PageA portal page is an entity containing the page structure. Create as many pages as you need to implement your portal logic.
Page ContainerPage container allows building the structural view of a single page with columns and rows.
Page RowContainers are proportionally divided into customizable rows. For more information, refer to the Page Rows section of this article.
Page ColumnRows are proportionally divided into customizable columns. For more information, refer to the Page Columns section of this article.

The following screenshot explains the rows and columns concept.

Create and configure a page

To create and configure a page, follow the instructions below:

  1. Create a page.
    1. Create a page container.
    2. Create a page row.
    3. Create a page column.
  2. Add system interaction elements.
    1. Create a widget instance.
    2. Create a widget option.
caution

It is highly recommended to create page components from the Related Lists area of the objects instead of creating from scratch. For example, after creating a page, you can create a related container for this page right away.

Create a page


The page is a template for other pages that should be carefully configured.

To create a page template, complete the steps below:

  1. Navigate to Portal StructurePages.
  2. Click New and fill in the fields.
  3. Click Save or Save and exit to apply the changes.
caution

When filling in the Path name field, keep in mind that this is the URL suffix of your future page, so fill in this field carefully.

Pages form fields

FieldMandatoryDescription
Path nameY

Specify a suffix to be used in the URL.

For example, if you type my_page, and the existing portal suffix is portal, the URL for this page will be <your_instance_url>/portal/my_page.

The value should be unique within the portal, but it can be used when configuring other portals.

TitleNSpecify a page title.
DescriptionNType a description of the page.

Create a page container


A page container is the main structural page unit. After creating, split the container with columns and rows.

To create a page container, complete the steps below:

  1. Open the page created earlier for which you need to create a container.
  2. In the Related Lists area, select the Page Container tab.
  3. Click New and fill in the fields.
  4. Click Save or Save and exit to apply the changes.
tip

To obtain the available containers list, navigate to Portal Structure → Page Containers. You can also create a page container from scratch there.

Page Container form fields

FieldMandatoryDescription
NameNSpecify a container name.
PageNSpecify a page that will contain the container.
CSS class namesNSpecify the CSS classes for the container. Defined classes override classes for the page or the portal.
Background imageNAttach an image to use as the background for your container. The maximum size of the image is 20 Mb.
Background colorN

Select the container background color. These colors are preconfigured and stored in the Colors (sys_color) table.

Contact the vendor to add a custom color that is not included in the Color (sys_color) dictionary.

ActiveNSelect the checkbox to make a container active or inactive.
Fixed widthNSelect the checkbox to fix the container padding.
OrderNEnter a number that will define the container order in a template. Items are sorted in ascending order.

Create a page row


A page container can be divided into rows, which, in turn, can be divided into columns.

To create a page row, complete the steps below:

  1. Open the page container for which you need to create a row.
  2. In the Related Lists area, select the Page Row tab.
  3. Click New and fill in the fields.
  4. Click Save or Save and exit to apply the changes.
tip

To obtain the available page rows list, navigate to Portal StructurePage Rows. You can also create a page row from scratch there.

Page Row form fields

FieldMandatoryDescription
Page СontainerNSpecify a page container for this row.
CSS Class NamesNSpecify the CSS class names to customize the elements view located on this row. Classes defined there override classes defined for the page, the portal, or the container.
ActiveNSelect this checkbox to make a row active or inactive.
OrderNEnter a number that will define the row order on a page. Rows are sorted in ascending order.

Create a page column


A page row can be divided into 12 columns max.

To create page columns, complete the steps below:

  1. Open the page row for which you need to create a column.
  2. In the Related Lists area, select the Page Column tab.
  3. Click New and fill in the fields.
  4. Click Save or Save and exit to apply the changes.
tip

To obtain the available page columns list, navigate to Portal Structure → Page Columns. You can also create a page column from scratch there.

Page Column form fields

FieldMandatoryDescription
Page rowNSpecify a previously created row for the column.
CSS class namesNSpecify the CSS class names to customize the elements view located on this row. Classes defined there override classes defined for the page, the portal, the container, or the row.
Extra-small devicesN

Enter a number from 0 to 12 that will define the width of the column. The parameter is responsible for the view in browsers on extra small devices (on phones less than 768px).

For example, if there are two columns in a row with width values 4 and 8, respectively, then the width of one of them is equal to 1/3 of a page, and another one’s width is equal to 2/3 of that page.

Small devicesNEnter a number from 0 to 12 that will define the width of the column. The parameter is responsible for portal view in browsers on small devices (on tablets 768px and up).
Medium devicesNEnter a number from 0 to 12 that will define the width of the column. The parameter is responsible for portal view in browsers on medium-size devices (on desktops 992px and up).
Large devicesNEnter a number from 0 to 12 that will define the width of the column. The parameter is responsible for portal view in browsers on large devices (on large desktops 1200px and up).
ActiveNSelect the checkbox to make this column active or inactive.
OrderNEnter a number that will define the column order in a row. Columns are sorted in ascending order.

Configure a page layout


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

  1. Create a container within a page. Within a page, containers are placed in descending order based on the Created at field value and can be sorted by the Order field in the Container record form.
  2. Create rows within the container. Rows are container parts available for keeping the content items. They are placed in descending order based on the value of the Order field in the Row record form. The row can be divided into maximum 12 columns.
  3. Create columns in which you can place your widgets implementing portal logic.
  4. Define column width based on the Bootstrap grid system. You can specify a number defining how much row volume can this column take.

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 is used and the width is not specified, then the columns share the row space equally.

For example, you create a row with 2 columns in it. Your desired display conditions are as follows:

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 Column 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
caution

"12" is the maximum multiplier value for all columns in a row. In other words, the column 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 that is 12 in sum.

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

Widgets

To make a page more interactive, use Widgets. It is a small interactive application containing the server and client logics. It sends, receives, and processes events through the client and server controllers. SimpleOne widgets can be added to forms as well as to pages.

In the out-of-the-box platform delivery, you can find a number of preconfigured widgets available in the Widgets table. To get acquainted with them, navigate to Portal StructureWidgets.

As an example, we can consider one of the widgets delivered – Main Announcement Widget. This widget is based on the <previewList> portal tag and implements announcements list on the Service portal main page.

Create a widget instance


To place a widget on a portal page, use Widget Instances. These elements help to define a specific location for the widget according to the column specified and to customize the widget options with the option schema.

To create a widget instance, complete the steps below:

  1. Open the page column for which you need to create a widget instance.
  2. In the Related Lists area, select the Widget Instance tab.
  3. Click New and fill in the fields.
  4. Click Save or Save and exit to apply the changes.

To obtain the available widget instances list, navigate to Portal Structure → Widget Instances. You can also create a widget instance from scratch there.

Widget Instances form fields

FieldMandatoryDescription
WidgetNSpecify a widget configured earlier. Select it from the Widget (sys_widget) dictionary.
Page Column IDNSpecify an ID of the column on some page for applying these settings.
Schema Option ValuesN

The field allows changing some output data for specified widgets. Specify clarifying options in JSON format. The following example shows the empty selection performed for the Employee table.

ActiveNSelect the checkbox to make this widget instance active or inactive.
PublicN

Select the checkbox to make this page visible for unauthorized users.

When this checkbox is selected, the page is available for public access, so use it with caution.

OrderN

Specify the order of the widget location in a page column.

Fill in this field with the integer number to display widgets by increasing the field value.

When displaying a single widget in a column, the order value is irrelevant.

Create a portal widget option


A portal widget option defines, for example, logic differences for similar widgets, narrows down the selection criteria, and solves other related tasks.

To create a widget option, complete the steps below:

  1. Open the widget instance for which you need to create a widget option.
  2. In the Related Lists area, select the Portal Widget Option tab.
  3. Click New and fill in the fields.
  4. Click Save or Save and exit to apply the changes.

To obtain the available widget options list, navigate to Portal StructureWidget Options. You can also create a widget option from scratch there.

Widget Options form fields

FieldMandatoryDescription
PortalNSelect a previously created portal record from the list.
Widget instanceNSelect a previously created widget instance from the list to bind options.
Schema option valuesNSpecify widget instance options in JSON format. These options allow for transmitting values of the variables defined in the widget body for different contexts (different widget instances).

After you have defined these options as described above, they are available in the options global object. For example, the options specified in the Widget Options:

Option Schema Values

{
"itemView": "SP%20View%20Only",
"tsGroupId": "158983234712988195"
}

should be used in a Template this way:

Template

<search tsGroupId=options.tsGroupId searchQuery="{data.search}"
onChange="s_widget_custom.search(arguments[0]);"
searchUrl="/portal/search_result" showTitle="true" size="lg"
placeholder={data.placeholderMessage} itemPage ="record" itemView=options.itemView>