Managing State

You can use bindings to make your components reactive to data on the page.

Binding

Data binding

Each property of component that may be bound to data present on the page is surrounded by a Binding button, which you can click to initiate data binding.

You can write JavaScript expressions in the editor which opens up.

The editor will expect a return type, string for example.

The scope includes the current values of all components and queries that you have added on the page. You can use anything from within this scope to write your JavaScript expressions.

The evaluated value of the binding will be visible to you in the editor.

JS expression actions

Some components have event handler props, such as the Button component and its onClick prop which triggers when the button is clicked.

You can run arbitrary JavaScript when the event fires, including manipulating the state of other components on the page.

Navigation actions

It is also possible to navigate to a different page of the app when an event occurs.

The binding editor for navigation actions allows you to select which page to go to, as well as set values for any page parameters that the target page supports.

You may also bind the page parameter values to the page state of the source page.

Page parameters

Page parameters allow you to pass external data into the Toolpad page state via the URL query parameters.

Setting parameters

You can set page parameters from the Page tab in the Inspector panel on right. You can add multiple parameters along with a default value for each.

Using parameters

The parameters that you've added are available in the global scope for data bindings under the page.parameters variable. The value that the parameter assumes at runtime is the value that is passed through a URL query parameter.

For example: if you define a page parameter foo and access the page with ?foo=123, then the value of page.parameters.foo in the bindings will be "123".