appsmithorg / appsmith-docs

Mirror of documentation at https://docs.appsmith.com. Raise Pull requests against this repository to update the documentation

Appsmith Documentation

This is the source of documentation for Appsmith, hosted at docs.appsmith.com, powered by Docusaurus v2.

Installation

Navigate to the website sub-directory

$ cd website

Run the below command to install node-modules

$ npm install package.json

Local Development

To set up the local development environment

$ npm start

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

Build

It would help if you verified all your changes with a local build.

$ npm run build

This command generates static content into the build directory. You can use the local builds to verify your added content before raising a PR.

Test

$ npm run serve

This command is used to verify the content generated in the build directory. It acts as a simulator on your local machine to verify the actual build once the content is merged/deployed to the website.

appsmith-docs's Issues

Improving the embedding of YouTube Video in readme.md

Link to the page which needs improvement :
https://github.com/appsmithorg/appsmith-docs/blob/v1.3/README.md?plain=1#L22

The embedding of the YouTube video can be improved

BEFORE:

AFTER IMPROVEMENT:
Added the thumbnail to the youtube video as an hyperlink

How to use ElasticSearch as a data source on Appsmith

Please cover the following topics in this guide -

1. Integrating the data source into Appsmith.
2. Fetching data from the connected data source.
3. Binding the data to a widget.
   For documentation guidelines, click here.

Add documentation for Button group widget

The button group widget is not mentioned in the list of widgets.

duplicated paragraphs in tutorial

in the section https://docs.appsmith.com/tutorials/building-a-store-catalog-manager/part-3-creating-interactive-views#accessing-properties-between-widgets of the tutorial seems to be some almost duplicate paragraphs:

• ProductNameInput should show the productName value of the selected row
• MrpInput should show mrp value of the selected row
• CategoryDropdown should show category value of the selected row
• ProductNameInput should show the value of column productName of the selected row
• MrpInput should show the value of column mrp of the selected row
• CategoryDropdown should show the value of column category of the selected row

typo in tutorial

In this section:
https://docs.appsmith.com/tutorials/building-a-store-catalog-manager/part-2-using-forms#connecting-multiple-pages
where it says: "Type AddProductPage in Page Name field"
it must say "Type NewProductPage in Page Name field"

How to create Custom Charts on Appsmith

Please make sure that your documentation has the following -

1. An Example app that shows the required widget.
2. Add screenshots for a better understanding of the topic.
3. Add code snippets wherever necessary.

For documentation guidelines, click here.

How to use Airtable as a data source on Appsmith

Please cover the following topics in this guide -

1. Integrating the datasource into Appsmith.
2. Fetching data from the datasource connected.
3. Binding the data to a widget.

For documentation guidelines, click here.

How to work with GraphQL on Appsmith

Please cover the following topics in this guide -

1. Integrating the data source into Appsmith.
2. Fetching data from the connected data source.
3. Binding the data to a widget.
   For documentation guidelines, click here.

Anime Search Application using Appsmith

A tutorial idea from @Pradyuman7

Anime Search Application using Appsmith

• Search for anime and information regarding them
• Search for anime characters and some info
• Rate anime of your choice
• Check top rated anime (ordered by the rating provided above)

Improve documentation on how to download from S3.

Mention the permission(s) needed for the testing of datasources

For example, the S3 plugin does a list-buckets operation to test the datasource. If the configuration is correct but the credentials don't have this permission, the test operation fails. Can we make clear in the documentation on what permissions this needs so the user isn't taken by surprise?

Update links to Sample Apps

We're currently redesigning the sample apps, and the links will need to be updated.

• Working with Tables
• Server-side Pagination
• Bulk insert/update
• Queries/APIs
• JS Object & Promises/Async-Await
• Form
• Charts
• Appsmith Framework
• Date-Time
• Widgets
• UI Components
• Utility

Creating an Account seems inappropriate title

In the homepage, the "Creating an Account" section title seems inappropriate. Better phrase may be: Running Appsmith, Running the Server, How to Run etc

Issue with extended Markdown

Hi there!
I noticed that across the Docs there are multiple extened Markdown Tags in use, which do not seem to work when viewing the content on GitHub. Some examples are:

{% hint style="success" %} ... {% endhint %}

or youtube embeds:

{% embed url="https://www.youtube.com/watch?v=mzqK0QIZRLs&feature=youtu.be" caption="" %}

They appear like the following when browsing the Repo on GitHub:

---

How should this be handled?
Should it be kept this way or should it be changed to GitHub-supported Markdown?

An idea would be, for example, to change "success" or "error" hints to GitHub "Quotes" like this:

This is a quote

And youtube embeds could be changed to displaying the YouTube Thumbnail which links to the video on YouTube.
I'd be up to changing those things across the whole Repo, if you decide to do it that way.

Anyways, have a great day (and a great hacktoberfest!)
An

Outdated link in Trouble shooting guide - Deployment Errors

The Ports Unavailable section refers to an outdated line number of the file https://github.com/appsmithorg/appsmith/blob/master/deploy/install.sh

JWT doc functionality questions

Hi there!

I've been setting up an AppSmith deployment authenticated with SSO and going through the JWT documentation, and I had a few questions:

1. Where does the <<ENV_VARIABLE>> syntax work?

From the docs:

The environment variable APPSMITH_USER_OAUTH2_ACCESS_TOKEN stores access token. You can read the value of the access token by using it in between the angular braces<<>>.

I didn't see APPSMITH_USER_OAUTH2_ACCESS_TOKEN appear anywhere in the appsmithorg/appsmith codebase, and using double angle brackets in a datasource or query just passed along the string as a literal. Wrapping that in double curly brackets, e.g. {{<<APPSMITH_USER_OAUTH2_ACCESS_TOKEN>>}} produces null, but so does putting any invalid identifier between {{ }}.

2. Is {{appsmith.user.idToken}} supposed to be functional?

From the docs:

You can read the value of an id token in your APIs/Queries by using a mustache sign {{}}.

{{appsmith.user.idToken}}

When I use {{appsmith.user.idToken}}, I get {}, meaning that idToken is an empty object. Looking through the codebase, the only time idToken appears is here, where it's set to an empty map, which matches my experience. I have SSO configured through Google and that works fine.

[Bug] : Remove onRowUpdate event in table docs

We don't support this as of now and this gives a wrong impression to the end user that we do.
https://docs.appsmith.com/widget-reference/table#events

Link Corrections and other minor corrections

Hi,
I just noticed that the table of contents contains an unwanted entry in the Readme.md file.

I guess it is caused by the markdown heading tag, so I will remove that.
Also, I found a few grammatical errors and capitalization errors in the document(especially in the changelog file). So can I work on these?

@Nikhil-Nandagopal

Appsmith Hacktoberfest Content Contributions - Help us write awesome tutorials, how-to-guides, blog posts and many more!

Hey Contributors 👋🏻 !

This issue tracks all the content ideas, assignees, and contributions received as a part of Hacktoberfest. Our primary focus is to work on different how-to guides, tutorials, and blog posts that will help developers get started on Appsmith.

To get started, please fill out the form here, and we highly recommend you to follow these guidelines. Also, before working on an issue, please discuss it with the maintainer and get it assigned to you 😄

This can be a great way to get started with Appsmith and contribute to our fantastic open-source project.

Feel free to share more content ideas as a comment on this issue.

How-to Guides (Data source reference)

• How to use Redis as a data source on Appsmith #209
• How to use ArangoDB as a data source on Appsmith #210
• How to use Snowflake as a data source on Appsmith #211
• How to use Redshift as a data source on Appsmith #212
• How to use MsSQL as a data source on Appsmith #213
• How to use ElasticSearch as a data source on Appsmith #214
• How to work with GraphQL on Appsmith #215
• How to use Notion as a Database on Appsmith #216

How-to Guides (Appsmith Widget reference)

• How to create Custom Charts on Appsmith #217
• How to use filters on Appsmith Table Widget #218
• How to build auto-generated forms using the list widget #219
• How to group multiple widgets on Appsmith #220

Blog and Tutorial Contributions

On Appsmith, you can build internal applications, admin panels, CRUD dashboards, and many more. If you would like to build one and write a blog post or tutorial around it, please share your idea with us, and we will create an issue on this repo. Our editorial team will review it, and you can raise a PR to list it on the documentation. Here are some of the examples of blog posts and tutorials to help you get started.

1. Building an E-commerce Store using Appsmith and Postgres
2. Building a Shopify Admin Panel: A Step by Step Guide

The blog post can be published either on your blog or can be submitted to the Appsmith blog.

Please comment on what you would like to work on, and we will update this list with your name and assign the issue to you.

To check out our swag and events, please visit https://hacktoberfest.appsmith.com

Happy Hacking!

Outdated Reference: Build a Catalog tutorial references the Dropdown widget, which is now the Select widget

There is a section here that contains references and links to the old Dropdown widget, which I believe is now the Select widget.

Add Errors from Debugger

This issue is to track documentation for different errors that are faced by users. Users can directly, navigate through the docs from our debugger, thereby helping them solve JS/Action/Plugin errors more quickly.

More information here: https://docs.appsmith.com/troubleshooting-guide

Following are the issues that are seen frequently, and have documentation.

• Data Mismatch Error - This value does not evaluate to type "Array" Tables Widget

• Data Mismatch Error - This value does not evaluate to type "Array<{ label: string, value: string }>" DropDown Widget

• Data Mismatch Error - The value does not evaluate to type Array<x: string, y: number> Chart Widget

• DatePicker Invalid Date Error - Value does not match ISO 8601 standard date string

• Syntax Error- This value does not evaluate to type "Array<Object>". Transform it using JS inside '{{ }}'

• Missing required field row index. - Google Sheets Plugin

• Plugin failed to parse JSON {Your JSON} with error: Unable to parse request body. Expected a row object. Google Sheets Plugin

Appsmith App for Adalo Integration

@imknight you can work on this issue.

#244 (comment)

Need to improve the S3 doc around how to use base64 encoding option for upload/read query

Need to improve the S3 doc around how to use base64 encoding option for upload/read query

How to group multiple widgets on Appsmith

Please make sure that your documentation has the following -

1. An Example app that shows the required widget.
2. Add screenshots for a better understanding of the topic.
3. Add code snippets wherever necessary.
   For documentation guidelines, click here.

Update phrase in introduction section

In the introduction page, we've the following

Here are five simple steps to create an app in Appsmith:

By steps, usually users understand a sequence of actions that someone need to complete in order to achieve something. The described points are not steps but are functionalities/features/use cases. Changing the text to something else seems more appropriate in this case.

Thanks for fixing these @saintmalik. But note that typo fixes won't get counted for Hacktoberfest

Thanks for fixing these @saintmalik. But note that typo fixes won't get counted for Hacktoberfest

No problem

[Feature]: Documentation for SSH Plugin

Summary

SSH plugin allows server-side commands to be called and return the output through the SSH.
We need to add documentation for this feature here. Link to feature: appsmithorg/appsmith#2404

How to use MsSQL as a data source on Appsmith

Please cover the following topics in this guide -

1. Integrating the data source into Appsmith.
2. Fetching data from the connected data source.
3. Binding the data to a widget.
   For documentation guidelines, click here.

Mention how to parse URL parameter on navigateTo reference

Currently, the documentation for navigateTo() is mentioning about the second argument params.
If we could mention how to access the parameters along with a link to appsmith.URL, that would be a nice addition.

Changes needed in README.md

In the last line of the current README.md, the url is not properly linked in the markdown. Also there is some more revamping can be done in the README.md file of the current repository.

Add GitHub Issue Forms

Summary

As we can see the repository has no predefined Issue template, because of which there is non uniformity in the issues section.

GitHub has recently rolled out a public beta for their issue forms feature. This would allow you to create interactive issue templates and validate them 🤯.

Motivation

I have contributed the same for appsmith/appsmith. Would like to work the same for this repository as well!

Update/Edit Appsmith Heroku Setup

The current documentation for the Appsmith Heroku setup needs a lot of editing and formatting. The images aren't also clear.

Link: https://docs.appsmith.com/setup/heroku

[Bug] Document update for google sheet

Description

The old image is displayed when the user clicks on the documentation link from the google sheet query pane

What happened

When the user clicks on the documentation link from the query pane, the Image in the doc is very old it needs to be updated.

In order to do this, please create a contribution to our documentation repository by following the Documentation Contribution Guidelines

Important Details

• Version: Cloud
• OS: MacOs
• Browser chrome
• Environment release

[Task] Restructure and improve on 'Designing an Application' documentation

Changes that we discussed for the Working with Widgets page

Main things to do,

• Change structure to

├── Core Concepts
│   ├── Designing an Application
│   │   ├── Application Layout
│   │   ├── Working with Widgets

• Write an introductory Designing an Application page
• Move content in Designing an Application to Working with Widgets

Addtionally,

• Relook at title Working with Widgets; alternative is Dragging and Dropping Widgets
• Have the videos visually convey our message on a real app, could be on one of our Example apps

How to build auto-generated forms using the list widget

Please make sure that your documentation has the following -

1. An Example app that shows the required widget.
2. Add screenshots for a better understanding of the topic.
3. Add code snippets wherever necessary.
   For documentation guidelines, click here.

How to use Redis as a data source on Appsmith

Please cover the following topics in this guide -

1. Integrating the datasource into Appsmith.
2. Fetching data from the datasource connected.
3. Binding the data to a widget.

For documentation guidelines, click here.

How to use Snowflake as a data source on Appsmith

Please cover the following topics in this guide -

1. Integrating the datasource into Appsmith.
2. Fetching data from the datasource connected.
3. Binding the data to a widget.
   For documentation guidelines, click here.

How to use Notion as a Database on Appsmith

Please cover the following topics in this guide -

1. Integrating the data source into Appsmith.
2. Fetching data from the connected data source.
3. Binding the data to a widget.
   For documentation guidelines, click here.

How to use filters on Appsmith Table Widget

Please make sure that your documentation has the following -

1. An Example app that shows the required widget.
2. Add screenshots for a better understanding of the topic.
3. Add code snippets wherever necessary.
   For documentation guidelines, click here.

How to use ArangoDB as a data source on Appsmith

Please cover the following topics in this guide -

1. Integrating the datasource into Appsmith.
2. Fetching data from the datasource connected.
3. Binding the data to a widget.
   For documentation guidelines, click here.

Weekly changelogs are missing since June :(

Great work on this project. I know the work is fast paced but a periodic changelog would help. Not as fast as weekly but a periodic one.

Support Form link broken

Problem

Support Forum link in the header, routes to https://github.com/appsmithorg/appsmith/discussions, which shows Page not found as appsmith repo's discussions feature is not enabled

Solution

The Support forum link in the header can be changed to either https://community.appsmith.com/ or discord community invite link.

Add documentation showing how to bind widget data to an API

We have tutorials & steps showing how to bind data returned from an API to a UI widget. But we don't seem to have any handy documentation showing the inverse. If I wish to bind data from a widget to an API / DB query, there doesn't seem to be any tutorial around this. Seems like a basic use case that we've missed out on documenting.

docs start error: unknown block tag: embed

docs start error: unknown block tag: embed

I hope start appsmith-docs locally，but I have this error

$ gitbook serve
Live reload server started on port: 35729
Press CTRL+C to quit ...

info: 8 plugins are installed 
info: loading plugin "url-embed"... OK 
info: loading plugin "livereload"... OK 
info: loading plugin "highlight"... OK 
info: loading plugin "search"... OK 
info: loading plugin "lunr"... OK 
info: loading plugin "sharing"... OK 
info: loading plugin "fontsettings"... OK 
info: loading plugin "theme-default"... OK 
info: found 178 pages 
info: found 1239 asset files 
error: error while generating page "README.md": 

Template render error: (F:\workspace\github.com\appsmith-docs\README.md) [Line 22, Column 2]
  unknown block tag: embed

This is my environmental information

• OS: windows11
• CLI version: 2.3.2
• GitBook version: 3.2.3
• node version v14.17.1

I found that there is no book.json file in the project root directory，Is there a plugin missing?

Add Appsmith Shortcuts Page

Add triggeredRow property to the documentation

I've seen that some users are still using Table.selectedRow instead of using Table.triggeredRow which causes unintentional effects. We need to add the usage of Table.selectedRow into the documentation to avoid this.

Tutorial for admin store dashboards

Creating this issue for @rohiraanjali to create a tutorial

Broken Link: Building a Store Catalog Manager link `private instance` is broken

Third paragraph, second link private instance gives a 404 error.

Add a sample query for aggregation in mongodb

The mongodb query documentation page has no example on how to write a aggregation query.

https://docs.appsmith.com/datasource-reference/querying-mongodb/mongo-syntax

Need to add few examples on it.

How to use Redshift as a data source on Appsmith

Please cover the following topics in this guide -

1. Integrating the data source into Appsmith.
2. Fetching data from the connected data source.
3. Binding the data to a widget.
   For documentation guidelines, click here.