Show/Hide Toolbars

Полное руководство администратора

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

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

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

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

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

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

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

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

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

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

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

smart_html_2

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

!warning После добавления смарт-выражения не забудьте сохранить выбор, нажав кнопку Сохранить.

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

В смарт-выражениях вы можете обращаться к контекстным параметрам "Пользователь" и значениям параметра фильтра - они доступны из папки "Параметры события Показ формы". ID пользователя из поля "Пользователь" передается в параметре @eventParam0, а значения параметров поля "Фильтр" - в параметре @eventParam1 в формате JSON.

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

Пример использования контекстных параметрам блока Smart Html в смарт-выражении.

В параметре @eventParam1 дата передается как строка в формате '30.11.2019', а период - как строка вида {"from":"01.11.2019","to":"30.11.2019 23:59"}.

Шаблон

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

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

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

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

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

portal_block_mustache_2

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

Работа с текстами с форматированием

Если вы работаете с ДП "Большой текст с форматированием" или с текстом задачи, в котором разрешены html-теги (эта настройка есть в Основных настройках категории), их "нативные" значения содержат html-теги. Если выводить такие нативные значения с помощью тега {{...}}, html-теги будут отображаться для пользователя. Улучшить такое отображение можно двумя способами:

с сохранением форматирования. Для этого используется тег с тройными фигурными скобками {{{...}}}.

без сохранения форматирования. Для этого в смарт-выражении, которое готовит данные для вывода, используйте функцию dbo.fnStripTags(...), которая вычищает html-теги.

Пример:

smart_html_4_1

Вывод текста в "нативном" виде.

 

smart_html_4_3

Вывод текста без сохранения форматирования.

 

smart_html_4_2

Вывод текста с сохранением форматирования.

 

Использование тройных фигурных скобок {{{...}}} позволяет выводить даже изображения:

portal_block_mustache_5

Вывод текста без сохранения форматирования.

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

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

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

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

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

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

portal_block_mustache_3

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

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

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

!warning Если значение, проверяемое условным тегом, должно иметь значение true\false, то оно должно быть в формате bit.

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

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

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

В данном случае isComplainted должен быть в смарт-выражении преобразован к формату bit, например:

cast(Complain as bit) isComplainted

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

portal_block_mustache_4

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

 

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

{{#smart111}}
  <div>{{description}}</div>
{{/smart111}}
{{^smart111}}
  <div>Задач на сегодня нет</div>
{{/smart111}}          

Ссылки

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

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

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

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

Проверка

После настройки блока (смарт-выражений и шаблона) вы можете проверить, какие данные возвращаются и как будет выглядеть при этом содержимое блока. Для этого:

(1) заполните поле "Фильтр" - в нем указываются значения параметров фильтра, настроенного для блока, в формате JSON:
{"name1":value1, "name2":"value2", ...}
где name - имя переменной из фильтра, а value - значение, которое вы хотите проверить (строковые значения берутся в кавычки).
Чтобы заполнились значения по умолчанию, настроенные в фильтре, кликните иконку icon_cat_repeat справа от поля "Фильтр". Затем вы можете изменить эти значения.

(2) в поле "Пользователь" укажите ID пользователя, от имени которого вы будете просматривать данные;

(3) кликните иконку icon_update справа от названия JSON sample.

После этого в поле JSON Sample отобразится набор возвращаемых значений, а в поле "Предпросмотр" - содержимое блока.

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

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

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