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. To learn more, see Form templates. In the pop-up window you can add HTML code 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 syntax constructions of the first type:
Conditions
<% if (data.Value > 10) { %>
Content that you want to display.
<% } %>
if-else
<% if (true) { %>
Content that you want to display.
<% } else { %>
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 %>>
<% } %>
4. Constructions for displaying a widget added via context menu
In your code, you can add syntax constructions to display custom or some of the system widgets via the context menu. This way you will not need to write the code of the construction manually. This method is extremely useful for reusing widgets.
Let's say you need to set up a page for viewing a product. On the page, you place an image of the product, add a price and links to it's technical characteristics. You also want to use other widgets with information about similar products on the same page. This means that you can reuse the widget that is already used for the first product.
Here is what you can do: when setting up the page using the Code widget, in the script's context menu select Add widget. Then, in the pop-up, select the widget that you want to reuse. The syntax construction will be automatically added to your script.
Here is an example of such a construction for displaying a custom widget:
<%= UI.widget.render('@custom_widget', {title: Context.data.title, notes: "Description"}) %>
The following widgets can be reused in this manner: Tabs, Drop-down menu, Pop-up, Panel with header, and custom widgets created within the same app/workspace as the form or page that you are setting up. That is, when working with the Code widget on a workspace's page, you can use the Add widget option to add custom widgets created in the same workspace or on forms and pages of its apps.
You can enable access to custom widgets that belong to other workspaces. To do that, click Settings in the top pane of the interface designer and select Allow using all items. Please note that in this case you will not be able to export the app or workspace later.
Use case
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.
async function onInit():Promise <void> { |
To show the value of the context variable in the Code widget, use the following syntax:
<%= UI.widget.contextValue ('currentMonth', {readonly:true}) %>
Note that currentMonth is a context variable of the Table type. Users who have birthday in the current month are added to the table via the OnInit() function. This function is executed when a user opens the page.
To learn more about methods in the Code widget see API for displaying standard wigets and API for client scripts in TS SDK.
Found a typo? Highlight the text, press ctrl + enter and notify us