Документация Толоки

Список компонентов

Компоненты — это JSON-объекты, которые вы можете использовать при создании интерфейса в конструкторе шаблонов. Например, чтобы добавить картинку, кнопку или действие.

Имя компонента указывается в свойстве type в формате <категория>.<имя>. У каждого компонента свой набор допустимых свойств, подробно описанный на странице этого компонента.

Категории:

  • data — компоненты для работы с данными: входными, выходными или промежуточными.
  • layout — варианты расстановки элементов в интерфейсе, например колонки или side-by-side. Если у вас больше одного элемента в интерфейсе, эти компоненты помогут расставить их в правильном порядке.
  • view — отображаемые элементы интерфейса, например текст, список, аудио-плеер или картинка.
  • field — поля для ввода данных, например текстовое поле или выпадающий список.
  • condition — позволяют проверять, соответствует ли выражение какому-то условию. Например, чтобы проверить, что поле с текстом заполнено.
  • helper — позволяют выполнять различные операции, например реализовать условия if-then-else или конструкцию switch-case.
  • plugin — плагины, предоставляющие дополнительную функциональность. Например, plugin.hotkeys позволяет настроить горячие клавиши.
  • action — позволяют выполнять различные действия, например показывать уведомления.

Примечание: не все компоненты можно использовать отовсюду, например плагины можно использовать только в корневом элементе plugins. Допустимые компоненты вы можете увидеть в подсказках в редакторе при нажатии клавиши Tab.

Варианты расстановки элементов (layouts)

Component Description
layout.bars Компонент, добавляющий к контенту верхнюю и нижнюю панели.
layout.columns Компонент для расстановки контента по столбцам.
layout.compare Позволяет расставить элементы интерфейса так, чтобы сравнивать их между собой. Например, можно сравнить несколько фото.
layout.side-by-side Компонент отображает на одной горизонтальной панели несколько блоков информации одинаковой ширины.
layout.sidebar Позволяет разместить на странице блок с основным содержимым и примыкающую к нему панель с элементами управления.

Отображаемые элементы (views)

Component Description
view.action-button Кнопка, вызывающая действие.
view.alert Компонент создает цветной блок для выделения важной информации.
view.audio Компонент воспроизводит аудио.
view.collapse Разворачивающийся блок.
view.device-frame Оборачивает содержимое компонента в рамку, похожую на мобильный телефон. Внутри рамки можно расположить другие компоненты.
view.divider Горизонтальный разделитель.
view.group Объединяет любые компоненты в визуальные группы — блоки с рамкой.
view.iframe Отображает веб-страницу по URL-адресу во встроенном окне.
view.image Отображает картинку.
view.labeled-list Отображение компонентов в виде списка с подписями. Подписи располагаются слева.
view.link Универсальный способ добавить ссылку.
view.link-group Объединяет ссылки в группы.
view.list Блок для отображения данных списком.
view.map Добавляет карту к заданию.
view.markdown Блок для отображения текста в разметке Markdown.
view.text Блок для отображения текста.
view.video Плеер для воспроизведения видео.

Элементы для ввода данных (fields)

Component Description
field.audio Компонент для записи аудио. Работает в приложении Толока для мобильных. В браузере открывает окно для загрузки аудиофайла.
field.button-radio Добавляет одну кнопку. Пригодится для оформления необязательного варианта ответа.
field.button-radio-group Добавляет кнопки для выбора варианта ответа. Пригодится, если у вас несколько вариантов. Можно добавить только одну кнопку, но это легче сделать с field.button-radio.
field.checkbox Переключатель в виде галочки.
field.checkbox-group Добавляет группу переключателей с галочками для выбора независимых вариантов ответа. Пригодится, если у вас несколько вариантов. Можно добавить только один переключатель, но это легче сделать с field.checkbox.
field.date Компонент, позволяющий ввести дату и время в требуемом формате и заданном диапазоне.
field.email Создает поле для ввода адреса электронной почты.
field.file Компонент позволяет исполнителю загружать файлы. В интерфейсе отображается кнопкой загрузки.
field.image-annotation Компонент для разметки изображений.
field.list Компонент, позволяющий исполнителю самостоятельно добавлять и удалять элементы списка, например текстовые поля для заполнения. Так вы сможете разрешить исполнителю дать несколько ответов на вопрос.
field.map Добавляет карту к заданию и позволяет исполнителям делать на ней отметки.
field.media-file Добавляет кнопки для разных видов загрузки файлов: загрузить фото или видео, выбрать файлы из файлового менеджера или галереи.
field.number Компонент, позволяющий ввести число.
field.phone-number Создает поле для ввода номера телефона.
field.radio-group Компонент, позволяющий выбрать одно из нескольких значений. Оформляется в виде группы переключателей (кружочков), располагающихся вертикально.
field.select Кнопка для выбора из выпадающего списка. Используйте, когда список длинный, а выбрать нужно один вариант.
field.text Поле для ввода короткого текста, не больше одной строки. Чтобы добавить поле, где можно ввести много строк текста, используйте field.textarea.
field.text-annotation Компонент для сегментации текста.
field.textarea Поле для ввода многострочного текста.

Хелперы (helpers)

Component Description
helper.concat-arrays Объединение нескольких массивов в один.
helper.entries2object Создание объекта из заданного массива пар ключей и значений.
helper.if Оператор If...Then...Else. Позволяет выполнить либо один блок кода, либо другой, в зависимости от условия.
helper.join Компонент соединяет несколько строк в одну. Между строками можно добавить разделитель, например пробел или запятую.
helper.object2entries Создание массива пар вида ключ-значение из заданного объекта.
helper.replace Позволяет заменить одни части строки на другие.
helper.search-query Компонент создания строки со ссылкой поискового запроса.
helper.switch Конструкция switch-case: последовательно проверяет условия и выполняет код, когда условие оказывается истинно.
helper.text-transform Позволяет изменять регистр текста, например сделать все буквы заглавными.
helper.transform Создает новый массив, преобразуя каждый из элементов исходного массива.
helper.translate Компонент для перевода элементов интерфейса на другие языки. Подробнее в разделе Перевод интерфейса задания.
helper.proxy Компонент позволяет загружать файлы с Яндекс Диска.

Условия (conditions)

Component Description
condition.all Проверяет, что все дочерние условия выполняются. Если хотя бы одно условие не выполнено, компонент возвращает false.
condition.any Проверяет, что хотя бы одно из дочерних условий выполняется. Если ни одно условие не выполнено, компонент возвращает false.
condition.empty Проверяет, что данные не получили значение. Если получили — возвращает false. Пригодится, если вам нужно проверить опциональные данные шаблона (data.*) или убедиться, что исполнитель не взаимодействовал с полями ввода данных (fields.*).
condition.equals Проверяет, равно ли исходное значение указанному.
condition.link-opened Проверяет, что исполнитель перешел по ссылке.
condition.not Возвращает значение, обратное заданному условию.
condition.played Проверяет, начато ли воспроизведение.
condition.played-fully Проверяет, что воспроизведение завершено.
condition.required Проверяет, что данные заполнены.
condition.same-domain Проверяет, что введенная ссылка принадлежит определенному сайту. При совпадении вернет true, иначе — false.
condition.schema Позволяет валидировать данные с помощью JSON Schema. Это специальный формат, чтобы описывать данные в формате JSON.
condition.sub-array Проверяет, что массив является подмассивом другого элемента.
condition.distance Компонент проверяет, соответствуют ли переданные координаты заданным.

Плагины (plugins)

Component Description
plugin.field.image-annotation.hotkeys Позволяет задавать горячие клавиши для компонента field.image-annotation.
plugin.field.text-annotation.hotkeys Позволяет задавать горячие клавиши для компонента field.text-annotation.
plugin.hotkeys Позволяет задавать горячие клавиши для выполнения действий.
plugin.toloka Плагин с дополнительными настройками заданий в Толоке.
plugin.trigger Позволяет создавать триггеры: вызывать определенное действие при наступлении какого-то события.

Действия (actions)

Component Description
action.bulk Позволяет одновременно вызывать несколько действий (actions).
action.notify Компонент создает сообщение в левом нижнем углу экрана.
action.open-close Меняет режим отображения у другого компонента — открывает или закрывает его.
action.open-link Открывает в браузере новую вкладку с заданной интернет-страницей.
action.play-pause Компонент управляет воспроизведением аудио или видео. Он останавливает воспроизведение, если оно запущено, и запускает, если остановлено.
action.rotate Поворачивает указанный компонент на 90 градусов.
action.set Устанавливает значение из payload в данные в свойстве data.
action.toggle Компонент меняет значение в данных с true на false и наоборот.

Источники данных

Component Description
data.location Компонент передает координаты устройства исполнителя.