List of components

Components are JSON objects that you can use when creating an interface in the template builder. For example, use them to add an image, button, or action.

The name of the component is specified in the type property in the format: <category>.<name>. Each component has its own set of acceptable properties described in detail on the component's page.

Categories:

  • data: Components used for working with data: input, output, or intermediate.

  • layout: Options for positioning elements in the interface, such as in columns or side-by-side. If you have more than one element in the interface, these components will help you arrange them the way you want.

  • view: Elements displayed in the interface, such as text, list, audio player, or image.

  • field: Fields for entering data, such as a text field or drop-down list.

  • condition: Check an expression against a condition. For example, you can check that a text field is filled in.

  • helper: Perform various operations, such as if-then-else or switch-case.

  • plugin: Plugins that provide expanded functionality. For example, you can use plugin.hotkeys to set up shortcuts.

  • action: Perform various actions, such as showing notifications.

Note: Some components are context-specific. For example, you can only use plugins in the root plugins element. You can see the available components in the editor tooltips when you press the Tab key.

Element layouts

  • layout.bars. A component that adds top and bottom bars to the content.

  • layout.columns. A component for placing content in columns.

  • layout.side-by-side. The component displays several data blocks of the same width on a single horizontal panel.

  • layout.sidebar. Lets you place the main content block and an adjacent panel with controls on a page.

Displayed elements (views)

Data entry elements (fields)

  • field.button-radio. A component in the form of a button.

  • field.button-radio-group. A component with buttons that allow the user to choose between the specified values.

  • field.checkbox. Checkbox.

  • field.checkbox-group. A group of options for selecting one or more responses.

  • field.date. A component for entering the date and time in the desired format and range.

  • field.email. Creates a field for entering an email address.

  • field.file. This component can be used for uploading files. It's displayed in the interface as an upload button.

  • field.image-annotation. Adds an interface for selecting areas in images.

  • field.list. A component that allows the user to add and remove list items, such as text fields to fill in. This way you can allow the user to give multiple answers to a question.

  • field.media-file. Adds buttons for different types of uploads: uploading photos or videos, selecting files from the file manager or choosing from the gallery.

  • field.number. A component that allows you to enter a number.

  • field.phone-number. Creates a field for entering a phone number.

  • field.radio-group. A component for selecting one value out of several options. It is designed as a group of circles arranged vertically.

  • field.select. Button for selecting from a drop-down list. Use this component when the list is long and only one option can be chosen.

  • field.text. A component that allows entering a single line of text.

  • field.textarea. Box for entering multi-line text.

Helpers

  • helper.concat-arrays. Merging multiple arrays into a single array.

  • helper.entries2object. Creating an object from a specified array of key-value pairs.

  • helper.if. The If...Then...Else operator. Allows you to execute either one block of code or another, depending on the condition.

  • helper.join. The component combines two or more strings into one. You can add a delimiter to separate the strings, such as a space or comma.

  • helper.object2entries. Creating an array of key-value pairs from the specified object.

  • helper.replace. Allows you to replace some parts of the string with others.

  • helper.search-query. Component for creating a string with a search query reference.

  • helper.switch. A switch-case construction: sequentially checks the conditions and executes the code when the condition turns out to be true.

  • helper.text-transform. Allows you to change the case of the text, like make all letters uppercase.

  • helper.transform. Creates a new array by transforming each of the elements in the original array.

  • helper.proxy. You can use this component to download files from Yandex.Disk.

Conditions

Plugins

  • plugin.hotkeys. Lets you set keyboard shortcuts for actions.

  • plugin.toloka. A plugin with extra settings for tasks in Toloka.

  • plugin.trigger. Use this to configure triggers that trigger a specific action when an event occurs.

Actions

  • action.bulk. Use this component to call multiple actions at the same time.

  • action.notify. The component creates a message in the lower-left corner of the screen.

  • action.open-close. Changes the display mode for another component — opens or closes it.

  • action.open-link. Opens a new tab in the browser with the specified web page.

  • action.play-pause. This component controls audio or video playback. It stops playback in progress or starts if it is stopped.

  • action.rotate. Rotates the specified component by 90 degrees.

  • action.set. Sets the value from payload in the data in the data property.

  • action.toggle. The component changes the value in the data from true to false and vice versa.