Перейти к основному содержимому
Версия: 1.20.1

Структура страниц

Структура страниц содержит разные типы элементов, которые связанны друг с другом. Это позволяет создавать гибкие и настраиваемые страницы.

На приведенной ниже диаграмме показана типичная структура страницы:

Для большей ясности следующая таблица содержит краткий глоссарий

ТерминОписание
СтраницаПортальная страница – это сущность, содержащая структуру страницы. Создайте столько страниц, сколько вам необходимо для реализации логики вашего портала.
Контейнер страницыКонтейнер страницы позволяет создать структуру одной страницы с колонками и строками.
Строка страницыКонтейнер пропорционально делится на строки, которые можно настроить. Подробнее читайте в разделе Строки страницы настоящей статьи.
Колонка страницыСтрока страницы пропорционально делится на колонки, которые можно настроить. Подробнее читайте в разделе Колонки страницы настоящей статьи.

Следующее изображение объясняет принцип строк и колонок.

Создание и настройка страницы

Чтобы создать и настроить страницу, следуйте этой инструкции:

  1. Создайте страницу.
    1. Создайте контейнер страницы.
    2. Создайте строку страницы.
    3. Создайте колонку страницы.
  2. Добавьте элементы взаимодействия с системой:
    1. Создайте экземпляр виджета.
    2. Создайте опции виджета.
внимание

Рекомендуем создавать компоненты страницы из области Связанных списков объектов, а не создавать их с нуля. Например, после создания страницы вы можете сразу создать связанный контейнер для этой страницы.

Создание страниц


Страница является шаблоном для других страниц, который необходимо настраивать внимательно.

Чтобы создать шаблон страницы, выполните следующие шаги:

  1. Перейдите в Структура порталаСтраницы.
  2. Нажмите Создать и заполните поля.
  3. Нажмите Сохранить или Сохранить и выйти, чтобы применить изменения.
внимание

При заполнении поля Путь помните, что это суффикс URL вашей будущей страницы, поэтому внимательно заполняйте его.

Поля формы Страница

ПолеОбязательноОписание
ПутьДа

Укажите суффикс, который будет использоваться в URL-адресе.

Например, если вы ввели my_page, а суффикс портала portal, URL этой страницы будет <your_instance_url>/portal/my_page.

Значение должно быть уникальным в пределах одного портала, но его можно использовать при настройке других порталов.

ЗаголовокНетУкажите название страницы.
ОписаниеНетВведите описание страницы.

Создание контейнера страницы


Контейнер страницы – это основная структурная единица страницы. После создания разделите контейнер на столбцы и строки.

Чтобы создать контейнер страницы, выполните следующие шаги:

  1. Откройте запись страницы, созданную раннее, для которой вам необходимо создать контейнер.
  2. Прокрутите до области Связанные списки и перейдите на вкладку Контейнер страницы.
  3. Нажмите Создать и заполните поля.
  4. Нажмите Сохранить или Сохранить и выйти, чтобы применить изменения.
подсказка

Чтобы получить список доступных контейнеров, перейдите в Структура порталаКонтейнеры страниц. Также можно создать контейнер страницы с нуля.

Поля формы Контейнер страницы

ПолеОбязательноОписание
НаименованиеНетУкажите название контейнера.
Шаблон страницыНетУкажите страницу, которая содержит контейнер.
Классы CSSНетУкажите классы CSS для контейнера. Указанные классы переопределяют классы, определенные для страницы или портала.
Фоновое изображениеНетПрикрепите изображение для использования в качестве фона для вашего контейнера. Максимальный размер изображения 20 Мб.
Цвет фонаНет

Выберите цвет фона контейнера. Эти цвета предварительно настроены и хранятся в таблице Цвета (sys_color).

Обратитесь к поставщику, чтобы добавить пользовательский цвет, которого нет в таблице Цвета (sys_color).

АктивенНетВыберите опцию, чтобы сделать контейнер активным.
Фиксированная ширинаНетВыберите опцию, чтобы закрепить отступы и поля контейнера.
ПорядокНетВведите число, которое будет определять порядок контейнеров в шаблоне. Элементы сортируются в порядке возрастания.

Создание строки страницы


Контейнер страницы можно разделить на строки, которые, в свою очередь, можно разделить на столбцы.

Чтобы создать строку страницы, выполните следующие шаги:

  1. Откройте запись контейнера страницы созданную раннее, для которого вам необходимо создать строку.
  2. Прокрутите до области Связанные списки и перейдите во вкладку Строки страницы.
  3. Нажмите Создать и заполните поля.
  4. Нажмите Сохранить или Сохранить и выйти, чтобы применить изменения.
подсказка

Чтобы получить список доступных контейнеров, перейдите в Структура порталаСтроки страниц. Также можно создать строки страницы с нуля.

Поля формы Строки страницы

ПолеОбязательноОписание
КонтейнерНетУкажите контейнер, который содержит строку.
Классы CSSНетУкажите классы CSS для строки. Указанные классы переопределяют классы, определенные для страницы, портала или контейнера.
АктивенНетВыберите опцию, чтобы сделать строку активной.
ПорядокНетВведите число, которое будет определять порядок строки в контейнере. Элементы сортируются в порядке возрастания.

Создание колонки страницы


Строка страницы может быть разделена максимум на 12 колонок.

Чтобы создать колонку страницы, выполните следующие шаги:

  1. Откройте ранее созданную запись строки страницы, для которой вам необходимо создать колонку.
  2. Прокрутите до области Связанные списки и перейдите во вкладку Колонки страницы.
  3. Нажмите Создать и заполните поля.
  4. Нажмите Сохранить или Сохранить и выйти, чтобы применить изменения.
подсказка

Чтобы получить список доступных колонок, перейдите в Структура порталаКолонки страниц. Также можно создать колонки страницы с нуля.

Поля формы Колонка страницы

ПолеОбязательноОписание
СтрокаНетУкажите строку, созданную ранее, которая содержит колонку.
Имя класса CSSНетУкажите классы CSS для настройки представления колонки. Указанные классы переопределяют классы, определенные для страницы, портала, контейнера или строки.
Телефоны (до 768px)Нет

Введите число от 0 до 12, которое будет определять ширину колонки. Параметр отвечает за просмотр в браузерах на очень маленьких устройствах (на телефонах меньше 768px).

Например, если в строке есть две колонки со значениями ширины 4 и 8 соответственно, то ширина одной из них будет 1/3 страницы, а ширина другой будет равной 2/3.

Планшеты (от 768px)НетВведите число от 0 до 12, которое будет определять ширину колонки. Параметр отвечает за просмотр в браузерах на маленьких устройствах (на планшетах от 768px и выше).
Ноутбуки (от 992px)НетВведите число от 0 до 12, которое будет определять ширину колонки. Параметр отвечает за просмотр в браузерах на средних устройствах (на ноутбуках от 992px и выше).
Десктопы (от 1200px)НетВведите число от 0 до 12, которое будет определять ширину колонки. Параметр отвечает за просмотр в браузерах на средних устройствах (на ноутбуках от 1200px и выше).
АктивенНетВыберите опцию, чтобы сделать строку активной.
ПорядокНетВведите число, которое будет определять порядок колонки в строке. Элементы сортируются в порядке возрастания.

Настройка макета страницы

Чтобы реализовать адаптивный макет страницы, выполните следующие действия:

  1. Создайте контейнер страницы. На странице контейнеры размещаются в порядке убывания на основе значения поля Когда создано. Их можно отсортировать по значению поля Порядок.
  2. Создайте строки в контейнере. Строки – это части контейнера, которые хранят содержим элементы контента. Они располагаются в порядке убывания в зависимости от значения поля Порядок. Строка может быть разделена максимум на 12 столбцов.
  3. Создайте столбцы, в которых вы можете разместить свои виджеты, реализующие логику портала.
  4. Определите ширину столбца на основе сетки Bootstrap. Вы можете указать число, определяющее, какой объем строки может занимать столбец.

Если ширина не указана, столбец занимает всю доступную ширину строки (такое же поведение, как если бы было указано максимальное значение 12). Если используется более одного столбца и ширина не указана, то столбцы поровну делят пространство строки.

Например, вы создали строку с двумя столбцами. Желаемые условия отображения следующие:

Класс устройстваУсловия отображения
ДесктопСтолбцы и их содержимое должны быть одинаковой ширины.
ТелефоныСтолбец 1 должен занимать 2/3 экрана, столбец 2 должен занимать остальную часть.
НоутбукиСтолбец 1 должен занимать 1/3 экрана, столбец 2 должен занимать остальную часть.
ПланшетыСтолбец 1 должен занимать 1/3 экрана, столбец 2 должен занимать остальную часть.

Реализация

Укажите значения в полях Декстопы (от 1200px), Ноутбуки (от 992px), Планшеты (от 768px) и Телефоны (до 768px) на форме записи столбца, как показано ниже:

Декстопы (от 1200px)Ноутбуки (от 992px)Планшеты (от 768px)Телефоны (до 768px)
Колонка 16448
Колонка 26884
внимание

12 – это общее максимальное значение для всех столбцов в строке. Другими словами, общяя сумма значений не может превышать 12. Например, три столбца могут иметь значения 4,4,4 или 5,5,2, или любая другая комбинация, которая в сумме равна 12.

Если сумма превышает 12, столбец перемещается на новую строку.

Виджеты

Чтобы сделать страницу более интерактивной, используйте виджеты. Это небольшое интерактивное приложение, содержащее серверную и клиентскую логику. Оно отправляет, получает и обрабатывает события через клиентские и серверные контроллеры. Виджеты SimpleOne можно добавлять как в формы, так и на страницы.

В готовой поставке платформы вы можете найти ряд предварительно настроенных виджетов, доступных в таблице Виджеты (sys_widget). Чтобы познакомиться со всеми виджетами, перейдите в Структура порталаВиджеты.

В качестве примера можно рассмотреть один из поставленных виджетов – Main Announcement Widget. Этот виджет основан на портальном теге <previewList> и реализует список объявлений на главной странице портала.

Создание экземпляра виджета


Чтобы разместить виджет на странице портала, используйте Экземпляры виджетов. Эти элементы помогают указать определенное место для виджета в соответствии с указанным столбцом и настроить параметры виджета с помощью опций виджета.

Чтобы создать экземпляр виджета, выполните следующие шаги:

  1. Откройте созданную ранее запись колонки страницы, для которой вам необходимо создать экземпляр виджета.
  2. Прокрутите до области Связанные списки и перейдите во вкладку Экземпляры виджета.
  3. Нажмите Создать и заполните поля.
  4. Нажмите Сохранить или Сохранить и выйти, чтобы применить изменения.
подсказка

Чтобы получить список доступных экземпляров виджета, перейдите в Структура порталаЭкземпляры виджетов. Также можно создать экземпляры виджета с нуля.

Поля формы Экземпляры виджетов

ПолеОбязательноОписание
ВиджетНетУкажите строку, созданную ранее, которая содержит колонку.
ID колонок страницНетУкажите классы CSS для настройки представления колонки. Указанные классы переопределяют классы, определенные для страницы, портала, контейнера или строки.
Значения опций схемыНет

Поле позволяет изменить некоторые выходные данные для указанного виджета. Укажите параметры в формате JSON. В примере ниже показан пустой выбор, выполненный для таблицы Сотрудник.

АктивенНетВыберите опцию, чтобы сделать экземпляр активным.
ПубличныйНет

Выберите опцию, чтобы сделать страницу видимой для неавторизированных пользователей.

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

ПорядокНет

Укажите порядок расположения виджета в колонке страницы.

Заполните это поле целым числом для отображения виджетов по возрастанию.

При отображении одного виджета в колонке значение порядка не учитывается.

Создание опций виджета


Опции виджета определяют, например, логические различия для похожих виджетов, сужают критерии выбора и решают другие связанные задачи.

Чтобы создать опции виджета, выполните следующие шаги:

  1. Откройте созданную ранее запись экземпляра виджета, для которой вам необходимо создать опции виджета.
  2. Прокрутите до области Связанные списки и перейдите во вкладку Опции виджета.
  3. Нажмите Создать и заполните поля.
  4. Нажмите Сохранить или Сохранить и выйти, чтобы применить изменения.

Чтобы получить список доступных опций виджета, перейдите в Структура порталаОпции виджетов. Также можно создать опции виджета с нуля.

Поля формы Опции виджетов

ПолеОбязательноОписание
ПорталНетУкажите запись портала, созданную ранее.
Экземпляр виджетаНетВыберите ранее созданный экземпляр виджета, чтобы привязать опции.
Значения опций схемыНетУкажите параметры опции виджета в формате JSON. Эти опции позволяют передавать значения переменных, определенных в теле виджета, для разных контекстов (разных экземпляров виджета).

После того как вы определили эти опции, как описано выше, они доступны в глобальном объекте параметров. Например, параметры, указанные в опциях виджета:

Опции виджета

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