Skip to main content

Sample Apps

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

Show Data in Table - JSObject

This app shows how to bind data to a Table Widget from a JSObject.

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

Server-side Search

This app shows how to implement server-side search on the Table widget.

Datasource - PostgreSQL

External Filters for Table

This app shows how to create an external filter for your table data.

Datasource - MongoDB, PostgreSQL

Row Selection Action

This app shows how to trigger an action on the row selection of the Table widget.

Datasource - PostgreSQL

Cell Background Colour

This app shows how to change a table cell background colour conditionally.

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

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

Polling Data in real time

This app shows how to use the interval functions to update data in a table periodically.

Datasource - PostgreSQL

External Search

This app shows how to implement external search capability in a Table widget.

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

Reset Table

This app shows how to reset the Table widget using the resetWidget() function of the Appsmith Framework.

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

Add Input Fields Dynamically

This app shows how to insert input fields with a button click dynamically.

Datasource - NA

Button

Control Widget Visibility

This app demonstrates how to show or hide a widget on a button click.

Datasource - NA

Reset Multiple Widgets

This app shows how to reset multiple widgets with the click of a button.

Datasource - NA

Change Button Colour

This app shows how to enable users to change the colour of a button dynamically.

Datasource - PostgreSQL

Text

Change Widget Properties

This app shows how to update the value property of the Text widget dynamically.

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

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

List

Show Data in List

This app shows how to bind data to a list widget from a query.

Datasource - MongoDB

Server-side Pagination

This app shows how to implement server-side pagination on the List widget.

Datasource - MongoDB

List Item Click Action

This app shows how to trigger an action when a list item is selected.

Datasource - MongoDB

Chart

Create Chart

This app shows how to build different charts and customise them using the Chart widget.

Datasource - MongoDB

Pie Chart

This app shows how to work with Pie charts using the chart widget and customise them using JavaScript.

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

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

Server-side Filtering

This app shows how to implement server-side filtering on the Select widget.

Datasource - PostgreSQL

Add List Options Dynamically

This app shows how to add options to a select widget dynamically.

Datasource - PostgreSQL

Open Modal

This app shows how to open a modal using openModal() function of the Appsmith framework.

Datasource - NA

Close Modal

This app shows how to close a modal using closeModal() function of the Appsmith framework.

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

Set Min and Max Date

This app shows how to set minimum and maximum dates in the DatePicker widget.

Datasource - NA

Date Calculations

This app shows how to perform different date calculations.

Datasource - NA

Date Formatting

This app shows how to format dates using Moment.js

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

Audio

Play Audio

This app demonstrates how to programmatically play audio by selecting the audio from a list of options.

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

Get image URL

This app shows how to extract the Image URL of an image captured on the Camera widget.

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

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

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

Upload File to Cloudinary

This app shows how to upload a file to Cloudinary using the FilePicker widget.

Datasource - REST API

IFrame

Embed HTML

This app shows how to embed HTML using an IFrame widget.

Datasource - NA

Map

Default Map Markers

This app shows how to set the default markers in a Map widget.

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

Set Values on Multiselect

This app shows how to dynamically set values on a Multiselect widget with a button click.

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

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

UI components

Custom Header and Footer

This app shows how to display app header and footer components.

Datasource - NA

Sidebar Navigation

This app shows how to display sidebar navigation on the app.

Datasource - NA

Image Carousel

This app shows how to display an image carousel on the app.

Datasource - NA

Loading Till Page is Ready

This app demonstrates how to have a loading screen while waiting for the page to show data.

Datasource - NA

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