Views are made up of components. Think of them as UI components that can be configured with user-defined parameters. UI components can be arranged in whatever layout creators would like, and can communicate with other components using state.

Component Types

  • Display
    • Heading — define a title for the view or section.
    • Text block — provide instructions or helper text to users.
    • Image — display an image or animated GIF.
  • Form elements
    • Form — build a group of inputs with a submit button.
    • Text input — collect a single input from users.
    • Dropdown — collect a single choice from users.
    • Button — allow users to trigger an action.
    • Comments — enable dialog between multiple users.
  • Data
    • Table — display data in the form of a standard table.
    • Key-value map — display mappings of keys and values.
    • JSON viewer — display JSON blobs.
    • Card gallery — display data in the form of cards.
  • Charting
    • Bar chart — display a standard bar chart.
    • Pie chart — display a standard pie chart.
    • Line chart — display a standard line chart.
    • Plotly chart — display a Plotly.js chart.

Adding Components

Adding components to a view is simple. Click the add component button on the right, and choose the component you want to add. By default, the component will be added to the bottom of the canvas. Components can be moved around and resized on the canvas by interacting directly with them.
Adding a component to a view

Configuring Components

Components are defined by their attributes. Attributes are configured in the right sidebar and can be set to one of four types of values:
  • Static — constant values. Values will be passed through to the component as inputted by the creator.
  • Function — dynamic values. The creator's input will be evaluated as multiline JavaScript. Within this code, you can reference JavaScripts but also BaseTen provided data:
    • children — references to data from all the components on the page. You can use this to access values in text inputs, or the selected row from a table.
    • state — mutable data fields that change as the user interacts with the application
    • data — query or worklet data that has already been attached to the view
  • Query — direct references to queries. Once you select a query, you can also configure parameters of that query. The configured queries will be added as data sources to the view.
  • Worklet — direct references to worklets. Once you select a worklet, you can also configure the parameters of that worklet. The configured worklets will be added as data sources to the view.
Configuring components
Last modified 6mo ago