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.

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

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 Structure → Pages.
2. Click New and fill in the fields.
3. Click Save or Save and exit to apply the changes.

Pages form fields

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.

Page Container form fields

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.

Page Row form fields

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.

Page Column form fields

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.

Example

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

Implementation

Specify values in the Large devices, Medium devices, Small devices and Extra-small devices fields for the Column record forms as shown below:

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 Structure → Widgets.

As an example, 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.

Widget Instances form fields

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

Widget Options form fields

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

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