Data Binding

Data binding allows data from APIs to be fed into UI widgets as well as data from UI widgets to be fed into APIs.

{{ JS }}

The mustache {{ }} acts as a template which executes any code written inside it and replaces it in place. So Hello {{ getUser.data.name }}! will evaluate to "Hello John!"

Get creative with some of your favourite JS libraries like lodash or moment.

{{ _.filter(getUsers, (user) => { return user.name.includes(searchBox.text); }); }}

Objectify

Appsmith objectifies parts of your application to make them available to you in code. You can access properties of the object using the dot notation object.prop and even run its functions usingobject.run()

Appsmith exposes the following entities as objects which can be accessed via their names:

  • Widgets

  • APIs

  • JS Functions (Coming Soon)

Widgets

Widgets & their properties can be accessed via the widget name i.e {{ searchBox.text }}

Each widget exposes a set of properties and the data type that property expects. While binding data to a widget's property, ensure you transform the property to the data type the property expects.

Widget properties which do not have a text input control, such as "Visibility", can be converted to accept text by clicking the JS icon next to the property.

APIs

APIs are accessible via the API name. The API object contains the configuration of the API and a data field which contains the most recent response of the API. Any GET API which has been bound in the application will be marked to be run onPageLoad. We do this so you have all the data you need before the user starts to interact with the page. This setting can be changed in the API Pane.

JS Functions

JS functions are accessible via their class names. The function can be executed via the run method {{ transformData.run }} and the return value of the function can be accessed via its data attribute{{ transformData.data }}

Calling an API or JS function run method in a widget property will lead to that method being executed multiple times when the widget's property updates