Overview
One of the key features of Appsmith is the ability to write custom code to enhance the functionality of your applications. This concept document introduces how to write code in Appsmith, the usage of mustache bindings, and the creation and use of functions within JSObjects.
Inline code with mustache bindings
Appsmith uses a templating syntax (known as mustache bindings) to write dynamic code inside widget properties and queries. Mustache bindings are expressed by wrapping the code inside {{ }}. This syntax allows you to insert JavaScript code directly into properties of widgets or as part of query configurations. Writing code inline does not allow for multi-line functions which are better suited to be written inside JSObjects.
Inline code in widget properties
// This code snippet can be used in a widget property to dynamically set its value
{{ "Current date and time: " + new Date().toLocaleString() }}
When used in widget properties, mustache bindings dynamically compute values based on the current state of the application, user inputs, or other variable data.
Inline code in queries
// This example shows a SQL query with mustache bindings to insert dynamic values
SELECT * FROM users WHERE id = {{ Input1.text }}
Within queries, you can reference widgets JSObjects, & any application state. The bindings will be evaluated at runtime when the query is triggered, ensuring that the latest values are used in the query execution.
Creating functions in JS Objects
A JSObject is a collection of JavaScript functions and variables that can be used to transform data or perform custom logic in your application. It helps in centralizing code, reusability, and keeping the logic separate from the UI.
Simple functions
Simple functions in a JSObject can transform data, format values, or perform any JavaScript logic that doesn't involve asynchronous operations.
export default {
formatUserName: (user) => {
return user.firstName + " " + user.lastName;
},
};
Asynchronous functions and triggering queries
Async functions within JSObjects allow you to perform asynchronous operations such as API calls, database queries, or any other operations that return a Promise.
export default {
fetchData: async () => {
const data = await Api1.run();
return data;
},
};
Since async functions return promises, the value of their returned data can be accessed in a widget by using the .data property of the function.
{{JSObject1.fetchData.data}}
Async functions can only be triggered from other async functions or widget event handlers.
JavaScript context in Appsmith
For security purposes, any JavaScript code executed within Appsmith does not have access to the global window object that you typically have in a web browser environment. This restriction helps prevent security vulnerabilities and ensures that the code within the application is self-contained.
However, Appsmith provides a special appsmith object that contains a context with useful properties and methods that can be utilized within your code:
export default {
contextExample: () => {
// Access to Appsmith context object properties
console.log(appsmith.user);
console.log(appsmith.store);
// ... other operations
},
};
The appsmith object includes information about the current user, application state, and exposed methods useful for application development. By providing these out-of-the-box functionalities within a controlled context, Appsmith ensures both the flexibility and security of code execution within your applications.
Remember that while Appsmith provides significant power and flexibility for writing custom code, it is important to understand the execution context and keep security best practices in mind while developing your applications.