sample-apps.md

description
Sample Apps show examples of concepts and features in Appsmith that can be followed to create your own apps. All sample apps can be forked into your account so that they can be viewed in the Edit mode

Sample Apps

{% tabs %} {% tab title="WIDGETS" %}

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

View App

|

Show Data in Table | JSObject

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

Datasource - NA

View App

| | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

Server-side Pagination

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

Datasource - MongoDB, REST API, PostgreSQL, Google Sheets

View App

|

Server-side Search

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

Datasource - PostgreSQL

View App

| |

External Filters for Table

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

Datasource - MongoDB, PostgreSQL

View App 1 View App 2

|

Row Selection Action

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

Datasource - PostgreSQL

View App

| |

Cell Background Colour

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

Datasource - MongoDB

View App

|

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

View App

| |

Editable Table | Save Cell

This app shows how to use the Table widget's inline editing feature to make changes directly in the table.

Datasource - PostgreSQL

View App

|

Editable Table | Save Table

This app shows how to use the Table widget's inline editing feature to make changes directly in the table.

Datasource - Google Sheets

View App

| |

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

View App

|

Polling Data in Realtime

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

Datasource - PostgreSQL

View App

| |

External Search

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

Datasource - MongoDB

View App

|

Control Column Visibility

This app shows how to show or hide columns of a table widget programmatically by clicking a button.

Datasource - PostgreSQL

View App

| |

Reset Table

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

Datasource - PostgreSQL

View App

| **** |

****

Input

Input Data Validation This app shows how to validate the form’s data for various input widget types before submission. Datasource - NA View App	Add Input Fields Dynamically This app shows how to insert input fields with a button click dynamically. Datasource - NA View App

Button

Control Widget Visibility This app demonstrates how to show or hide a widget on a button click. Datasource - NA View App	Reset Multiple Widgets This app shows how to reset multiple widgets with the click of a button. Datasource - NA View App
Change Button Colour This app shows how to enable users to change the colour of a button dynamically. Datasource - NA View App

Text

Change Widget Properties This app shows how to update the value property of the Text widget dynamically. Datasource - PostgreSQL View App	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 View App

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 View App	****

List

Show Data in List This app shows how to bind data to a list widget from a query. Datasource - MongoDB View App	Server-side Pagination This app shows how to implement server-side pagination on the List widget. Datasource - MongoDB View App
List Item Click Action This app shows how to trigger an action when a list item is selected. Datasource - MongoDB View App	****

Chart

Create Chart This app shows how to build different charts and customise them using the Chart widget. Datasource - MongoDB View App	Pie Chart This app shows how to work with Pie charts using the chart widget and customise them using JavaScript. Datasource - MongoDB View App
Custom Chart (Fusion Chart) This app shows how to build custom charts using the fusion charts library and customise them using JavaScript. Datasource - MongoDB View App	****

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 View App	Server-side Filtering This app shows how to implement server-side filtering on the Select widget. Datasource - PostgreSQL View App
Add List Options Dynamically This app shows how to add options to a select widget dynamically. Datasource - PostgreSQL View App

Modal

Open Modal This app shows how to open a modal using openModal() function of the Appsmith framework. Datasource - NA View App	Close Modal This app shows how to close a modal using closeModal() function of the Appsmith framework. Datasource - NA View App

Datepicker

Filter Data Between Dates This app shows how to use the Datepicker widget to filter data for a specific date range. Datasource - MongoDB View App	Set Min and Max Date This app shows how to set minimum and maximum dates in the DatePicker widget. Datasource - NA View App
Date Calculations This app shows how to perform different date calculations. Datasource - NA View App	Date Formatting This app shows how to format dates using Moment.js Datasource - NA View App
Set and Clear Date This app shows how to set and clear the date on a Datepicker widget with a button click. Datasource - NA View App	****

Audio

Play Audio This app demonstrates how to programmatically play audio by selecting the audio from a list of options. Datasource - NA View App	****

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 View App	Get Image URL This app shows how to extract the Image URL of an image captured on the Camera widget. Datasource - NA View App
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 View App	****

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 View App	****

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 View App	Upload File to Cloudinary This app shows how to upload a file to Cloudinary using the FilePicker widget. Datasource - REST API View App

IFrame

Embed HTML This app shows how to embed HTML using an IFrame widget. Datasource - NA View App	****

Map

Default Map Markers This app shows how to set the default markers in a Map widget. Datasource - REST API View App	****

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 View App	Set Values on Multiselect This app shows how to dynamically set values on a Multiselect widget with a button click. Datasource - NA View App

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 View App	****

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 View App	****

UI Components

Custom Header and Footer This app shows how to display app header and footer components. Datasource - NA View App	Sidebar Navigation This app shows how to display sidebar navigation on the app. Datasource - NA View App
Image Carousel This app shows how to display an image carousel on the app. Datasource - NA View App	Loading Till Page is Ready This app demonstrates how to have a loading screen while waiting for the page to show data. Datasource - NA View App
{% endtab %}

{% tab title="DATASOURCES" %}

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 View App	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 View App
Run Query in JSObject This app shows how to execute queries inside a JSObject. Datasource - MongoDB, PostgreSQL, REST API View App	Run Queries in Sequence This app shows how to run queries in a sequence. Datasource - PostgreSQL, MongoDB View App
Run Multiple Queries This app shows how to run multiple queries in parallel. Datasource - PostgreSQL View App	****

REST API

Dynamic API Headers This app shows how to specify dynamic headers for a REST API datasource. Datasource - REST API View App	****

PostgreSQL

Bulk Data Operations This app shows how to perform bulk CRUD operations on queries. Datasource - PostgreSQL View App	****

MongoDB

MongoDB RAW Query This app shows how to write a RAW MongoDB query to update the document. Datasource - MongoDB View App	Bulk Data Operations This app shows how to perform bulk CRUD operations on queries. Datasource - MongoDB View App

GraphQL

Fetch Data This app shows how to create a GraphQL query to fetch data using REST API. Datasource - REST API View App	****

Snowflake

Bulk Data Operations This app shows how to perform bulk CRUD operations on queries. Datasource - Snowflake View App	****
{% endtab %}

{% tab title="FRAMEWORK" %}

Appsmith Framework

Local Storage This app shows how to use Appsmith storage to store and display values. Datasource - NA View App	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 View App
Persistent vs Session Storage This app shows the difference between persistent vs session storage. Datasource - NA View App	Add/Remove Items from Storage This app shows how to add and remove items from Appsmith Storage. Datasource - NA View App
Pass Arguments to Function This app shows how to pass arguments to a JS function defined in a JSObject. Datasource - NA View App	JS Async-Await Fetch Data using async JS function Datasource - MongoDB View App
JS Promises (Callbacks) Fetch Data from JS function & handle promise with callbacks. Datasource - MongoDB View App	JS Promises (Chaining) Fetch Data from JS function & handle promise with chaining. Datasource - MongoDB, PostgreSQL View App
Current Date and Time This app shows how to display the current date and time. Datasource - NA View App	Refresh Page This app shows how to refresh the entire page at the click of a button or when selecting a checkbox. Datasource - NA View App
Hide Page from Topbar This app shows how to hide the pages of an app and how to navigate to pages only through button clicks. Datasource - NA View App	Reset Multiple Widgets This app shows how to reset multiple widgets using JSObject. Datasource - NA View App
{% endtab %}

{% tab title="JAVASCRIPT" %}

JS & Utilities

Merge Data from Multiple Queries This app shows how to combine data from two queries using a JSObject. Datasource - PostgreSQL View App	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 View App
Convert CSV to JSON This app shows how to convert a CSV file into an array of JSON objects. Datasource - NA View App	Upload CSV File This app shows how to upload CSV data and display it in a Table widget. Datasource - NA View App
Parse XML Data This app shows how to parse XML data using the xmlParser library. Datasource - REST API View App	Trigger Multiple Actions Shows how to trigger multiple actions inside JSObject. Datasource - PostgreSQL View App
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 View App	Download PDF from URL This app shows how to download a PDF file from a given URL. Datasource - REST API View App
PDF Generator This app shows how to generate and download a PDF using third-party tools. Datasource - REST API View App	Decode HTML Entities This app shows how to convert HTML entities to characters using JavaScript. Datasource - NA View App
Simple Calculator This app demonstrates - how to build a simple calculator using Button Groups, JSObject, and a Text widget. Datasource - NA View App	Simple Counter This app demonstrates - how to create a simple counter using buttons and the Appsmith Store. Datasource - NA View App
Display Asset from URL This app shows how to display an asset (image/video) using the given URL. Datasource - NA View App	Sequential ID Generator This app shows how to generate custom sequence-based IDs for table data using JavaScript. Datasource - PostgreSQL View App
UUID Generator This app shows how to generate UUIDs using JavaScript. Datasource - PostgreSQL View App	Custom Time Picker This app shows how to build a custom time picker. Datasource - NA View App
{% endtab %}
{% endtabs %}

How do I do X on Appsmith?

Live streams and apps from our community calls, where we discuss some of the 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