side menu

Виджет «Код»

Виджет Код позволяет работать с HTML‑кодом. Например, можно выделить цветом элементы формы или отобразить на странице данные из ELMA365 и других систем. Кроме того, при помощи этого виджета вы можете добавить скрипты на форму или страницу, а также создать динамические формы в процессе или приложении.

начало внимание

Использование констант Global или Namespace в скриптах ограничивает экспорт компонентов системы. Подробнее об этом читайте в статье «Глобальные константы в скриптах».

конец внимание

Добавить виджет

Чтобы разместить виджет на поле для моделирования, перетащите его с правой панели дизайнера интерфейсов или нажмите кнопку + Виджет. В открывшемся окне задайте настройки виджета:

  1. На вкладке Основное сформируйте HTML-код с помощью с помощью специальных вставок.

code-widget-1

  1. На вкладке Дополнительное настройте отображение виджета: 

code-widget-2

  • Перерисовка содержимого — определите, когда обновлять данные в виджете:
    • При изменении значения — включена по умолчанию;
    • При окончании изменения значения;
    • Никогда — используйте этот вариант, если хотите обновлять содержимое с помощью скрипта;
  • Не показывать содержимое в режиме конструктора — включите опцию, чтобы в шаблоне виджета отобразить краткое описание вместо кода, и затем введите текст.

Конструкции для вставок кода

В виджете Код используется синтаксис, позволяющий делать вставки трёх видов:

  1. <%Конструкции, объявления%> — примеры будут рассмотрены ниже.
  2. <%- Вывод значения с экранированием HTML-символов %> — например, если в значении встречается знак «<», то в таком виде он и будет выведен.
  3. <%= Вывод значения без экранирования HTML-символов %> — например, если задано значение <b>Внимание!</b>, то будет выведен текст «Внимание!» (с выделением жирным).

Далее рассмотрим применение вставок первого вида.

Условия

<% if (data.Value > 10) { %>
// Здесь содержимое, которое нужно отобразить
<% } %>

Условия if-else

<% if (true) { %>
// Здесь содержимое, которое нужно отобразить
<% } else { %>
// Здесь содержимое, которое нужно отобразить
<% } %>

Циклы

<% for (const item of data.items) { %>
// Здесь содержимое, которое нужно отобразить
<% } %>

Объявления (например, функция)

<% function renderValueInTag(value, tag) { %>
<<%= tag %>>
<%- value %>
</<%= tag %>>
<% } %>

Вызов функции из клиентского скрипта

С помощью конструкции <%= Scripts %>.ИМЯ_ФУНКЦИИ() из виджета Код можно вызывать клиентский скрипт, созданный на языке TypeScript и добавленный в дизайнере интерфейсов на вкладке Скрипты.

Например, при нажатии кнопки Открыть будет исполнен скрипт с наименованием OpenPopup().

<button onclick="<%= Scripts%>.OpenPopup()">Открыть</button>

Работа с изображениями в виджете «Код»

Вы можете использовать виджет Код для отображения изображений, например, графиков, схем или иконок. Для этого в дизайнере интерфейсов на вкладке Файлы добавьте изображение с помощью кнопки Создать. Затем ссылку на загрузку этого файла укажите в теге <img>, прописав его в настройках виджета Код. Образец кода:

<img src="скопированная_ссылка_на_загрузку_файла">

Пример использования ссылки на загрузку файла в виджете

 
Допустим, на странице нужно отобразить следующую схему:

code-widget-2

Для этого:

  1. Перейдите в дизайнер интерфейсов и на вкладке Файлы загрузите изображение с помощью кнопки Создать.
  2. Наведите курсор на загруженное изображение и нажмите значок interface-designer-6. Ссылка на скачивание файла скопируется в буфер обмена.
  3. Перейдите на вкладку Шаблон и разместите виджет Код на поле для моделирования.
  4. В открывшемся окне настроек виджета Код добавьте скопированную ранее ссылку на скачивание файла в тег <img>:

<img src="скопированная_ссылка_на_скачивание_файла">

  1. Сохраните настройки виджета и опубликуйте страницу.

Теперь при её открытии пользователи увидят загруженное изображение.

 

Отображение других виджетов через виджет «Код»

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

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

В этом случае, настраивая страницу с помощью виджета Код, в контекстном меню скрипта выберите опцию Добавить виджет. Затем в открывшемся окне выберите виджет, который хотите использовать. Вставка с текстом кода автоматически добавится в скрипт.

Пример вставки для отображения пользовательского виджета:

<%= UI.widget.render('@custom_widget', {title: Context.data.title, notes: "Примечание"}) %>

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

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

Установить двустороннюю связь для параметров пользовательского виджета

Начиная с версии системы 2026.4 с помощью виджета Код можно отобразить пользовательский виджет, параметры которого связаны с текущим контекстом, и применить прямую передачу значений между двумя контекстами.

Для этого в настройках сопоставления параметров используется опция установки двусторонней связи. Она позволяет сформировать вставку кода:

  • для выходного параметра — чтобы напрямую передавать его значение в связанную переменную текущего контекста. Если опцию не применить, значение выходного параметра не будет передано;
  • для входного параметра — чтобы напрямую передавать изменённые данные в контекст отображаемых виджетов. При этом перерисовка содержимого виджета Код не будет выполняться. Используйте опцию при создании сложного интерфейса, перерисовка которого может быть заметна для пользователя.

Рассмотрим пример настроек для выходного параметра Сумма в пользовательском виджете Калькулятор. В этом виджете выполняется вычисление операции и результат передаётся в контекст страницы. Пользователь видит результат на странице в поле Сумма.

Чтобы добавить виджет Калькулятор на страницу:

  1. В шаблоне страницы разместите виджет Код.
  2. В контекстном меню скрипта используйте опцию Добавить виджет и выберите виджет Калькулятор. Отобразится окно сопоставления входных и выходных параметров пользовательского виджета.
  3. Для каждого параметра укажите переменную из контекста страницы. Если сопоставление задано, справа от параметра появится значок двух стрелок — опция установки двусторонней связи.

code-widget-3

  1. Для выходного параметра Сумма включите опцию установки двусторонней связи. Цвет значка изменится на красный и сгенерируется код вида:

   <%= UI.widget.render('namespace@some_widget', {
        field1: { path: ['item', 'field1'] },
    }) %>

  1. Сохраните настройки в окне сопоставления параметров. Нужные значения автоматически подставятся в сгенерированный код. Результат вычисления запишется в контекст страницы.

 

Настройка стилей с помощью виджета «Код»

В виджете Код можно задать CSS‑стили, которые определяют внешний вид элементов интерфейса.

Важно: рекомендуем использовать вместо виджета Код редактор стилей, так как в нём предусмотрены изоляция, автодополнение, проверки на ошибки. Все доступные варианты определения внешнего вида виджетов описаны в статье о способах настройки стилей.

Рассмотрим, как с помощью виджета Код настроить для надписи на форме рамку, отступы и цветной фон:

  1. В настройках виджета Надпись перейдите на вкладку Системные и добавьте в поле HTML классы пользовательский класс, допустим label-style.
  2. Вынесите на форму виджет Код, добавьте элемент <style> и задайте в нём стили для класса label-style. Рекомендуем вместо фиксированных значений свойств использовать дизайн‑токены, чтобы сохранять единообразие стилей во всех частях системы:

<style>
    .label-style {
        border: solid;
        padding: var(--el-b-spacing-2x);
        background: var(--el-b-color-background-success-soft)
} 
</style>

  1. Сохраните настройки.

Отображение значения из скрипта через виджет «Код»

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

виджет код пример

Скрипт

async function onInit():Promise <void> {
    // Получаем список пользователей
    const users = await System.users.search().size(10000).all()
    // Выбираем пользователей с ДР в текущем месяце
    const thisMonthUsers = users.filter (f=>f.data.birthDate && f.data.birthDate.month == new TDate().month)
    // Записываем пользователя и дату рождения в таблицу
    for (let user of thisMonthUsers) {
        const row = Context.data.currentMonth!.insert()
        row.user = user!
        row.birthDate = user.data.birthDate!.format("DD/MM/YYYY")  
    }
    // Сохраняем таблицу в контекстную переменную
    Context.data.currentMonth = Context.data.currentMonth
}

Для вывода значения контекстной переменной в виджете Код, используйте вставку вида:

<%= UI.widget.contextValue ('currentMonth', {readonly:true}) %>

При этом currentMonth — это контекстная переменная типа Таблица, в которую с помощью функции onInit() записаны пользователи с днями рождения в текущем месяце. Функция выполняется, когда пользователь открывает страницу.

Подробнее о методах вывода в виджете Код можно прочитать в справке ELMA365 TS SDK в статьях «API для отображения стандартных виджетов» и «Виджет „Код“».

counter.html text_widget.html