Show/Hide Toolbars

Справочник по интерфейсу администратора



Блок Smart Html является самым гибким и многофункциональным из всех портальных блоков. С его помощью можно настроить отображение практически любых данных, хранящихся в системе, практически в любом виде. Данные для отображения отбираются с помощью одного или нескольких смарт-выражений. Представление (внешний вид) этих данных настраивается с помощью шаблона и HTML-разметки.

В общих настройках блока перейдите по ссылке "Открыть дополнительные настройки".

Открывшееся окно поделено на три области:

в левой части настраиваются данные, которые выводятся в блоке. Структура данных и сами данные формируются с помощью одного или нескольких смарт-выражений. После сохранения смарт-выражения в верхнем окне JSON Sample отображается актуальная структура данных и пример возвращаемых значений (в формате JSON).

в средней части настраивается представление данных (шаблон). Оно формируется на основе шаблонизатора mustache.

правая часть служит для предпросмотра результата.

Кликните мышью для просмотра в полном размере

Настройка портального блока Smart html.

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

Отбор данных с помощью смарт-выражений

Чтобы добавить смарт-выражение, нажмите на знак "+". Отобразится выпадающий список настроенных в системе глобальных смарт-выражений.

smart_html_2

Выбор смарт-выражения в настройках блока.

!warning После добавления нового смарт-выражения кнопкой + надо обновить страницу (клавиша F5), выбрать созданное смарт-выражение в выпадающем списке и затем сохранить настройки (кнопка Сохранить).

После сохранения в поле JSON Sample отобразится структура данных и пример возвращаемых значений.

Кликните мышью для просмотра в полном размере

Пример получения структуры данных, возвращаемых смарт-выражениями.

Шаблон

Для создания шаблона можно использовать html-теги, задавать стили css, а также использовать преднастроенные стили, поставляемые вместе с "Первой Формой" (например, для заголовков можно использовать преднастроенные стили тегов <h1>, <h2>, <h3>, и т.п.).

Для обращения к данным используются теги шаблонизатора mustache. Полное описание можно посмотреть на официальном сайте разработчика (см. ниже Полезные ссылки). В данном разделе приведены самые часто используемые теги.

!warning Теги шаблонизатора регистрозависимы - например, использование taskId вместо taskID приведет к ошибке.

Обращение к единичному значению

Если смарт-выражение возвращает одно значение, то для обращения к данным используется тег {{smartXXX}}, где XXX - это ID смарт-выражения (при выборе смарт-выражения он отображается в начале строки списка).

portal_block_mustache_2

Пример обращения к единичному значению.

Работа со списками значений (циклы)

Если смарт-выражение возвращает список значений, то для обращения к данным используются открывающий тег {{#smartXXX}} и закрывающий тег {{/smartXXX}}, где XXX - это ID смарт-выражения. Обращения к данным располагаются внутри между тегами.

Для обращения к данным внутри цикла используются теги с полями, возвращаемыми смарт-выражением (например, {{taskId}}).

Пример цикла:

{{#smart14892}}
{{taskID}}: {{description}}
{/smart14892}}

Еще один пример на скриншоте ниже:

portal_block_mustache_3

Пример обработки списка значений.

Условные операции

Для проверки условия используются обычные {{#smartXXX}} и инвертированные {{^smartXXX}} теги - инвертированные теги "срабатывают" если значение является ложным (или если значения с таким ключом нет).

Пример условной обработки (обжалованная заявка отображается как рекламация):

{{^isComplainted}}Заявка{{/isComplainted}}

{{#isComplainted}}Рекламация{{/isComplainted}}

Еще один пример на скриншоте ниже:

portal_block_mustache_4

Пример условной обработки значений.

Ссылки

Для формирования ссылки на задачу, профиль пользователя и т.п. тег шаблона помещается внутрь тега html. Например, ссылка на задачу:

<a href="/MainTaskForm.aspx?TaskID={{taskId}}">Задача {{taskId}}</a>

Остальные возможности можно посмотреть в описании шаблонизатора (см. ниже Полезные ссылки).

!warning Шаблонизатор не имеет удобных средств форматирования данных (например, чисел и дат). Поэтому приводить данные к нужному формату надо в самом источнике данных - в смарт-выражении (в том числе на языке T-SQL).

Полезные ссылки