JavaScript Editor (Beta)

JavaScript Editor is new functionality introduced in Appsmith which allows you to create a reusable set of JavaScript functions that you can call within JavaScript bindings across the Appsmith platform.
Previously, you had to write JavaScript in a smaller text box in the property pane. Although writing smaller snippets was convenient there, working on multi-line code became painful. To solve this problem, we have introduced a full-fledged code editor to write JavaScript code.
JavaScript Editor is a dedicated space where you can write functions and store variables, and call them in other places in Appsmith. To do this, we are introducing a concept called “JS Object.”
JS Object
A JS Object is a collection of multiple functions and variables. You can create multiple JS Objects, and you can refer to functions defined in other JS Objects, allowing you to create a neatly organized set of reusable functions.
You can create new JS Objects from the Entity Explorer panel, as shown below, and write a JS Object using the following template.
Here, “myVar1”, and “myVar2” are two variables, and “myFun1”, and “myFun2” are two functions defined in the JS Object which are exposed in default export. Currently, we don’t support exposing functions using named exports.
Once you have created functions and variables in a JS Object, you can call/refer to them at any place where you can write JavaScript across the Appsmith platform, as shown below.
Calling a JS Object
There could be any number of functions that you can add to a JS Object which could be Synchronous or Asynchronous in nature.
Synchronous
As the name suggests, synchronous means to be in a sequence, i.e., every statement of the code gets executed one by one. So, basically, a statement has to wait for the earlier statement to get executed.
For example, the below code snippet shows a data filter:
1
Api.data.filter(() => {}); // filtering data 
Copied!
Here data filtering is the process of selecting a subset of data that you would want to choose for viewing or analysis. To filter the data, you have to traverse the whole dataset one after the other and segregate it if it matches the filter criteria. Thus, you need synchronous execution.
Asynchronous
The word asynchronous means not occurring at the same time. You may sometimes need to fetch data from the server or execute a function with a delay, something you do not anticipate occurring in the current slice of time.
For example, Promises, Api.run(), Query.Run(), Appsmith platform functions(eg. showModal). It basically lets you delay the execution of code embedded in an async function and is executed when needed.
There are additional settings that you can configure for the asynchronous function and enhance the user experience.
Working with JavaScript Editor
JavaScript Editor provides additional functionalities other than the ability to write code using an extensive editor.
JavaScript Editor has the following features:
Running each function manually during development and seeing the output in the Response tab;
Seeing the linting errors right in the editor;
Seeing the syntax errors in the Errors tab;
Seeing the function execution log in the Log tab;
Inserting ready-to-use snippets.
Let us consider the following simple example: Writing a Hello World example using a JS Object.
Adding hello function
You can execute this “hello” function by clicking on the Execute icon next to its name in the Response tab and seeing the output in the window right to it.
Response tab
If you make a mistake in JavaScript syntax while writing your code, JavaScript Editor will highlight the error using a red-colored lint below the possible position of the error.
Linting errors
You can inspect the error in detail from the Errors tab, as shown below.
Errors Tab
You can also see the history of each update and execution of your function in the Logs tab.
Logs tab
Finally, you can also insert reusable snippets from the Appsmith Snippet Library.
Open Snippets from the "</>Snippets" button
Search and copy the required Snippet from the Appsmith Snippet Library, as shown below.
Appsmith Snippet Library
We are actively working on expanding our Snippets Library. Please reach out to us on Discord or Community Forms to help contribute to this library.
Creating Advance Workflows
JavaScript Editor allows you to create advanced workflows. Let us now work on creating a slightly complex example using JS Objects.
Suppose you want to create a dashboard that tracks the weekly tasks progress of your developers. You have a query called “developers,” which fetches the developers’ information like name, email, etc. Another query, called “todos,” gives you the task list with the status of each developer.
As the outcome, you want to create a table that shows the valuable data from both the queries for each developer like name, email, total tasks, completed tasks, and the ones in progress, etc. You can achieve this by calling one function from the JS Editor, called “getWeeklyTaskList.” Let’s write this function in the JavaScript Editor.
From the Entity Explorer tab, click on the plus icon next to the JS Objects section to create a new JS Object and open it in the JS Editor. Rename this JS Object to “Utils.”
Let's write the “getWeeklyTaskList” function **** in Utils-
1
export default {
2
	getWeeklyTaskList : () => {
3
		return developers.data.map((developer) => {
4
			const developerId = developer.id;
5
			const taskList = todos.data.filter((todo) => todo.userId === developerId)
6
			const completedTaskList = taskList.filter((task) => task.completed === true)
7
			const inProgressTaskList = taskList.filter((task) => task.completed === false);
8
			return {
9
				"Name": developer.name,
10
				"Email": developer.email,
11
				"Completed Taks":  completedTaskList && completedTaskList.length,
12
				"In Progress Tasks" : inProgressTaskList && inProgressTaskList.length,
13
				"Total Tasks" : taskList && taskList.length,
14
			};
15
		})
16
	}
17
}
Copied!
On any application page, drag the table widget on the canvas and open its property pane. Call this function in your Table’s table data with just one line - {{Utils.getWeeklyTaskList()}}.
Resultant table on calling "getWeeklyTaskList” function
Let’s add another function in JS Object “Utils” to demonstrate more complex workflows.
Although you have achieved the desired result, let’s add more customization to this Dashboard to make it more functional. The table has the developer’s details, but it would be better to have an option to update the information if it is incorrect or outdated. Thus, we add a column with an edit button for each row that opens an “editModal,” taking new names and email inputs.
When you fill the fields of Name and Email in the “editModal” and click on confirm, you want the API to update the developer details. If it is successful, the app should show an alert “User updates successful” the developer query should fetch the updated data into the table again.
For additional security, only admins should have permission to edit or update data. Any unauthorized personnel trying to edit the table should be taken back to the login page, closing the “editModal.” Add another function called “updateUserData” as shown below.
1
export default {
2
	getWeeklyTaskList : () => {...},
3
	updateUserData: () => {
4
		const newUserData = {
5
			...Table1.selectedRow,
6
			"name"  : editName.text,
7
			"email" : editEmail.text,
8
		}
9
		updateUser.run(undefined, undefined, newUserData)
10
		.then(() => {
11
			users.run();
12
		 })
13
		.then(() => {
14
			closeModal("editModal");
15
			showAlert("User updates successfully!");
16
		})
17
		.catch((e) => {
18
			closeModal("editModal")
19
			if (e.statusCode === 401) {
20
				navigateTo("LoginPage");			
21
			}
22
		})
23
	}
24
}
Copied!
We can call this function on the "Confirm" button with just one line - {{Utils.updateUserData()}}
As you want only a select group of people to have admin access to this Dashboard, let’s create another function for access control of the app.
As the dashboard contains confidential data, you might want to limit its accessibility, allowing only the selective members of your team to update this dashboard. Let’s create an access control function that contains a list of emails of the people who will have access to update data in the table.
Add another function to “Utils” JS Object called “isAdmin” as shown below.
1
export default {
2
	getWeeklyTaskList () => {...}
3
	updateUsersData () => {...}
4
	adminsList: ["[email protected]", "[email protected]", "[email protected]"],
5
	isAdmin: (email) => {
6
		if (this.adminList.indexOf(email) > -1) {
7
			return true;
8
		}
9
		return false;
10
	}
11
}
Copied!
Current Limitations
As we’ve currently released the beta version, the following are the current limitations of JavaScript Editor functionality:
You cannot use the JS Objects defined on a page across other pages. But we are working on enabling this functionality in the future. You can subscribe to this issue to follow the progress.
You cannot define variables and functions outside of export default { }. We will allow you to write and export only selected variables/functions from a JS Object in future iterations.
If a function is async, i.e., if it returns a promise, it cannot be called on the fields that are incompatible with the return type, such as the default text property of the label widget. For example, executeQuery returns Api1.run() promise and hence an async function. You can call such functions from only trigger or event properties such as “OnClick.”