Main docs

Components

Components are the building blocks of your application's user interface.

Components are the building blocks of your application's user interface. Each view is composed of configurable UI components. Components can be dragged and arranged into the desired layout on the canvas.

Adding components

Adding components to a view is simple. Click and drag a component from the menu to the desired location within your application.

Made a mistake? No problem. Just use Command-z (Control-z on Windows) to undo your change. You can re-do with Command-shift-z (Control-shift-z on Windows).

After adding a component, you can edit its name in the heading of the "properties" panel.

Component reference

Each component has a set of configurable properties to make them fit within your application.

Many components support bindings

Heading

Add titles and section headers to your application.

Properties:

  • Heading text: The text displayed to the user. Supports bindings.

  • Heading level: From h1 to h6, a selection of sizes and font weights matching standard HTML heading levels.

Callout

Draw attention to an important piece of text.

Properties:

  • Callout label: The title text of the callout. Supports bindings.

  • Callout text: The body of the callout. Supports bindings.

  • Intent color: Select an intent to change the color and icon of the callout to match its purpose.

Text block

Write a single line or a dozen paragraphs, styled with Markdown.

Properties:

  • Show border: Toggle whether or not a border is shown around the text block.

  • Body: The body of the text block. Supports bindings and Markdown.

Image

Embed an image from anywhere on the internet.

Properties:

  • Show header: Toggle whether or not header text is shown above the image.

  • Header text: Optional text to show above the image. Supports bindings.

  • Image URI: The source address of the image. Supports bindings.

  • Object fit: Select an option to change how the image is displayed in the available space.

  • Empty state placeholder: The text to show when an image is not yet available. Supports bindings.

Base64 encoding: If you need to display an image outputted by a worklet, you can use Base64 encoding. For example, if you have the image in png format, you can use Python's b64encode function to encode the data, then set the image URI to data:image/png;base64, (including the comma) followed by the Base64-encoded data.

Media

Embed a video from a source like YouTube.

Properties:

  • Show header: Toggle whether or not header text is shown above the media.

  • Header text: Optional text to show above the media. Supports bindings.

  • Media URI: The source address to the media. Supports bindings.

  • Seek to time: Optional, how many second to jump ahead in the embedded media

Divider

A divider adds visual space between components.

Dividers have no configurable properties.

Button

Give users something to click to make stuff happen.

Properties:

  • Label: The button's text. Supports bindings.

  • Intent color: Select an intent to change the color of the button to match its purpose.

  • Disabled: By default, buttons are enabled, but if you enter true or a "truthy" value like 1 in the field, the button will be disabled. Supports bindings (so the button can be conditionally disabled).

Checkboxes

Select multiple values from a list.

Properties:

  • Show header: Toggle whether or not header text is shown above the checkboxes.

  • Header text: Optional text to show above the checkboxes. Supports bindings.

  • Show border: Toggle whether or not a border is shown around the checkboxes.

  • Options: A list of dictionaries with a label and value, one per checkbox.

  • Initial value: The options that should be pre-selected on page load.

Example properties

Options:

[{"label": "Avocado", "value": "avocado"},
{"label": "Cabbage", "value": "cabbage"},
{"label": "Apple", "value": "apple"},
{"label": "Orange", "value": "orange"}]

Filepicker

Allow operators to upload one or multiple files.

Properties:

  • Input label: Optional text to show above the filepicker. Supports bindings.

Microphone

Allow operators to record and upload audio.

Properties:

  • Input label: Optional text to show above the microphone. Supports bindings.

Radio buttons

Select a single option from a list.

Properties:

  • Show header: Toggle whether or not header text is shown above the radio buttons.

  • Header text: Optional text to show above the radio buttons. Supports bindings.

  • Show border: Toggle whether or not a border is shown around the radio buttons.

  • Options: A list of dictionaries with a label and value, one per radio button.

  • Initial value: The option that should be pre-selected on page load.

Example properties

Options:

[{"label": "Toyota Camry", "value": "toyota_camry"},
{"label": "Honda Accord", "value": "honda_accord"},
{"label": "Ford Mustang", "value": "ford_mustang"},
{"label": "Tesla Model X", "value": "tesla_model_x"}]

Range

Select a numeric range.

Properties:

  • Label: The title text for the range. Supports bindings.

  • Minimum value: The lowest possible value for the range.

  • Maximum value: The highest possible value for the range.

  • Initial lower value: The value that the low end of the range is set to when the page loads.

  • Initial upper value: The value that the high end of the range is set to when the page loads.

  • Increment: The amount by which the range counts up.

  • Show marks: Toggle whether or not increment marks are shown on the range.

Select

Select an option from a dropdown menu.

Properties:

  • Label: The title text for the select field. Supports bindings.

  • Initial value: The value of the option to have selected when the page loads.

  • Disabled: By default, select fields are enabled, but if you enter true or a "truthy" value like 1, it will be disabled. Supports bindings (so it can be conditionally disabled).

  • Allow option creation: Toggle whether or not the select field allows operators to specify custom options.

  • Options: A list of dictionaries with a label and value, one per select option.

Example properties

Options:

[{"label": "Option 1", "value": "option1"},
{"label": "Option 2", "value": "option2"}]

Slider

Select a number from a range.

Properties:

  • Label: The title text for the slider. Supports bindings.

  • Minimum value: The lowest possible value for the slider.

  • Maximum value: The highest possible value for the slider.

  • Initial value: The value that the slider is set to when the page loads.

  • Increment: The amount by which the slider counts up.

  • Show marks: Toggle whether or not increment marks are shown on the slider.

Text input

Accept text input, even if it's a cat walking across the keyboard.

Properties:

  • Input label: The label for the text input field. Supports bindings.

  • Placeholder text: The text displayed to the user as a prompt when the input is empty. Supports bindings.

  • Initial value: The value populated in the text input when the page loads.

Text area

Accepts multiple lines of text input.

Properties:

  • Input label: The label for the text input field. Supports bindings.

  • Placeholder text: The text displayed to the user as a prompt when the input is empty. Supports bindings.

  • Initial value: The value populated in the text input when the page loads.

Table

Display tabular data in an interactive format.

Properties:

  • Show header: Toggle whether or not header text is shown above the table.

  • Header text: Optional text to show above the table. Supports bindings.

  • Show border: Toggle whether or not a border is shown around the table.

  • Paginate rows: Toggle whether or not the table is paginated.

  • Data: The source for the table's data formatted in JSON as an array of objects. Supports bindings; this is likely to be a query or worklet result.

Row-specific bindings in tables

When creating bindings within a table, you might want to pass row-specific data.

For example, let's say you've created a table of websites with information like the site's name, URL, and popularity. You want to add a column of buttons to the table, where each button opens the website in its row. To do that, you'd set the button's event handler to go to a URL, then assign it the following binding:

{{myTable.selectedRow.url}}

This would pass the appropriate row's URL to each button.

#### Example properties

Data:

[
    {"id":1,"first_name":"Jenine","last_name":"Beavors","email":"jbeavors0@hp.com"},
    {"id":2,"first_name":"Maggie","last_name":"Pearl","email":"mpearl1@prlog.org"},
    {"id":3,"first_name":"Trenna","last_name":"Thorouggood","email":"tthorouggood2@dion.ne.jp"},
    {"id":4,"first_name":"Adlai","last_name":"Still","email":"astill3@webeden.co.uk"},
    {"id":5,"first_name":"Sunshine","last_name":"Camilletti","email":"scamilletti4@de.vu"}
]

JSON viewer

Display JSON in an easy-to-read, collapsible format.

Properties:

  • Show header: Toggle whether or not header text is shown above the JSON viewer.

  • Header text: Optional text to show above the JSON viewer. Supports bindings.

  • Show border: Toggle whether or not a border is shown around the JSON viewer.

  • Data: The JSON to be rendered. Supports bindings.

Example properties

Data:

{"team":[{"name":"Kenichi"},{"name":"Ippei"}]}

Image gallery

Embed multiple images from anywhere on the internet in a flexible layout.

Properties:

  • Show Header: Toggle whether or not header text is shown above the image.

  • Header text: Optional text to show above the image gallery. Supports bindings.

  • Show border: Toggle whether or not a border is shown around the image gallery.

  • Columns: How many columns to split the gallery across. Minimum of one, maximum of the number of images in the gallery.

  • Images: A list of key-value pairs {"url": "https://example.com/image"} linking to the images.

The image gallery also supports Base64-encoding.

Example properties

Images:

[
    {"url": "https://images.unsplash.com/photo-1648309626651-9122794c8a10?q=40&w=800"},
    {"url": "https://images.unsplash.com/photo-1648185924326-20ebc958c4aa?q=40&w=800"},
    {"url": "https://images.unsplash.com/photo-1648222604786-8e80813db112?q=40&w=800"},
    {"url": "https://images.unsplash.com/photo-1640622300930-6e8daa98536f?q=40&w=800"},
    {"url": "https://images.unsplash.com/photo-1648229010023-137a95b87903?q=40&w=800"},
    {"url": "https://images.unsplash.com/photo-1648138754712-999480887c0a?q=40&w=800"}
]

Plotly chart

Plotly is a popular, cross-language library for creating powerful visuals like charts and graphs. You can learn more about the types of visuals you can create at plotly.com.

Properties:

  • Show border: Toggle whether or not a border is shown around the chart.

  • Title: Optional text to show above the chart. Supports bindings.

  • Chart data: The source for the chart's data. Supports bindings; this is likely to be a query or worklet result.

Examples

A simple bar chart:

{
  "data": [
    {
      "x": ["giraffes", "orangutans", "monkeys"],
      "y": [20, 14, 23],
      "type": "bar"
    }
  ]
}
PreviousViewsNextBindings

Last updated