Hire WorkforcePython SDKRequest DemoDocumentation
Documentation
Start typing to search…

Building a UI

You can build a custom annotation/evaluation interface in two ways:

  1. Drag-and-Drop UI Form Builder – An interactive canvas for placing components.
  2. UI Form JSON File – A scriptable approach where you upload a JSON definition of the form layout and properties.

Either method yields the same result: a structured layout of components that can be dynamically updated and extended with custom code.

📘

Tip

You can save or export your form as a JSON template at any time. This makes it easy to reuse or share layouts across multiple projects.

Properties

This is the builder that you'll use to create your Multimodal form. The builder is separated into two sections that will help you build and edit your form based on your project's requirements. After creating the project, you may build a custom form from scratch or select from a number of available templates. Building the form involves the use of various UI components and their customized functionality, which can be defined through the Code Editor.

Outline of the UI builder

The UI Builder is divided into three main areas:

  1. Components Panel
    • A library of available UI elements grouped by category (Layout, Button, Input, Select, Media and Custom).
    • You drag these components onto the canvas to add them to your interface.
  2. Canvas
    • The visual workspace where you assemble the user interface.
    • Divided into two main sections:
      • Header: Often used for project titles, instructions, or important project-wide elements.
      • Body: The main area where annotators or reviewers will interact with form components.
  3. Properties Panel
    • Displays the configurable properties for the currently selected component.
    • Here, you set attributes such as component ID, default value, permissions, styling, etc.

General properties

​​There are multiple components available in the UI Builder. Each component on the UI should have its own unique ID that is auto-generated, but can be changed to a more defining value. You should keep in mind that there are a few reserved IDs that can’t be used for any component, and these are: _item_name, _item_category, and _folder.

The rest of the component’s properties are divided into sections: Content, Settings, Visibility, and Format.

Content

You can manage and control the component’s main properties here. This includes its values and composition.

Settings

You can manage and fine-tune a component’s settings to make sure it looks and behaves the way you want. These settings include things like component positioning, sizing, value ranges or limitations, whether or not to exclude it from the export JSON, and whether or not the component is required to be fulfilled before an item is completed.

Visibility


















You can modify the permissions on each individual component (except Grid) so that they can either be Hidden or View only. You can select one or multiple roles and statuses that this setting is applicable to, including any custom ones available in your project. This can be done when defining the properties of the component.

If there are multiple components that you want to have the same Visibility permissions for, you can copy the settings of one component and paste it onto another. You can do this by clicking the respective buttons to Copy (or Alt + Ctrl + C) the permissions, and Paste (or Alt + Ctrl + V) them.

Format

Some components will give you the option to format their appearance. This includes background styles, title styles, and button styles.

README

You can create a README file for your project’s form while in the UI builder. This README file will be visible any time this project’s form is opened in the builder and can be accessed from the top-right corner. You can use it to include any important or key bits of information about your project and form.

To create a README file:

  1. Enter the project’s form builder either during project creation or from the project’s settings.
  2. In the top right, click the README button.
  3. Type in all the information you want to include.
  4. When you’re done, click Apply.
  5. Click Next in the top-right corner.
  6. Click Publish (if done during project creation) or Update (if this is an existing project).

To edit a README file:

  1. Enter the project’s form builder from the settings.
  2. In the top right, click the README button.
  3. Click the Edit button.
  4. Make your changes accordingly.
  5. When you’re done, click Apply.
  6. Click Next in the top-right corner.
  7. Click Update.

Updated 2 days ago