Overview | Appsmith - SolFind Web Lens

Overview | Appsmith

https://docs.appsmith.com/write-code/overview • 59 KB fetched
Open original page

Overview | Appsmith

Ask AI
Search

Ask Appsmith AI Submit message

Examples How do I install Appsmith using Docker? How do I connect to my local PostgreSQL database? How do I pass inputs from a widget to a query? How do I trigger multiple queries conditionally? How do I fix the error: This value does not evaluate to type Array<Object>?

Try Appsmith

* Get Started

* Introduction

* Build Your First App

* Self Hosting

* New Installation Guides

* Manage Installation

* Upgrade Installation Guides

* Concepts

* Connect Data

* Overview

* How-to Guides

* Reference

* Datasources

* Query Settings

* Concepts

* Build Apps

* Overview

* Quickstart

* How-to Guides

* Reference

* Widgets

* Accessibility

* Theme

* Sample Apps

* Write Code

* Overview

* How-to Guides

* Reference

* Global Objects

* Global Functions

* JS Libraries

* Fetch API

* Data Transformation

* JavaScript Settings

* Concepts

* Best Practices

* Manage Apps and Users

* Authentication

* Granular Access Control

* Versioning with Git

* Setup SCIM Provisioning

* Embed Appsmith

* Migrate Applications

* Audit Logs

* Branding

* External Client Portal

* Packages

* Overview

* Tutorial

* How-to Guides

* Reference

* Package Version Control

* GIT Apps with Packages Best Practices

* Code Packages

* UI Packages

* Workflows

* Overview

* Tutorial

* How-to Guides

* Reference

* Workflow Triggers

* Workflow Queries

* Workflow Functions

* Pass Parameters to Workflows

* Run History

* Troubleshooting

* Overview

* Self-hosting Errors

* Application Errors

* Product

* FAQ

* Security

* Telemetry

* Support at Appsmith

* Privacy Policy

* Release Notes

* Contribute

* Write Code

* Overview
On this page
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.

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.

Get started

Get started with writing code in Appsmith by exploring the following resources:

How-to Guides

Follow detailed step-by-step guides that cover key operations and common tasks in Appsmith, from setting up data sources to writing custom code.

Reference

Find technical descriptions and in-depth information about the Appsmith framework, including supported libraries and syntax.

Concepts

Understand the core concepts of the Appsmith framework, including how it integrates with external services and supports custom scripting.

Was this page helpful?

Edit this page

Previous
Sample Apps
Next
How-to guides

* Inline code with mustache bindings
* Inline code in widget properties

* Inline code in queries

* Creating functions in JS Objects
* Simple functions

* Asynchronous functions and triggering queries

* JavaScript context in Appsmith

* Get started

Overview | Appsmith

Links found on this page