# Code

> [HTML Version](code_widget.html)

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](client_server_scripts.md) to a form or a page, as well as create [dynamic](360029574371.md) task and app forms.

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

````
Using \[OBJECT\] or \[OBJECT\] constants in scripts restricts the export of system components. Read more about it in the [Global constants in scripts](global-constants.md#export) article.

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

## ````
Add the widget

To configure the widget, drag it from the right-side panel of the [interface designer](interface_designer.md) 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.PNG)**

2. In the **Additional** tab, configure the widget's display:  
**(code-widget-1.png)**

- **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. **\[OBJECT\]. See the examples below.

**2. **\[OBJECT\]. For example, if the value is preceded by the **<** character, it will be represented as **<**.

**3. **\[OBJECT\]. For example, if the value is \[OBJECT\],  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 \[OBJECT\] construction in the **Code** widget to call a client script written in TypeScript and added on the [Scripts](designer-tabs.md#scripts) tab of the interface designer.

For example, clicking the Open button will start the \[OBJECT\] 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](designer-tabs.md#download-link) 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.png)

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.png)** 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">

5. ````
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](#redrawing). 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](user-widgets-context.md) 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.png)

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'\] \},  
    \}) %>

5. ````
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](style-editor.md) 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](apply-styles.md).

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](design-tokens.md) 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>

3. ````
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.png)**

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 \[OBJECT\] is a context variable of the **Table** type. Users who have birthday in the current month are added to the table via the \[OBJECT\] 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](https://tssdk.brix365.com/en/interfaces/_102_ui_widgets_.widget.html) and [API for client scripts](https://tssdk.brix365.com/en/modules/_102_ui_widgets_.html) in TS SDK.