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.
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 %>>
<% } %>
By using a script in the Code widget you can get data from the Employees app in order to display the information on the upcoming birthdays on the page. |