Smart Html¶

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

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

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

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

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

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

Для добавления смарт-выражения, нажмите кнопку Добавить смарт. Выше добавится поле — выпадающий список настроенных в системе глобальных смарт-выражений.

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

В одном виджете можно добавлять неограниченное число смарт-выражений.

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

Данные, которые пользователь видит в виджете, зависят от настроенных фильтров отбора данных, а также от прав конкретного пользователя. Поэтому чтобы проверить, какие именно данные пользователь будет видеть в виджете, нужно задать ID пользователя (поле Пользователь) и значения фильтра (поле Фильтр). Только заполнив эти поля, можно получить данные для предпросмотра.

В смарт-выражениях вы можете обращаться к значениям фильтра и к ID виджета — они находятся в папке Параметры события Показ формы.

Значения параметров поля Фильтр передаются в параметре \@eventParam1 в формате JSON, а идентификатор виджета — в параметре \@eventParam2.

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

Источники данных¶

В дополнительных настройках блока SmartHTML доступна секция Источники данных. Она позволяет подключить данные к виджету напрямую — без необходимости вручную создавать цепочку SmartScript → Pack → Action → Publication.

Для добавления источника нажмите одну из кнопок: - [+ Произвольный] — добавить произвольный источник данных - [+ Смарт-фильтр] — добавить источник на основе смарт-фильтра и полей задач - [+ Скрипт] — добавить источник на основе SmartScript

Каждому источнику задаётся Алиас — уникальное имя для доступа к данным в JavaScript. Требования к алиасу: начинается с латинской буквы, содержит только латинские буквы, цифры и знак подчёркивания (например: salesData, filter_result, kpi2026).

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

ℹ️ Если источники данных не настроены, блок работает в прежнем режиме (смарт-выражения + mustache) — обратная совместимость сохранена.

Тип 1: Произвольный источник данных

Используется существующий произвольный источник данных платформы: хранимая процедура, представление, функция или таблица БД. Выберите источник из списка уже настроенных в системе.

Параметры @UserId и @TaskID платформа передаёт в источник автоматически.

Тип 2: Смарт-фильтр + поля задач/ДП

Источник формируется на основе смарт-фильтра и набора выбранных полей. Не требует программирования — подходит для настройщиков и бизнес-аналитиков.

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

Тип 3: Скрипт (SmartScript)

Источник вызывает SmartScript (Lua, JavaScript или Python) напрямую. Скрипт должен вернуть результат через RESULT в виде массива объектов (плоских словарей).

Дополнительные параметры: - Таймаут (сек) — максимальное время выполнения скрипта. Рекомендуется 10–30 секунд. - TTL (сек) — время жизни кеша. Если в пределах TTL данные уже были получены для той же связки скрипт + пользователь + контекст + фильтры, возвращается кеш.

В скрипте доступны: CONTEXT, SESSION_USER, DB_TYPE, а также параметры блока/портала через EVENTPARAMS.

Использование данных в JavaScript

Данные всех источников блока доступны через глобальный объект window.__smartHtmlData[blockId]. Доступ к конкретному источнику — по алиасу:

var blockId = '{{blockId}}';
var rows = window.__smartHtmlData[blockId]['salesData'];  // данные источника
var meta = window.__smartHtmlData[blockId]['__meta'];     // метаданные

Объект __meta содержит для каждого источника: тип (type), время выполнения в мс (durationMs), признак кеша (cached), ошибку (error). Если один источник вернул ошибку, остальные источники блока продолжают работать.

Пример обработки данных в виджете:

(function () {
  var blockId = '{{blockId}}';
  var rows = window.__smartHtmlData[blockId]['salesData'];
  if (!rows) { return; }
  rows.forEach(function (item) {
    console.log(item);
  });
})();

Шаблон¶

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

Для обращения к данным используются теги шаблонизатора mustache.

Компонент ve-link¶

С помощью ve-link можно открыть контент в интерфейсе SPA без js-вставок. Компонент можно использовать в следующих случаях:

Что открывает	Пример синтаксиса
Открыть страницу, зарегистрированную в "Первой Форме" (т.е. вызывающую какой-то интерфейс приложения).	\<ve-link url="/dev/context-menu">{{url_to_open}}\</ve-link>
Открыть в iframe любую ссылку через специальный роутинг:	\<ve-link link="/NewCustomGrid.aspx?Type=Repeated&All=true">{{link_to_open}}\</ve-link>
Открыть задачу	\<ve-link taskId="{{taskId}}" >{{taskText}}\</ve-link>
Открыть портал	\<ve-link portalId="333">{{portal_name}}\</ve-link>
Открыть одну новость из ленты новостей	\<ve-link newsId="{{taskId}}" >{{news_title}}\</ve-link>

Проверка

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

1. В поле Пользователь укажите ID пользователя, от имени которого вы будете просматривать данные. По умолчанию в параметре отображается ваш ID.

2. Заполните поле Фильтр — в нем указываются значения параметров фильтра, настроенного для блока, в формате JSON:

{"name1":value1, "name2":"value2", ...}

где name — имя переменной из фильтра, а value — значение, которое вы хотите проверить (строковые значения берутся в кавычки).\ Чтобы заполнились значения по умолчанию, настроенные в фильтре, нажмите на значок справа от поля Фильтр. Затем вы можете изменить эти значения. Если фильтр для виджета не настроен, в поле Фильтр будет пустое значение {}.

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

Пример создания и настройки виджета Smart HTML:

Описание виджета Smart Html в прежнем интерфейсе администрирования Полезные ссылки

Шаблонизатор mustache

Редактирование смарт-выражений

Пример: индикаторы прогресса по задачам или проектам

Пример: рейтинги и голосования

Пример: данные из внешнего API на портале (Lua + публикация)

Произвольные источники данных

Смарт-скрипты