Code

The Code widget allows you to work with HTML code. For example, you can highlight form elements or display data from BRIX 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.

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

Using Global or Namespace constants in scripts restricts the export of system components. Read more about it in the Global constants in scripts article.

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

Add the widget

To configure the widget, drag it from the right-side panel of the interface designer to the canvas or click +Widget.

In the pop-up window, configure the widget settings:

  1. On the General tab, generate the HTML code using special  syntax constructions.
    code_wdgt
  2. In the Additional tab, configure the widget's display:
    code-widget-1
  • Content redraw. Determine when to refresh the widget's data:
    • On value change. Enabled by default.
    • On value change end.
    • Never. Use this option if you want to refresh the content using a script.
  • Hide contents in the builder mode. Enable this option to display a short description in the widget template instead of the code, and then enter the text.

Syntax constructions

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

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

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

3. <%= Unescaping of HTML characters %>. For example, if 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 %>>
<% } %>

Call a function from the client script

You can use the <%= Scripts %>.FUNCTION_NAME() construction in the Code widget to call a client script written in TypeScript and added on the Scripts tab of the interface designer.

For example, clicking the Open button will start the OpenPopup script.

<button onclick="<%= Scripts%>.OpenPopup()">Open</button>

Work with images in the Code widget

You can use the Code widget to display images, such as graphs, diagrams, or icons. To do this, add an image in the Files tab of the interface designer using the Create button. Then, add the download link for this file in the <img> tag, which you can specify in the Code widget settings. Code example:

<img src="copied_file_download_link">

Example of using a file download link in a widget

 
Let's say you want to display the following image on a page:

elma365-on-premises-2

To do this:

  1. Go to the interface designer and, on the Files tab, upload an image using the Create button.
  2. Hover over the uploaded image and click the copy-file-link-icon icon. The download link for the file will be copied to the clipboard.
  3. Go to the Template tab and place the Code widget on the modeling canvas.
  4. In the Code widget settings window that opens, add the previously copied file download link to the <img> tag:

<img src="copied_file_download_link">

  1. Save the widget settings and publish the page.

Now, when users open the page, they will see the image.

Displaying other widgets using the Code widget

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 its 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 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 or 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.

Set two-way binding for custom widget parameters

Starting with system version 2026.4, you can use the Code widget to display a custom widget whose parameters are bound to the current context and directly pass values between the two contexts.

 

To do this, use the option for a two-way binding in the parameter mapping settings. This allows you to create a code insertion:

 

  • For an output parameter to directly pass its value to the bound variable of the current context. If you do not use this option, the value of the output parameter will not be passed.
  • For an input parameter to directly pass changed data to the context of the displayed widgets. In this case, the Code widget will not redraw its contents. Use this option when creating a complex interface whose redrawing may be noticeable to the user.

Let's look at an example of the settings for the Amount output parameter in a custom Calculator widget. In this widget, an operation is calculated and the result is passed to the page context. The user sees the result on the page in the Amount field.

To add the Calculator widget to a page:

  1. Place the Code widget in the page template.
  2. In the script's context menu, use the Add Widget option and select the Calculator widget. A dialog box for mapping the input and output parameters of the custom widget will be displayed.
  3. For each parameter, specify a variable from the page context. If mapping is established, a two-arrow icon will appear to the right of the parameter — an option to set up a two-way mapping.
    code-widget-3
  4. For the Amount output parameter, enable the two-way mapping option. The icon will change to red, and code will be generated in the following format:

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

  1. Save the settings in the parameter mapping dialog box. The required values will be automatically substituted into the generated code. The calculation result will be written to the page context.

Configure styles using the Code widget

You can use the Code widget to define CSS styles that control the appearance of interface elements.

Important: We recommend using the style editor instead of the Code widget, as it provides style isolation, autocompletion, and error checking. For an overview of all available ways to customize widget appearance, see the article about applying styles.

The following example shows how to use the Code widget to add a border, padding, and a colored background to a label on a form:

  1. In the Label widget settings, open the System tab and add a custom CSS class to the HTML classes field, for example, label-style.
  2. Add the Code widget to the form, insert a <style> element, and define the styles for the label-style class. We recommend using design tokens instead of hard-coded CSS property values to keep the interface styling consistent throughout the system:

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

  1. Save the settings.

Display a value from a script via the Code widget

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.

CW2

Script

async function onInit( :Promise <void> {
   // Get list of users
  const users = await System.users.search().size(10000).all()
   // Select users with birthdays in the current month
  const thisMonthUsers = users.filter (f=>f.data.birthDate && f.data.birthDate.month == new TDate().month)
   // Add user and date of birth to the table
  for (let user of thisMonthUsers) {
      const row = Context.data.currentMonth!.insert()
       row.user = user!
       row.birthDate = user.data.birthDate!.format("DD/MM/YYYY")  
   }
   // Save table to context variable
   Context.data.currentMonth = Context.data.currentMonth
}

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 widgets and API for client scripts in TS SDK.

counter.html text_widget.html