Bindings

Reference components and information with a {{}} tag.

Bindings connect data across your view's components, worklets, and data queries. Bindings can access data from:

• Component fields (like the value of a text input)

• Worklets

• Data queries

• Functions

• URL parameters

Bindings get updated automatically when their inputs change.

Binding syntax

To reference a binding, use the binding tag syntax: two sets of curly braces {{binding_name}}. You can also refer to nested values inside of bound resources with dot syntax. For example: {{binding_name.propertyName}}

To set a binding:

1. Type {{ and the list of possible bindings in your scope will appear

2. Click an option or start typing to select a binding

3. Close the binding tag with the tab key (or type }})

Data explorer

The "Data explorer" panel in the bottom-right corner of the view builder shows data available to be referenced by a binding.

Functions

From the "Explorer" menu in the bottom-right corner of the view builder, you can create a function. By default, functions run Python, but you can select JavaScript from the dropdown menu.

Give your function a meaningful name by clicking on its name in the header of the function properties sidebar. Functions are available to components and other functions. If you call your function numApples, you can reference it in components with the double-curly-braces syntax {{numApples}}.

Python

Your Python function must end in a return statement:

return 20

Your Python functions can access any packages included in the runtime, such as built-in packages like os and common Python packages like requests. Here's an example with numpy:

import numpy as np

return np.random.rand()

JavaScript

While Python is the default language for writing functions, you can also write functions in JavaScript. Just use the dropdown above the function code editor to change language.

Like with Python, you are already inside a function, so you can just return a value. The following is valid:

return "10 Apples!"

Also valid is a more complex code snippet with its own functions:

function howMany() {
    return "Hello"
}

function whatFruit() {
    return "World"
}

return `${howMany()} ${whatFruit()}!`

Parameters

Your function can use other functions, state, worklets, or component values with a parameter. Remember, the code box above executes the code as a function, parameters are how you pass arguments into that function. Once you create the parameter as a key-value pair, the key will become a function scoped to your function. Parameters can also have a fixed value like a string or integer.

Functions are re-run every time the value of one of their parameters changes.

In the below example, num is hardcoded while appleType passes through the value of a text input. The resulting string is shown in a text box by referencing the function {{numApples}}.

return `${num} ${appleType} apples`

Temporary state

Baseten provides a mutable key-value store that developers can use to create stateful application. This can be used for sharing values between components, or for keeping track of temporary variables as users interact with views.

From the "Explorer" menu in the bottom-left corner of the view builder, you can see current state.

Currently, everything in state is treated as a string. We will soon change that to appropriately parse valid JavaScript.

URL parameters

URL parameters read information from the page's link. In the url https://example.com?apples=10&type=honeycrisp, apples and type are URL parameters with the values 10 and honeycrisp, respectively.

URL parameters are a flexible form of application state that exists on its own little dimension. URL parameters can add data to what is otherwise a GET request, transfer state between users, track user activity across domains, and more. For example, you could use a URL parameter to pass information when navigating the user to a different view.

Worklet results

Call a worklet and display its result.

Add parameters to your worklet invocation with the parameter menu. The key-value pairs will be packaged as JSON to input into your worklet.

Data queries

Run a query and display its output. This is especially useful for populating tables.

Add parameters to your query with the parameter menu. To use this feature, the query must support parameters.

Component fields

Fields are the values outputted by components, like the current contents of a text input or selected row of a table. The data explorer shows the values of all available fields, grouped by component.

You can copy the value of each component with the copy button to use as input elsewhere, which is particularly useful for testing and debugging.