Sample Apps | Appsmith - SolFind Web Lens

Sample Apps | Appsmith

https://docs.appsmith.com/learning-and-resources/sample-apps • 101 KB fetched
Open original page

Sample Apps | 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

* Build Apps

* Reference

* Sample Apps
On this page
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

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

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 real time

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 - PostgreSQL

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

Custom
Image Annotator

This app showcases how to create an Image Annotator, allowing users to annotate images with ease.

Datasource - NA

View App

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

View App

Signature Pad widget

This app features a Signature Pad widget, allowing users to digitally sign and capture their signatures.

Datasource - NA

View App

Custom Calendar widget

This app offers a tailored and intuitive calendar interface for efficient date selection and event management within your application.

Datasource - NA

View App

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

View App

JSON viewer / editor

This app includes a JSON Viewer/Editor, offering a user-friendly interface for visualizing and editing JSON data.

Datasource - NA

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

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

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

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

JS and 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

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

Was this page helpful?

Edit this page

Previous
Theme
Next
Overview

* Table

* Input

* Button

* Text

* Form

* List

* Chart

* Select

* Custom

* Modal

* Datepicker

* Audio

* Camera

* Checkbox

* Filepicker

* IFrame

* Map

* Multiselect

* Progress

* Document Viewer

* UI components

* Queries

* REST API

* PostgreSQL

* MongoDB

* GraphQL

* Snowflake

* Appsmith Framework

* JS and utilities

* How to do X on Appsmith

Sample Apps | Appsmith

Links found on this page