Writing Code

JavaScript can be used inside {{ }} anywhere in Appsmith. Every entity in Appsmith can be referenced as a JavaScript variable and all JavaScript functions and operations can be performed on them. This means that all Widgets, APIs, Queries, and their associated data and properties can be referenced anywhere in an application inside handlebars {{ }}.
Appsmith currently supports two forms of JavaScript code for dynamically evaluated property values:
1.Single line code or functions, such as ternary conditions
1
{{ QueryName.data.filter((row) => row.id > 5 ) }}
Copied!
1.Immediately Invoked Function Expressions IIFE​
1
{{ 
2
  (function() {
3
      const array = QueryName.data;
4
      const filterArray = array.filter((row) => row.id > 5);
5
      return filterArray;
6
   })()
7
}}
Copied!
You can also write JavaScript code for event listeners. For JavaScript code inside an event listener, you can write multi-line JavaScript as below.
1
{{
2
  storeValue("userID", 42);  
3
  console.log(appsmith.store.userID); 
4
  showAlert("userID saved");
5
}}
Copied!
Reactive
Appsmith is Reactive so code in Appsmith is declarative in nature and describes the eventual states of a property.
In order to update the property of a widget, unlike in imperative programming where a programmer would write a statement as
1
// Imperative Style incompatible with appsmith
2
if (Dropdown1.selectedOption === "John")
3
    nameInput.setText("John Doe");
Copied!
In Appsmith, programmers declare the states of the text property in the property pane as below and the properties of the widget are updated reactively whenever the values of Dropdown1 change
1
{{ Dropdown1.selectedOption === "John" ? "John Doe" : "" }}
Copied!
Single Line JavaScript
This means that widgets are automatically updated whenever their underlying data changes or an API / Query returns with data.
Appsmith primarily supports writing single line javascript between {{ }} because the value of the JavaScript expression is substituted in the field. This requires us to chain multiple operations in a single line to achieve a result.
Valid JavaScript
Following are valid examples of JavaScript for property values.
1
{{ QueryName.data.filter((row) => row.id > 5 ) }}
Copied!
1
{{ Dropdown.selectedOptionValue === "1" ? "Option 1" : "Option 2" }}
Copied!
Invalid JavaScript
Following are invalid examples of JavaScript for property values. Here we should be using Immediately Invoked Function Expressions IIFE​
1
{{ 
2
   const array = QueryName.data;
3
   const filterArray = array.filter((row) => row.id > 5);
4
   return filterArray;
5
}}
Copied!
1
{{ 
2
  if (Dropdown.selectedOptionValue === "1") {
3
      return "Option 1";
4
  } else {
5
      return "Option 2";
6
  }
7
}}
Copied!
Multi-Line JavaScript
Appsmith does support multi-line JS if it is IIFE. The above invalid examples become valid if used as below.
1
{{ 
2
  (function() {
3
      const array = QueryName.data;
4
      const filterArray = array.filter((row) => row.id > 5);
5
      return filterArray;
6
   })()
7
}}
Copied!
1
{{ 
2
  (function() {
3
      if (Dropdown.selectedOptionValue === "1") {
4
        return "Option 1";
5
      } else {
6
        return "Option 2";
7
      }
8
   })()
9
}}
Copied!
Writing comments inside :
Note that you can write comments inside using JavaScript's multi-line comment syntax /* */, but single line comments // are not supported inside .

Capture Form Data

Creating Workflows

Last modified 1mo ago

Copy link

Edit on GitHub

Contents

Reactive

Single Line JavaScript

Valid JavaScript

Multi-Line JavaScript