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

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

Виды вставок

В данном виджете используется синтаксис, позволяющий делать вставки 3 видов:

1. <% Конструкции, объявления %>. Примеры будут рассмотрены ниже.

2. <%- Вывод значения с экранированием HTML-символов %>. Например, если в значении встречается знак «<», то в таком виде он и будет выведен.

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

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

Условия

<% if (data.Value > 10) { %>

Здесь содержимое, которое нужно отобразить.

<% } %>

Циклы

<% for (const item of data.items) { %>

Здесь содержимое, которое нужно отобразить.

<% } %>

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

<% function renderValueInTag(value, tag) { %>

<<%= tag %>>

<%- value %>

</<%= tag %>>

<% } %>

Пример