Low-Code Designer > Setting up interfaces > Widget types > HTML Widgets / Code

Code

The Code widget allows you to work with HTML code. For example, you can highlight form elements or display data from ELMA365 and other systems on a page. In addition, with this widget you can add scripts to a form or a page, as well as create dynamic task and app forms.

To configure the widget, drag it to the canvas or click +Widget. In the pop-up window you can add HTML code to a form that is dynamically generated using special syntax constructions.

CW1

Syntax constructions

In this widget you can use syntax constructions of 3 types:

1. <% Constructions, declarations %>. See the examples below.

2. <%- Escaping of HTML characters %>. For example, if the value is preceded by the «<» sign, it will be represented as «<».

3. <%= Unescaping of HTML characters %>. For example, is the value is «<b>Attention!</b>»,  the displayed text will be Attention (in bold).

Let's have a look at the synax constractions of the first type:

Conditions

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

Content that you want to display.

<% } %>

Loops

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

Content that you want to display.

<% } %>

Declarations (for example, function)

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

<<%= tag %>>

<%- value %>

</<%= tag %>>

<% } %>

Use case