Sample Apps
- Widgets
- Datasources
- Framework
- JavaScript
Table
Show Data in Table - Query
This app shows you how to bind data to a Table Widget from an API and a database query.
Datasource - MongoDB
Datasource - MongoDB
Show Data in Table - JSObject
This app shows how to bind data to a Table Widget from a JSObject.
Datasource - NA
Datasource - NA
Server-side Pagination
This app shows how to implement server-side pagination on the Table widget.
Datasource - MongoDB, REST API, PostgreSQL, Google Sheets
Datasource - MongoDB, REST API, PostgreSQL, Google Sheets
Server-side Search
This app shows how to implement server-side search on the Table widget.
Datasource - PostgreSQL
Datasource - PostgreSQL
External Filters for Table
This app shows how to create an external filter for your table data.
Datasource - MongoDB, PostgreSQL
Datasource - MongoDB, PostgreSQL
Row Selection Action
This app shows how to trigger an action on the row selection of the Table widget.
Datasource - PostgreSQL
Datasource - PostgreSQL
Cell Background Colour
This app shows how to change a table cell background colour conditionally.
Datasource - MongoDB
Datasource - MongoDB
Editable Table - Save Row
This app shows how to use the Table widget's inline editing feature to make changes directly in the table.
Datasource - PostgreSQL
Datasource - PostgreSQL
Show Data from Multiple Queries
This app shows how to conditionally show data in the table from different queries depending on the queryParams passed to URL.
Datasource - PostgreSQL, MongoDB
Datasource - PostgreSQL, MongoDB
Polling Data in real time
This app shows how to use the interval functions to update data in a table periodically.
Datasource - PostgreSQL
Datasource - PostgreSQL
External Search
This app shows how to implement external search capability in a Table widget.
Datasource - MongoDB
Datasource - MongoDB
Control Column Visibility
This app shows how to show or hide columns of a table widget programmatically by clicking a button.
Datasource - PostgreSQL
Datasource - PostgreSQL
Reset Table
This app shows how to reset the Table widget using the resetWidget() function of the Appsmith Framework.
Datasource - PostgreSQL
Datasource - PostgreSQL
Input
Input Data Validation
This app shows how to validate the form’s data for various input widget types before submission.
Datasource - NA
Datasource - NA
Add Input Fields Dynamically
This app shows how to insert input fields with a button click dynamically.
Datasource - NA
Datasource - NA
Button
Control Widget Visibility
This app demonstrates how to show or hide a widget on a button click.
Datasource - NA
Datasource - NA
Reset Multiple Widgets
This app shows how to reset multiple widgets with the click of a button.
Datasource - NA
Datasource - NA
Change Button Colour
This app shows how to enable users to change the colour of a button dynamically.
Datasource - PostgreSQL
Datasource - PostgreSQL
Text
Change Widget properties
This app shows how to update the value property of the Text widget dynamically.
Datasource - PostgreSQL
Datasource - PostgreSQL
Download contents of Text widget
This app shows how to download the contents of a Text widget as a .txt file at the click of a button.
Datasource - NA
Datasource - NA
Form
Duplicate Record Check
This app demonstrates how to validate a form only if the entered record isn't present in the database.
Datasource - PostgreSQL
Datasource - PostgreSQL
List
Show Data in List
This app shows how to bind data to a list widget from a query.
Datasource - MongoDB
Datasource - MongoDB
Server-side Pagination
This app shows how to implement server-side pagination on the List widget.
Datasource - MongoDB
Datasource - MongoDB
List Item Click Action
This app shows how to trigger an action when a list item is selected.
Datasource - MongoDB
Datasource - MongoDB
Chart
Create Chart
This app shows how to build different charts and customise them using the Chart widget.
Datasource - MongoDB
Datasource - MongoDB
Pie Chart
This app shows how to work with Pie charts using the chart widget and customise them using JavaScript.
Datasource - MongoDB
Datasource - MongoDB
Custom Chart (Fusion Chart)
This app shows how to build custom charts using the fusion charts library and customise them using JavaScript.
Datasource - MongoDB
Datasource - MongoDB
Select
Reset Select Widget
This app shows how to use the Select widget to filter a table and to reset the Select widget to use the default value.
Datasource - PostgreSQL
Datasource - PostgreSQL
Server-side Filtering
This app shows how to implement server-side filtering on the Select widget.
Datasource - PostgreSQL
Datasource - PostgreSQL
Add List Options Dynamically
This app shows how to add options to a select widget dynamically.
Datasource - PostgreSQL
Datasource - PostgreSQL
Custom
Image Annotator
This app showcases how to create an Image Annotator, allowing users to annotate images with ease.
Datasource - NA
Datasource - NA
Data grid widget
This app demonstrates the implementation of a Data Grid widget, providing a user-friendly interface for displaying and manipulating tabular data within the application.
Datasource - NA
Datasource - NA
Signature Pad widget
This app features a Signature Pad widget, allowing users to digitally sign and capture their signatures.
Datasource - NA
Datasource - NA
Custom Calendar widget
This app offers a tailored and intuitive calendar interface for efficient date selection and event management within your application.
Datasource - NA
Datasource - NA
Tabulator widget
This app showcases the Tabulator widget, providing a dynamic and interactive table interface for efficiently presenting and interacting with tabular data in your application.
Datasource - NA
Datasource - NA
JSON viewer / editor
This app includes a JSON Viewer/Editor, offering a user-friendly interface for visualizing and editing JSON data.
Datasource - NA
Datasource - NA
Modal
Open Modal
This app shows how to open a Modal using openModal() function of the Appsmith framework.
Datasource - NA
Datasource - NA
Close Modal
This app shows how to close a modal using closeModal() function of the Appsmith framework.
Datasource - NA
Datasource - NA
Datepicker
Filter Data Between Dates
This app shows how to use the Datepicker widget to filter data for a specific date range.
Datasource - MongoDB
Datasource - MongoDB
Set Min and Max Date
This app shows how to set minimum and maximum dates in the Datepicker widget.
Datasource - NA
Datasource - NA
Date Calculations
This app shows how to perform different date calculations.
Datasource - NA
Datasource - NA
Set and Clear Date
This app shows how to set and clear the date on a Datepicker widget with a button click.
Datasource - NA
Datasource - NA
Audio
Play Audio
This app demonstrates how to programmatically play audio by selecting the audio from a list of options.
Datasource - NA
Datasource - NA
Camera
Get Base64 string of image
This app shows how to extract the Base64 encoded string of an image captured on the Camera widget.
Datasource - PostgreSQL
Datasource - PostgreSQL
Get image URL
This app shows how to extract the Image URL of an image captured on the Camera widget.
Datasource - NA
Datasource - NA
Insert Image into Database
This app shows how to get the Base64 string of an image captured on the Camera widget and insert it into a database.
Datasource - MongoDB
Datasource - MongoDB
Checkbox
Using Checkbox in Queries
This app shows how to use the value of a Checkbox in a query to display data conditionally.
Datasource - PostgreSQL
Datasource - PostgreSQL
Filepicker
Upload File
This app shows how to upload a file using the Filepicker widget and get the Base64 raw encoding of the uploaded file.
Datasource - NA
Datasource - NA
Upload File to Cloudinary
This app shows how to upload a file to Cloudinary using the FilePicker widget.
Datasource - REST API
Datasource - REST API
IFrame
Map
Default Map Markers
This app shows how to set the default markers in a Map widget.
Datasource - REST API
Datasource - REST API
Multiselect
Insert Multiselect Values into DB
This app shows how to insert values from a Multiselect widget into separate rows in a Google Sheet datasource.
Datasource - Google Sheets
Datasource - Google Sheets
Set Values on Multiselect
This app shows how to dynamically set values on a Multiselect widget with a button click.
Datasource - NA
Datasource - NA
Progress
Use Progress Bar
This app shows how to use the Progress Bar widget to display the progress of work in a step format.
Datasource - NA
Datasource - NA
Document Viewer
Display Base64 content
This app shows how to convert text to base64 format and display it in the Document Viewer widget.
Datasource - NA
Datasource - NA
UI components
Custom Header and Footer
This app shows how to display app header and footer components.
Datasource - NA
Datasource - NA
Sidebar Navigation
This app shows how to display sidebar navigation on the app.
Datasource - NA
Datasource - NA
Queries
Pass Parameters to Query
This app shows how to pass parameters to a query in the run() function and how to access these parameters in the query.
Datasource - PostgreSQL
Datasource - PostgreSQL
Pass Query Parameters to URL
This app shows how to pass query parameters into the URL path and how to access them in a query.
Datasource - PostgreSQL
Datasource - PostgreSQL
Run Query in JSObject
This app shows how to execute queries inside a JSObject.
Datasource - MongoDB, PostgreSQL, REST API
Datasource - MongoDB, PostgreSQL, REST API
Run Queries in Sequence
This app shows how to run queries in a sequence.
Datasource - PostgreSQL, MongoDB
Datasource - PostgreSQL, MongoDB
Run Multiple Queries
This app shows how to run multiple queries in parallel.
Datasource - PostgreSQL
Datasource - PostgreSQL
REST API
Dynamic API Headers
This app shows how to specify dynamic headers for a REST API datasource.
Datasource - REST API
Datasource - REST API
PostgreSQL
Bulk Data Operations
This app shows how to perform bulk CRUD operations on queries.
Datasource - PostgreSQL
Datasource - PostgreSQL
MongoDB
MongoDB RAW Query
This app shows how to write a RAW MongoDB query to update the document.
Datasource - MongoDB
Datasource - MongoDB
Bulk Data Operations
This app shows how to perform bulk CRUD operations on queries.
Datasource - MongoDB
Datasource - MongoDB
GraphQL
Fetch Data
This app shows how to create a GraphQL query to fetch data using REST API.
Datasource - REST API
Datasource - REST API
Snowflake
Bulk Data Operations
This app shows how to perform bulk CRUD operations on queries.
Datasource - Snowflake
Datasource - Snowflake
Appsmith Framework
Local Storage
This app shows how to use Appsmith storage to store and display values.
Datasource - NA
Datasource - NA
Navigate to Page/External Link
This app shows how to navigate to a different page or an external link using the navigateTo() function.
Datasource - NA
Datasource - NA
Persistent vs Session Storage
This app shows the difference between persistent vs session storage.
Datasource - NA
Datasource - NA
Remove Items from Storage
This app shows how to add and remove items from Appsmith Storage.
Datasource - NA
Datasource - NA
Pass Arguments to Function
This app shows how to pass arguments to a JS function defined in a JSObject.
Datasource - NA
Datasource - NA
JS Promises (Callbacks)
Fetch Data from JS function & handle promise with callbacks.
Datasource - MongoDB
Datasource - MongoDB
JS Promises (Chaining)
Fetch Data from JS function & handle promise with chaining.
Datasource - MongoDB, PostgreSQL
Datasource - MongoDB, PostgreSQL
Current Date and Time
This app shows how to display the current date and time.
Datasource - NA
Datasource - NA
Refresh Page
This app shows how to refresh the entire page at the click of a button or when selecting a checkbox.
Datasource - NA
Datasource - NA
JS and utilities
Merge Data from Multiple Queries
This app shows how to combine data from two queries using a JSObject.
Datasource - PostgreSQL
Datasource - PostgreSQL
Merge CSV Data
This app shows how to merge the data from two CSV files by column and display it in a Table widget.
Datasource - NA
Datasource - NA
Convert CSV to JSON
This app shows how to convert a CSV file into an array of JSON objects.
Datasource - NA
Datasource - NA
Upload CSV File
This app shows how to upload CSV data and display it in a Table widget.
Datasource - NA
Datasource - NA
Parse XML Data
This app shows how to parse XML data using the xmlParser library.
Datasource - REST API
Datasource - REST API
Trigger Multiple Actions
Shows how to trigger multiple actions inside JSObject.
Datasource - PostgreSQL
Datasource - PostgreSQL
Basic HTML Editor
This app shows how to create a basic HTML editor using a Tabs widget, an Input widget, and a Text widget.
Datasource - NA
Datasource - NA
Download PDF from URL
This app shows how to download a PDF file from a given URL.
Datasource - REST API
Datasource - REST API
PDF Generator
This app shows how to generate and download a PDF using third-party tools.
Datasource - REST API
Datasource - REST API
Decode HTML Entities
This app shows how to convert HTML entities to characters using JavaScript.
Datasource - NA
Datasource - NA
Simple Calculator
This app demonstrates - how to build a simple calculator using Button Groups, JSObject, and a Text widget.
Datasource - NA
Datasource - NA
Simple Counter
This app demonstrates - how to create a simple counter using buttons and the Appsmith Store.
Datasource - NA
Datasource - NA
Display Asset from URL
This app shows how to display an asset (image/video) using the given URL.
Datasource - NA
Datasource - NA
Sequential ID Generator
This app shows how to generate custom sequence-based IDs for table data using JavaScript.
Datasource - PostgreSQL
Datasource - PostgreSQL
How to do X on Appsmith
Live streams and apps from the community calls with answers to frequently asked questions on Discord and Intercom.
Session #1: video link, Template Link | Topics covered: combining multiple queries, dynamic queries, switching between tabs, JS promises, and dynamically adding widgets.
Session #2: video link, Template Link | Topics covered: pagination, bulk Uploads, Appsmith Framework