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.
Adding a component to a view
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.
Example Properties
Data:
[
    {"id":1,"first_name":"Jenine","last_name":"Beavors","email":"[email protected]"},
    {"id":2,"first_name":"Maggie","last_name":"Pearl","email":"[email protected]"},
    {"id":3,"first_name":"Trenna","last_name":"Thorouggood","email":"[email protected]"},
    {"id":4,"first_name":"Adlai","last_name":"Still","email":"[email protected]"},
    {"id":5,"first_name":"Sunshine","last_name":"Camilletti","email":"[email protected]"}
]
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.
A Plotly chart component
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"
    }
  ]
}
A simple bar chart
APPLICATIONS - Previous
Views
Bindings
Last modified 5mo ago