Track and manage bugs effectively using Appsmith and Airtable
1
August
2022
Tutorial

Track and manage bugs effectively using Appsmith and Airtable

Track and manage bugs effectively using Appsmith and Airtable
Vidushi Gupta
0
 minutes ↗
#
tutorial
#
dashboard
#
announcement
Tutorial

Airtable is a popular choice for developers who want to manage tabular data easily. While it's easy to use Airtable as a backend, it can be challenging to build a custom UI from scratch. This is where Appsmith comes in. With Appsmith's native Airtable integration, you can create dashboards, CRUD apps, and internal tools in minutes.

In this tutorial, we'll use an Airtable base to build an issue tracker. We'll start by creating a database in Airtable and then importing our data into Appsmith and building on top of it using JavaScript. 

With this application, users can:

  • Connect to their Airtable base.
  • Add a new bug/issue
  • Update the existing issue
  • View the current bugs in the management tool.

Let's jump in!

Step 1:  Getting started

Create a new Appsmith App 

First, we need to create a new application in Appsmith so we can build it out.

  • Visit https://www.appsmith.com to create a new account or login in to an existing one.
  • Create a new application in your preferred organization and edit it.

Connect to Airtable

Now, we need to add your Airtable datasource to the app. In this case, we will clone an existing Airtable sample to provide our data. 

  • Create a new datasource by clicking ‘+’ on the Datasources tab from the entity explorer and then select Airtable.
  • Rename the datasource. Select API Key as the Authentication Type and enter your API Key in the input field. Hit Save.
  • Choose a workspace and a base in the dialog box and hit 'Create Table.'
  • Go to https://airtable.com/api and select the base titled 'All bugs and issues'
  • In the 'Introduction' section of the documentation, copy the Base ID (highlighted in green in the picture below)
  • Select the "Bugs and issues Table" on the left pane. Copy the table name highlighted in green in the image below.

Step 2 : Set up UI for the App

Wireframe

Here is the wireframe for what we are trying to create.

Including the modal that is used to add new bugs.

Create your widgets

Using the wireframe as a guide, create the UI for the application using the drag and drop editor. Here is a suggested process.

  • Choose a preferred theme from the Theme properties option in the property pane on the right.
  • Add a container widget with a text widget for your app's header.
  • Three (or as many as you like) stats boxes on the canvas to display essential statistics at a glance.
  • A container with a text, icon button, and list widget for showing a list of all the issues.
  • A container with text, button, select and list widgets for showing details of the selected issues.
  • A modal with a text, icon button, and JSON form widgets for adding a new bug entry.

Step 3 : Binding data on widgets

Listing records on the List widget

The list of bugs/issues should look something like this. In order to populate the data, create a new query and bind the results to the text.

  • Create a new query from the left pane which uses the Airtable datasource you created in the first step. Rename the query to getBase and choose the Commands to be List records. We chose this command because we would like to list all the bugs and issues in our app. Enter the Base ID and Table Name you copied in the steps above. 
  • Hit Run and you should see a JSON response generated which lists the records. 
  • To bind this response to the list widget, we would first create a JSObject that maps the fields from the records. Create a new JSObject and paste in the following snippet.

getAirTableFields: () => {
  return getBase.data.records.map((record) => {
    let row = record.fields;
    row["id"] = record.id;
    return row;
  });
};


  • In this JSObject, we get the response from the GetBase query, map the fields, and get the id for every row in the table. 
  • Bind the list with this data using  {{JSObject1.getAirTableFields()}}
  • For getting the bug name and the source, bind the text widgets within the list with {{currentItem.Name}} and {{currentItem.Bug_source}} respectively.

Getting details of the selected bug

When we click on an item from the list, we should populate the view container with details of the selected issue


  • In order to get details about the selected bug on the container placed on the right, we would just use the {{List.selectedItem.attribute}} for all the details you wish to display. For example, The bug title can be displayed using {{List1.selectedItem.Name}}, for Associated features write {{List1.selectedItem.Associated_features}}, For priority write {{List1.selectedItem.Priority}}. So on and so forth. 
  • For a closed/open bug field, use the ternary format to display the status. {{List1.selectedItem.Closed == '1'? "Closed": "Open"}}
  • To bind the attachments for the selected bug, write {{List1.selectedItem['Attachments']}} to bind data on the list widget in the right container. 
  • Just like binding the bug details, in the image widget enter {{currentItem.url}} in the property pane to display the image attached
  • Use {{currentItem.filename}} and {{currentItem.type}} to display the file name and type on the text widget.

Displaying statistics on the statsboxes

These statsboxes should help display important information at a glance from this database. As the number of issues grows, this will give us a quick understanding of the status.

  • In order to populate the statsboxes with statistics, we would create a JSObject function that maps to fields and then to Priority within the same JSON response and check if the value is High, meaning the priority is set to high. What we get in the response is our desired statistic. 

highPriority: () => {
  const high = getBase.data.records.map((record) => record.fields.Priority);
  return high.filter((currentItem) => currentItem == "High").length;
};

  • Bind this output in the text widget using {{JSObject1.highPriority()}}
  • In the very same manner, write a function and bind the output for the number of bugs labeled open and critical

Adding a new Bug/Issue

When clicking the button to add an issue, a modal appears with a form that creates a new entry. It looks like this:

  • Set the Modal to open on onClick of the icon button on the top right corner of the container on the left. 

  • Populate the JSON Form with source data by pasting the following.

{
"fields": { 
    "Bug Title": "",
    "Priority": "",
    "Assigned To":"",
    "Status": "",
    "Screenshots": [
      {
        "URL": ""
      }
    ],
    "Bug Description": "",
    "Bug Source": "",
    "Features Associated": "",
    "Created by": ""
}
}


You can customize the field configuration as per your requirement. Here’s what the JSON Form looks like https://www.loom.com/share/1087b1e8932846feaf3dd03e8b3bb780

  • To insert a new record, we’ll write a new query. 
    Create a new query and name it as InsertQuery. Choose the command to be Create Records. Add in your Base ID and Table Name. For the Records, bind the form data from the JSON form for every field. 

[
  {
    "fields": {
      "Name": "{{JSONForm1.formData.fields['Bug Title']}}",
      "Priority": "{{JSONForm1.formData.fields['Priority']}}",
      "Status": "{{JSONForm1.formData.fields['Status']}}",
      "Attachments": [
        {
          "url": "{{JSONForm1.formData.fields.Screenshots[0].URL}}"
        }
      ],
      "Assigned_to": "{{JSONForm1.formData.fields['Assigned To']}}",
      "Description": "{{JSONForm1.formData.fields['Bug Description']}}",
      "Bug_source": "{{JSONForm1.formData.fields['Bug Source']}}",
      "Associated_features": "{{JSONForm1.formData.fields['Features Associated']}}",
      "Created_by": "{{JSONForm1.formData.fields['Created by']}}"
    }
  }
]

  • We’ll make a new JSObject function to run multiple queries when the Add Bug button is clicked in the form

addBug: async () => {
  InsertQuery.run();
  getBase.run();
  closeModal("Modal2");
};
  • Now bind this function on onClick of the Add Bug button in the JSON Form.

Update fields of a bug

This query/button can help update the details of the bug. In this case, we update the priority and statuses. 

To update the priority and status of a selected bug, an Update Records query would be used. 

  • Create a new query and rename it as updateQuery. Choose the command to be Update Records and enter your BaseID and Table Name. In the records field, paste the following to get the selectedOptionValue of the select widgets

[
    {
      "id": {{List2.selectedItem.id}},
      "fields": {  
        "Priority": {{Select1.selectedOptionValue}},
        "Status":{{Select2.selectedOptionValue}}
      }
    }
]

  • Now, bind this query to run on onClick of the update button.

Final thoughts

And that’s it! You have your bug tracker application ready using Appsmith’s native Airtable integration 🎉

First, you created a new Appsmith application and connected it to Airtable. Then you created the UI for your app using the drag and drop tools in Appsmith. Finally, you tied the data from Airtable to the UI widgets. Your final app should look similar to this:

Please use this form to contact us if you have any template requests for internal tools that you need, and we will get to work! 

If you have any questions, contact us on Discord. You can also keep up with us on Twitter and YouTube.

Build Custom UI on top of Airtable data
25
July
2022
Announcement

Build Custom UI on top of Airtable data

Build Custom UI on top of Airtable data
Rishabh Kaul
0
 minutes ↗
#
integrations
#
databases
#
announcement
Announcement

Today, our integration with Airtable comes out of beta and is available for everyone 🎉! You can now build custom UIs and interact with applications built on Airtable, with minimal configuration.

While it is possible to use the default API interface to connect to Airtable, we wanted to make it easier for you to directly connect your Airtable account and create applications faster than ever. This new data connector introduces a number of features:

  • Integration located in the “Datasources” section
  • Connect to your Airtable account with either an API Key or a Bearer Token (OAuth 2.0)
  • Create queries to fetch, create, retrieve, update and delete data from a datasource using the Appsmith query editor. 
  • List command lets you display all the data from Airtable, and can also present data that has been filtered and sorted based on fields, records, time zones, etc. 

For details and information on how to use this new integration (with videos!), check out our Airtable documentation here. See it in action on our full tutorial here, where we build an issue tracker with Airtable as backend. As always, let us know what you think!

Introducing Version Control with Git
3
June
2022
Announcement

Introducing Version Control with Git

Introducing Version Control with Git
Visahavel Parthasarathy
0
 minutes ↗
#
announcement
#
community
#
developer
Announcement

Today we're excited to announce the launch of Version Control with Git, so that developers can collaborate and version control their applications. This has been one of the most requested features from our community.

While low-code frameworks like Appsmith save a developer's time via easier application management, faster plugging in of data sources, and effortless creation of UI, there are still aspects of a developer's usual workflow that aren't native to low-code platforms.

Version Control with Git, enables us to take a big step towards that.

Here's a short video on how you can use Version Control with Git:

Version Control with Git Highlights

Version Control with Git allows multiple developers to add their work in a git branch, raise a pull request for code reviews, integrate with CI/CD pipelines so that their changes go live when their pull requests are approved, and provide a commit history to go back to a previous version if something were to go wrong. You can now also test a new addition to your app on a separate branch without breaking your deployed version.

You can connect to any popular version control tool of your liking: Github, Gitlab, Bitbucket, AWS Code Commit and more.

Furthermore, if you're a large organization using isolated environments for your production and test apps, you can now ensure that your applications can only be promoted to production via your CI/CD processes.

Version Control For All

Appsmith's Community Edition users will be able to connect unlimited public repos and up to 3 private repos.

In contrast, low-code frameworks in the market today either don't offer this functionality as part of their open source or free edition (and instead offer a simple auto-save), or push it deep into their most expensive pricing plans (like Retool).

Head over to our Version Control with Git documentation on how to set up version control with your favorite version control tools and get the most out of it.

May Round-up: App Theming, New Copy Paste Experience, and Product Updates
2
June
2022
Monthly Round-up

May Round-up: App Theming, New Copy Paste Experience, and Product Updates

May Round-up: App Theming, New Copy Paste Experience, and Product Updates
Vihar Kurama
0
 minutes ↗
#
announcement
#
developer
#
community
Monthly Round-up

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days! I am here to give you all the deets; follow along!

Application Theming [Beta]

One of our most awaited features — App Theming — is now out! Style your pages and widgets using global controls. We've also made it easy to change the visual layout with a single click.

Note that while all apps support theming, changing the theme or customizing the theme may not update the app entirely for older apps. We’ve done this to prevent overriding any changes you may have already made while styling your widgets. (Note that, this is a beta feature at the moment, and we are going to be improving it in the coming weeks).

Theming automatically updates multiple properties, including fonts, colors, borders, shadows, etc. All these properties can be configured from the property pane globally. Read the complete documentation here.

Discard Changes/ Delete Branch on Version Control

Version Control with Git is well-loved by Appsmith users, especially when working with teams. We’ve enhanced this feature by adding another option other than ‘commit’ to make it more flexible. Now you can discard changes on the current branch and reload the earlier, committed application. Additionally, you can also delete the stale or unused branches.

Allowing Camera and Microphone on iFrame

Are you communicating to other websites from Appsmith? Our latest improvements will help you get the most out of it. All you have to do is use allow="camera; microphone" on the attributes to be able to access the camera/microphone on the iframe.

Making it easy for you on Windows using WSL

Have trouble setting up the Appsmith server on Windows? Don’t worry. We’ve worked on some documentation to help you contribute to Appsmith on Windows operating systems that use WSL; check it out here. Prerequisite MongoDB is included, along with detailed notes on building/running the code and how to set up your code editor.

Improvements

New Copy Paste Experience

Duplicating widgets on Appsmith is now easier with the new-copy-paste experience. Here’s a quick summary of how it works:

When the layout widget is selected:

  • If the mouse pointer is not on the layout widget, the widget is pasted inside the layout widget at the bottom of the canvas.
  • If the mouse pointer is on the layout widget, the pasted widget will be aligned top-left of the mouse pointer inside the layout widget.

If the non-layout widget is selected, no matter where the mouse pointer is, It is pasted below the non-layout widget, and the widgets are aligned horizontally.

If the mouse pointer is on a widget and no widgets are selected, widgets will be posted below and are horizontally aligned.

More Pages? View them all at once!

We’ve added a new option to resize the entity explorer page to view more pages at once. Just find the expander and extend it based on your comfort :)

Total Records and Page Count on Table Header

More love to the table widget; we’ve just added total record count and page count on the table header.

CleanShot 2022-05-25 at 15.34.35@2x.png
Better Way of Running JS Objects

We’ve revamped the way we run JS Objects from the JS Editor. Just put the cursor inside the function and hit the RUN button. The editor automatically identifies which function you’re working on; you can always use the shortcuts to make this easier!

Additionally, the page load functions can be configured from the Settings tab, just like how we do it from queries!

CleanShot 2022-05-25 at 15.40.46@2x.png
Added top-level isValid property to JSONForm

Currently, the JSONForm widget has an isValid property inside the fieldState for each field. However, there is no top-level property to check all fields at once. With this update, we added an isValid property which can be used to check if the current form is valid (passes all validation) or not.

CleanShot 2022-05-25 at 15.47.07@2x.png
Enhanced Map Widget

We’ve added a new property to the Map widget that lets us enable search location from Map without entering the coordinates. You can search directly on the map and display searched fields on other widgets without clicking on the Map widget.

CleanShot 2022-05-25 at 15.48.29@2x.png

Collaborations, Technical Content, Videos & Tutorials

Last month was hectic! We’ve published a new video on how you can generate PDFs from Appsmith using APITemplate; not just this, we’ve successfully hosted a couple of live sessions.

  • In this Video, Confidence, our Developer Advocate, show us how you can build a workflow to generate PDFs from Appsmith by consuming APIs from APITemplate.io.
  • Shams Mosowi from Rowy.io collaborated with us to demonstrate how we can build an expense management tool that employees can use to submit expenses for approval using Rowy as the backend.
  • Getting started with Version Control with Git on Appsmith? We’ve created a guide on how you can connect to a Git provider to version control Appsmith apps. Watch it here.

If you're curious about what we were up to, look no further and follow this link.

If you’re interested in using a database not listed on our website as an integration, please let us know about it by raising a PR on Github, and we will do our best to include it at the earliest.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

Build a Contact Application with Django
4
May
2022
Tutorial

Build a Contact Application with Django

Build a Contact Application with Django
Anita Achu
0
 minutes ↗
#
analytics
#
announcement
#
app-development
Tutorial

A contact application is a database that collects and stores user contact data. The contact app is a widely used application, similar to the contact application on your mobile phone, that stores data such as user contact names, phone numbers, email addresses, etc. Businesses can use this application to manage their customers' information and store personal contact data.

This tutorial primarily focuses on integrating a contact API in Python using the Django Rest Framework. This application will have functionalities that allow users to create, edit, and delete contact data. While this goes on the backend of the application, we will create the interface of our application using Appsmith's pre-built UI widgets.

Appsmith is a powerful open-source low-code framework for creating internal tools with features such as pre-built UI widgets that connect to multiple data sources: APIs, databases, GraphQL, etc., with support for OAuth 2.0 and CURL.

Appsmith allows you to create web application interfaces with little or no code. You don't need to be a developer to create an application dashboard using Appsmith. Using Appsmith's drag-and-drop UI widgets, we will create a dashboard for our application.

Prerequisites

Project setup: Building a contact book API

Creating a virtual environment

We will begin by creating a virtual environment for our project. The essence of a virtual environment is to create a separate environment for all installed packages and dependencies.

The command below shows how to create a virtual environment in your terminal:

pip install virtualenvvirtualenv env


Activate our virtual environment

For Windows:

env\Scripts\activate

For Mac/Linux:

source env/bin/activate

Virtual environment activated!

Cloning a repository

Next, we will be cloning an already existing repository built with the Django Rest Framework. This repo contains a contact application with functionalities that allow users to create, edit, and delete contact data.

To clone the repo, run these lines of code in your terminal:

git clone https://github.com/Anitaachu/contactAPI.gitcd contactAPI


Dependencies installation

Once this is completed, we will be installing a couple of dependencies and packages required for this project using the pip These packages are already contained in your cloned requirements.txt file.

Run this command to create a requirements.txt file and install the packages:

pip install -r requirements.txt


Next, migrate the data to the database and create a superuser. To this by running the following commands:

python manage.py migratepython manage.py createsuperuser

Testing the application

Next, let's test this application locally, using the following command: python manage.py runserver

In your browser hit the endpoint http://127.0.0.1:8000/. You can also access the admin page using this URL http://127.0.0.1:8000/admin/

list_contact
Admin_page

Great! Our application is running! 🎉

Getting started with Appsmith

With our API up and running, the next phase of this project is creating an interface using Appsmith pre-built widgets and connecting these widgets to our data source (API). We will be doing this by writing some queries that will be implemented with the widgets.

Let’s dive in!

Connecting to a Datasource

It takes a few minutes to connect to a datasource, and you can develop tools on the database of your choosing. You can either connect to a database, an API, or both. For this project, we will connect Appsmith to a deployed API using the API we earlier created. The deployed API can be accessed using this URL.

appsmith_dashboard
  • Ensure the API you intend to connect is already deployed. You can use Heroku or any other deployment service.

Add the URL of your deployed API and click on ‘run'.

datasource

Datasource successfully connected!

Now let’s get to work!

Creating a dashboard with the Appsmith widget

With Appsmith, you can build a fully customized interface with no code. Appsmith has many pre-built UI widgets such as tables, forms, buttons, boxes, images, and more, all available to help you create exciting applications.

Let’s begin! Firstly, let's create a table that will display our contact data.

Follow these steps:

  • From the widget section, drag and drop the table widget onto the canvas in this manner:
dashboard
  • Edit the default data from the property pane and add the column names as contained in our database. As contained in our database, the column names include "_first_name", "last_name", "phonenumber", "email", "address", and "birthday."
dashboard
  • Next, edit the Table Data property in Table Widget’s property pane to {{Contact_API.data}} in other access data from the query.
dasboard

Next, we will create a button widget that will be used to create contacts. When a user clicks this button, it navigates to another page that contains a form widget.

Adding a button and form widget

Drag and drop the button widget into the canvas.

dashboard

In the label section, change the ‘submit’ label to 'create contact'. Next, edit the button widget, in the Events > onClick > Navigate to.

dashboard

Under "Page Name or URL" type in 'Page 2'. By doing this, when we click on the "Create contact" button, it navigates us to a new page that will take us to the contact form.

Lastly, click on the "+" icon at the top left to add a new page.

Form widget

This new page will contain a contact form that will be used to add a new contact, using input fields where users can enter the contact data they wish to create.

Let’s create a form using a form widget with these few steps:

  • From the widget section, drag a form widget into the canvas.
form_widget
  • Change the "Form" label to "Create contact".
  • Next, drag and drop text widgets into the form widget we just created. Edit the label name to first name, last name, etc. In this manner:
form_widget
  • Add the input widget to the canvas. This widget will allow the user to enter their contact name, phone number, address, etc.
form_widget
  • Add functionality to the submit button. To do this, create a new query on the right side of the page.
form_widget
form_widget
  • Add connect the query to the submit button.
form_widget
  • Lastly, set the body property of your datasource to:
{"first_name": "{{Input1.text}}","last_name": "{{Input2.text}}","phone_number": "{{Input3.text}}","email":"{{Input4.text}}","address":"{{Input5.text}}","birthday": "{{Input6.text}}"}


By doing this, a connection will be created between the widget and the datasource.

Now let’s test out our widget to ensure that it's functioning. Firstly, on the contact dashboard, click on the "Create Contact" button. The button would redirect to another page that contains a contact form.

widget_5_new

Fill out this form and hit the submit button. You will notice that contact details that are added through the form are displayed on our application dashboard.

form_widget

So far, we have been able to create a form widget where users can create contacts, and these contacts will be displayed on our dashboard.

Great!

Asides creating contacts, contact applications also have features where users can edit contacts or delete contacts that are no longer needed. Let’s add the edit and delete contact buttons and write queries that will connect these buttons to our datasource.

Edit contact button

In our application dashboard, add an edit button. This button will also be connected to our datasource. Let’s work on our edit button.

  • Step 1: In the application dashboard, create a new column named "edit contact".
  • Step 2: Next, click on the Settings symbol in the “Edit Contact”* column to add some functions to it.
  • Step 3: Replace the following:
  • Column Type: Choose ‘Button’.
  • Label: Replace ‘Action’ with ‘Edit’.
  • onClick: Choose ‘Open modal
  • Lastly, under 'Modal Name', create a new modal.

When you click on the edit button, it spins up a modal. We will edit this modal and add some queries to it to enhance its functionality. To do this:

  • First, create a text and input widget similar to that of the form widget in the modal. This way:
modal
  • Add a new datasource and enter the URL of the datasource.
datasource

Now you can edit a contact by clicking on the edit button and adding new data to replace the former contact data.

For the delete function, we simply repeat the same process as that of the edit button. However, the modal of the delete may differ. The Delete modal should appear like this:

modal

Just as we did for the first modal, create a query that will connect the delete button widget to a data source.

button_widget

Set the body property of your datasource to: {{Table1.selectedRow.id}}

Lastly, execute a query under Events > onClick. This button will query data from the deleted datasource you have created.

button_widget

Our widgets and datasources are well implemented and functioning properly.

Deployment

So far, we have done a great job. The last phase of this project will deploy our application. On the right section of the dashboard, click on 'Deploy'. You can also deploy this application by connecting to a Git repository.

Our application is deployed! 🎉

Finally, to test the work we have done so far. Try creating a new contact:

deployment

We will also test the delete button to ensure it's working as well:

delete_button

Successful!

In this tutorial, we created an amazing user interface for our contact application with low code. I hope you had fun building!

Happy coding!🙂

April Round-up: Multiple Widget Reflow, Readable URLs, more Product Updates
3
May
2022
Monthly Round-up

April Round-up: Multiple Widget Reflow, Readable URLs, more Product Updates

April Round-up: Multiple Widget Reflow, Readable URLs, more Product Updates
Vihar Kurama
0
 minutes ↗
#
announcement
#
community
Monthly Round-up

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days!

I am here to give you all the deets; follow along!

Introducing Multiple Widget Reflow

We’ve received a lot of positive feedback on our new drag and drop experience. Users dig being able to resize widgets and move them around. This provides them with the ultimate freedom to build applications however they want without barriers that might get in the way :P

We’ve made this even more fun and powerful by adding a multiple widget reflow feature. With this, users should be able to move widgets and resize them even when they are grouped.

This also makes the drag and drop experience more performant in avoiding UI lags while moving widgets.

Readable Application URLs

All of you have been waiting for a much-requested feature, and today, it’s finally here! The application URL now has your app name as a slug, making it easier for you to share and find your Appsmith applications. This is available immediately for all the old applications and, of course, the newly created ones. Here’s a sample app URL.


https://app.appsmith.com/app/april-round-up/home-6266f76700cba01cd0301e20

To upgrade your old app URLs, please navigate the updates section from the bottom bar and hit update. Here’s the recording of how you can do it:

Product Updates

New Response View Switchers

We've added a new response view switcher feature that lets users easily switch between response formats on the fly; you'll be able to view them in different formats (JSON, Table, RAW) based purely on ease of choice. This feature will be available on all action types (APIs/Queries on a datasource).

Added Button Variants in Table Column Type

It’s super easy to set a column type to a button on Appsmith - just navigate to column properties and update the type to Button. To make your table button more extraordinary, we’ve added the variant property taking inspiration from our button widget; with this, you can update table button types to different variants available.

CleanShot 2022-04-26 at 01.05.56@2x.png
Smart Substitution Feature on Firestore Plugin

We’ve added a smart substitution feature to Firestore plugin methods (to dynamically perform type conversions on field values in a request body). The smart substitution will work the same way for REST API requests.

Currently, this feature only gets applied to the body section of Create, Set, Add or Update commands, as this is the only input field that expects a JSON input type. This can be toggled by navigating to the settings tab on datasource.

Added MultipartFormDataType variants for REST Datasource

We’ve added ​​MultipartFormDataType variants; with this, users can add an array as a value for multipart requests on REST APIs. It will handle every item in the list as a part of the multipart request. Here’s what an example body will look like:


--IpJ9ACFxVbhXlAQuIFccoJ0K0ttFS5PVyfX3
Content-Disposition: form-data; name="myArray"
Content-Type: text/plain;charset=UTF-8
Content-Length: 3

One
--IpJ9ACFxVbhXlAQuIFccoJ0K0ttFS5PVyfX3
Content-Disposition: form-data; name="myArray"
Content-Type: application/json
Content-Length: 1

2
--IpJ9ACFxVbhXlAQuIFccoJ0K0ttFS5PVyfX3
Content-Disposition: form-data; name="myArray"
Content-Type: application/json
Content-Length: 4


Enhanced Text Widget

When the truncating text option is enabled in a text widget, the scroll switch is no longer valid; as we truncate to fix this issue, we made the following changes.

We’ve added an overflow property option with the following configurations:

  • Scroll Contents - Enables scroll in the text widget
  • Truncate Text - Enables truncation in the text widget
  • No Overflow - No scroll or truncation
CleanShot 2022-05-02 at 16.39.07@2x.png
Added Support to MinIO in S3

You can now connect MinIO instances on Appsmith using the S3 plugin. This can be done when:

  • over the unsecured connection (HTTP)
  • when secured via a CA-signed certificate (HTTPS)

You can find this connecting in a dropdown from the S3 datasource.

Select Widget is now 50x Faster on Large Datasets

We’ve been listening to a few issues with the select widgets when large datasets are used. Previously, in the case of these large data sets, the Select widget took up to 5 seconds to render. The initial render is down to ~100ms once the options are available from the API call.

Our engineers tested this thoroughly by loading 1000 options from a mock API on a newly upgraded test widget :)

New Collaborations, Technical Content, Videos & Tutorials

Last month was crazy for us; we’ve published a blog post on how you can connect Stipe on Appsmith to manage your transactions; not just this, we’ve successfully hosted four live sessions.

  • We’ve created a small guide on how you can use JSON forms on Appsmith. This widget lets you build any kind of form with JSON dynamically. Learn how to use it here.
  • Stephen Tillman, one of our active community members, joined us to show how Appsmith helped him to build a great dashboard that lets him manage credit cards on Brex using BrexAPIs. Watch the recording here.
  • Pranav and I hosted the third How Do I Do X session, where we picked questions from the community to integrate with ZohoCRM and Stripe APIs. We’ve also talked about how you can use resetWidget and clearWidget functions on Appsmith to handle form actions. Watch the recording here.

If you're curious about what we were up to, look no further and follow this link.

If you’re interested in using a database not listed on our website as an integration, please let us know about it by raising a PR on Github, and we will do our best to include it at the earliest.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

March Round-up: Templates, JSON Form, and More Product Updates
7
April
2022
Monthly Round-up

March Round-up: Templates, JSON Form, and More Product Updates

March Round-up: Templates, JSON Form, and More Product Updates
Vihar Kurama
0
 minutes ↗
#
announcement
#
applications
#
community
#
Templates
Monthly Round-up

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days!

I am here to give you all the deets; follow along!

A Headstart for Your Apps!

We’re launching templates! Our ready-made apps are easy to use, forkable, and are bound to give you a little nudge in the right direction. Directly connect your datasource and get customizing!

The Appsmith templates library will be an ever-growing forkable collection of pre-made applications. These apps span across use-cases that will speed up onboarding for new users and makes application development faster.

You can access templates on our website and inside your Appsmith dashboard.

Read the full announcement here.

All-New JSON Form Widget

We’ve just launched the JSON Form Widget, one of our most requested features. It’s live on the cloud app and will be live on the self-hosted app very soon. The JSON form widget is helpful for quickly generating (dynamic or otherwise) forms from JSON fields from queries, APIs, or JS Objects. Check out the documentation for more details.

Here's a short video on how you can generate a form from a table:

Read the full announcement here.

Promises in the Table Buttons

The table widget is one of the most used widgets on Appsmith; it gives the ability to convert column data into different data types, including buttons! With this, developers can add different actions on the onClick property of the button, for example, redirections, showing modals, running queries, etc. Appsmith supports JS throughout the platform using the moustache syntax, but using JS promises to execute actions in the sequence was limited. But now, we got you covered; the Table Button (columns that are set button type) also supports the async-await functions. All triggers are wrapped in a promise, so any missed error will result in an uncaught promise error.

Here’s a simple snippet that can be used in the table button’s onClick property to run a query and then show an alert:


{{
  (function() {
        // the .then will not run if the promise is not returned
        return MockApi.run()
            .then(() => showAlert('success'))
    })()
}}


New JS Powers to Icon Button Widget

Using JavaScript, we can dynamically add and choose icons in the icon button widget. This will allow developers to customize their applications based on conditions, actions, etc. Here’s a simple example: if you’re adding different links to an icon button widget, it can be super handy. You can update the button icon based on the URL – Google Icon when the icon button redirects to a google page, GitHub icon when the icon button redirects to a GitHub page, etc.

CleanShot 2022-03-31 at 11.51.51@2x.png

Not just that, you could also replace the close buttons on the modal with the Icon Button widget for more customization.

Product Updates

Updated Shortcuts for Ease

To create new queries on Appsmith using keyboard shortcuts, you’ll need to use Command/Control + Plus; previously, this was Option + Shift + N. To learn more about all the shortcuts on the platform, you can use Shift + ?.

CleanShot 2022-03-31 at 12.05.33@2x.png
Smart Substitution for known MongoDB Datatypes

Smart substitution handling helps users use MongoDB types like ObjectId or ISODate inside the quotes, and the query works correctly with MongoDB. With this, you can focus more on the logic than worrying about the request data. You can toggle this feature on and off on the query settings page:

CleanShot 2022-03-31 at 12.17.48@2x.png

Following are the MongoDB types that can be handled:

  • ObjectId
  • ISODate
  • NumberLong
  • NumberDecimal
  • Timestamp
Email Notifications on Comments

Several developer teams love the commenting feature on Appsmith when building internal applications together. We've added that the comment author's email is set as the comment notification email to make it more fantastic. You can update these details from the settings page.

CleanShot 2022-03-31 at 12.46.58@2x.png

New Collaborations, Technical Content, Videos & Tutorials

Last month was crazy for us; we’ve published a couple of new blog posts and have successfully hosted four live events!

  • We’ve written an in-depth tutorial on how you can dynamically generate PDF reports from Appsmith using n8n and APISheet. Note that this can also be done by using REST APIs from APISheet.
  • Confidence, our Developer Advocate, made a few guides on using the select widget, adding search for table widget, and using a debugger on Appsmith. Do check them out :)
  • We also created a very cool interview with our engineers Ashok and Rahul on how they’ve built a react library to improve the drag and drop experience on Appsmtth. Watch it here.
  • Not just these, we also pulled out an awesome How Do I Do X on Appsmith (#2) session in our community where we discussed how you could use Pagination, do bulk uploads, and some cool hacks appsmith framework. Watch it here.

If you're curious about what we were up to, look no further and follow this link.

If you’re interested in using a database not listed on our website as an integration, please let us know about it by raising a PR on Github, and we will do our best to include it at the earliest.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

Introducing JSON Forms in Appsmith
21
April
2022
Announcement

Introducing JSON Forms in Appsmith

Introducing JSON Forms in Appsmith
Somangshu Goswami
0
 minutes ↗
#
announcement
#
app-development
#
applications
#
widgets
Announcement

Forms are a core part of most internal tools since its one of the major ways in which data is created or updated. Today, we're introducing the JSON Form Widget (documentation), which allows for a fantastic form creation experience and has been one of our top requested features.

The JSON form widget is helpful for quickly generating (dynamic or otherwise) forms from JSON fields.

Here are some highlights of this widget:

Generate Forms from Database Queries, APIs, or JS Objects

Once you drag a new JSON form widget, you will see a default form rendered with some details. You can update the source data field to infer data and then generate the form. This can be bound to any query or variable containing JSON data, such as DB queries, APIs, or JS Objects. The JSON Form widget can be bound to any other widget in Appsmith as well.

Auto Generate Form When Your Data Changes

The form fields are generated according to the source data when you enable an auto-generated form. Fields are generated according to the key-value pairs in the source data. Whenever there is a change in the source data, the form fields get updated automatically.

Configure Fields As You See Fit

Field configuration shows all the fields generated automatically in the forms. You can edit the fields to tweak properties like the field type and default value and bind specific actions by using editable properties. Most fields use the underlying data type-specific widget's properties to allow a full level of customization just like the widget would. For example, if the input type is text input, the editable properties are similar to the input widget in Appsmith.

  • Array Fields allows you to add, remove, and update a group of fields together.
  • Object Fields allow you to group fields together.
  • Add New Field, disable invalid forms (and control them further with JS), and control a widget's visibility on the app page to create highly customized dynamic forms.

Some of the ways that we've seen our users use the JSON form are:

  • Customer service executives select a form template and customize it for a customer. This is stored in a database and then sent over to the customer.
  • Users can create dynamic sign-up forms, as having both the Sign-in and Sign-up forms on the same page. Conditional switching between forms is effortless because you don't need to create two forms; you only need to change the JSON data.
  • Marketing teams are using the JSON form to create personalised form-based campaigns and much more!
Note: It’s live on the cloud app and will be live on the self-hosted version very soon.

Want to explore the JSON Form in detail? Head over to the JSON Form documentation page to learn more.

Templates: A Simple Way To Get Started With Appsmith
7
April
2022
Announcement

Templates: A Simple Way To Get Started With Appsmith

Templates: A Simple Way To Get Started With Appsmith
Rahul Kochar
0
 minutes ↗
#
Templates
#
announcement
#
applications
#
community
Announcement

Today we’re launching Templates, an easy to use, ever-growing forkable library of pre-made applications across use-cases that speeds up onboarding for new users, and makes application development faster for existing users.

You can access templates on our website as well as inside your Appsmith dashboard.

Here’s what you can do now:

  • Filter through the list of templates and get a feature-rich app with one click.
  • Discover new features in action by seeing them in these templates.
  • If you’re unsure of what to build, get inspired by the list of templates.

And here’s what we have in store for the immediate future:

  • Use Templates in an existing Application

Today, templates help you kick start an application from a blank canvas. But with V2 (launching in a month), you can add templates to an existing app.

  • Investing in a long tail of templates

We plan to add new templates every week, and are always looking for more ideas. If you have an idea for a template, you can create a GitHub issue.

  • Theming

Control the styling of all your widgets globally from a single place, helping you build amazing visual apps with just a few clicks.

💡 Pro-tip: Templates are also a great way to get buy-in from your team to adopt Appsmith. You can quickly show the templates to your colleagues, team leaders, or even the CEO and quickly give them an idea of the power of low-code.

We’re so excited to be launching templates and can’t wait to see what you do with them.

December Round-up: Docked Property Pane, Switch Group, Document Viewer Widgets, Admin Page Settings!
5
January
2022
Monthly Round-up

December Round-up: Docked Property Pane, Switch Group, Document Viewer Widgets, Admin Page Settings!

December Round-up: Docked Property Pane, Switch Group, Document Viewer Widgets, Admin Page Settings!
Vihar Kurama
0
 minutes ↗
#
community
#
widgets
#
developer
#
announcement
#
news
Monthly Round-up

Happy New Year! I am back again with a quick roundup of all the things we did in the last month of 2021! We shipped many features, fixed bugs, and hosted some fun events with our community.

No More Floaties, We’ve Got a Docked Property Pane

The Property Pane in Appsmith is a crucial part of the developer application building experience. It allows us to configure widgets’ data, actions, and events. Previously, this property pane would float around the application, next to the widget in use. We felt that this interface was rather cumbersome, especially when the number of widgets increased on the canvas. We re-invented the entire developer experience and came up with the new docked property pane. With this, users will have a clear view of what’s happening on the canvas while dropping widgets and will have complete control over customizing them on the docked property pane, which is fixed on the right side of the application.

CleanShot 2022-01-06 at 19.42.50@2x.png

New SMTP Plugin to Easily Send Emails

You asked for this, and we shipped it as soon as we could! 😎 Appsmith now has an in-built SMTP plugin to send emails from the applications without using third-party applications. The email service provider of choice can be selected from DropBox, Google, Outlook, etc. An email template can also be customized for the developers’ branding needs.

CleanShot 2022-01-02 at 14.24.29@2x.png

The SMTP datasource expects the Email configuration to add the Host Address and Port and the authentication details. In the example above (refer to the screenshot), I used my Gmail credentials. After this, you can create different queries to send emails from the plugin based on your requirements and use cases! Cool right? Here’s a screenshot of how the query can be customized:

Tip: To make all the data dynamic, you can use dynamic bindings {{ }} anywhere across these fields. Thank me later :)
CleanShot 2022-01-02 at 14.25.47@2x.png

New Widgets on the Block: Document Viewer and Switch Group

We are kicked about shipping widgets every month! It’s kind of like an unsaid rule to ship new widgets every month! Hah! In December, we added two new ones: a new document viewer widget and a switch group widget to our list.

Document Viewer Widget: The document viewer widget on Appsmith allows you to add PDFs inside the application. All you need to do is populate the URL of the document link property. These can be added from any datasource in which the incoming data points to a URL.

The widget currently supports the following extensions:

  • .txt
  • .pdf
  • .ppt (not supported by base64)
  • .pptx
  • .docx
  • .xlsx

Switch Group Widget: The new switch group widget captures user inputs from a set of binary choices. These options can be populated from a data source like an API / Query by transforming the incoming data to an array of (label, value).

New JS APIs for Geo-Location

If you’re working with maps and geo-location, we got some good news! With our new in-built geolocation APIs, you can request current user locations, and associated information This API is stored as an object containing functions to request the current user location and the coordination received from the Mozilla Geo Location API request.

To use this in action, you can simply run {{appsmith.geolocation.getCurrentPosition()}} on a button click on any action call. As soon as the API is called, the location and the timestamp will be updated on the appsmith local store variable:

{{appsmith.geolocation.currentPosition}}

Easy Self-hosting on AWS-AMI and DigitalOcean

Upgrades to AWS AMI: We refactored the first-time install script of AWS AMI deployment to fetch a new docker-compose.yml that uses a new Docker image. With this, self-hosting Appsmith with AWS-AMI is faster and smoother than ever.

Read more about this in our documentation here, and also on the AWS AMI marketplace.

Upgrades to DigitalOcean Droplet: We published a brand new DigitalOcean machine image that is easier to maintain. This image supports the new build snapshot on DigitalOcean to use the fat container deployment.

Find documentation here, and on Digitalocean marketplace here.

New Admin Settings Page to Manage Self-hosted Instances

We also shipped a new admin settings page, where you can configure all the settings on self-hosted instances/local environments when running with Docker.

You can access these by clicking on the profile icon and then selecting the Admin Settings. You’ll see the following options:

  • General: Configure appsmith instance name and primary email address.
  • Authentication: Setting to provide Google, GitHub authentication or user-name, password (form-based) authentication on self-hosted instances.
  • Email: SMTP configuration for ending emails from self-hosted instances
  • Google Maps: Configuration to allow Google Maps
  • Version: Know your appsmith version and latest features
  • Advanced: Database and domain settings configuration

We've got a host of other bug fixes and updates too, be sure to check out our consolidated release notes here.

See you next month with more updates! Do join us on Discord, follow us on Twitter, Youtube, and Linkedin to stay up to date.

November Round-up: New JS Editor, Button-group Widget and More Collabs!
7
December
2021
Announcement

November Round-up: New JS Editor, Button-group Widget and More Collabs!

November Round-up: New JS Editor, Button-group Widget and More Collabs!
Vihar Kurama
0
 minutes ↗
#
announcement
#
community
#
js
#
developer
Announcement

It's time for a quick look back on all the stuff that we did in the last 30 days! You know we like to work hard! 😎 We shipped many features, fixed bugs, and hosted some fun events with our community.

JS Editor is Now Live!

We've always strived to be a developer first product, so this is an emotional moment for us on our journey to becoming bigger and better. While it's possible to write JS on Appsmith in the small input boxes on the property pane, as fellow developers building a developer-first product, we know all too well the challenges that come with such an experience. Especially when writing vast chunks of code for transformations, logic, and action-based workflows. So we shipped out a full-fledged JS editor on Appsmith. Here's a quick sneak peek of our all-new JS Editor:

Users can now write full-fledged JS objects to create functions and variables across Appsmith and re-use them. Building this new module was challenging and involved multiple iterations, designs, and vigorous testing. The JS Editor is currently a beta feature, and we can't wait for everyone to use it soon!

Read this blog if you'd like to know more about this feature and why we built it.

New Widgets and Enhancements

New Button Groups Widget: Button Groups is the latest addition to the Appsmith widget family! The buttons are no longer alone on Appsmith. With this new widget, you can create simple buttons or menu buttons with drop-down items. This widget can come in handy when you require a header or perform specific actions on various button clicks. Of course, this widget is also heavily customizable; you can add different styles, add icons, and provide other options under a menu. To find out more about all the things you can do with it, check out the documentation!

Make All Apps Beautiful Again: At Appsmith, we work very hard to provide the best developer experience while building their internal applications with our platform. This month, we had spent a lot of time making things look much better and consistent; these could be minor changes like updating font sizes, increasing paddings, having consistent background colours, etc. But for us, everything matters, and every widget is treated with equal importance; these are consistent, feature-rich, and are tested thoroughly.

SPELING mistakes? We'll Check It! : Even the mighty have fallen with just one spelling error! Our input widget is now loaded with a new superpower! Now it can detect spelling mistakes while in Editor Mode and Preview Mode. This is all thanks to Mozilla's HTML API! To use this, be sure to toggle the Spellcheck property on the input widget.

Bug Fixes and Upgrades

Fixed Issue on selectedRow property while a: First up, we had fixed a small glitch for the selectedRow property on the Table Widget while using the multi-select row option. Now, the selectedRow property considers the last selected row to be its selection while selecting multiple rows on your Table Widget.

More accurate and faster pagination on Table Widget: While binding significant responses on table widgets, our new performance upgrades will make the pagination experience smoother and faster. Not just that, we fixed all bugs that led to displaying the wrong page numbers.

Datasource and Product Updates

No More Additional Region Configuration on S3: Currently, we have a region selector in S3 data sources, and the bucket is selected in S3 queries. This is very confusing since our query fails if we selected region-A in the datasource and it turns out our bucket is in region-B. The mental model breaks here because S3 buckets can ever belong to one and only one region. We have shipped a new feature that automatically detects the region from our service provider to avoid this!

Better Embedding Experience: While embedding Appsmith applications on the web, you can use the embed=true parameter to remove the Appsmith header. However, while navigating through pages inside the embed, the navbar comes back again! The embed=true parameter has now been retained with our latest upgrade. With this, hiding the Appsmith header on embeds can be done in a matter of seconds!

Generate Page Feature for S3: The one-click generate page feature is an awesome feature on Appsmith! With this feature, you can build a CRUD application within a single click by selecting a particular table on the datasource. Now, we have extended support for the S3 datasource to generate CRUD pages on Appsmith. You can now view and select buckets you'd like to create a CRUD page with this.

Dynamic Inputs in the URL field: Managing an entire fleet of Google Sheets? Don't worry; we got you covered. While working with Google Sheets integrations on Appsmith, you can dynamically pass the Sheet ID on the URL property. You can manage multiple Google sheets and perform operations like read/update at runtime with this. Super cool, right? Do check it out and let us know your thoughts!

By the way, I wasn't kidding when I said we were working hard. This blog isn't finished yet. Next up, I'll talk about cool new educational resources and collaborations!

New Collaborations, Technical Content, Videos & Tutorials

We've published some cool tutorials and videos and hosted a few fun events!

  • We built a dashboard on Appsmith to manage and maintain a customizable newsletter using Zapier. Read the full tutorial here, or watch us build it live here.
  • We came up with a cool stack: The SAN Stack (Supbase, Appsmith and n8n) that can help developers build internal tools and add automations, of course with open-source/fair-code! Please read the full blog post here to learn more about how it works.
  • Did you know that on Appsmith, you can call queries and APIs async? If you want to learn more about this, check out our tutorial here.

One last thing, we were able to pull off an incredible event with our friends at Appwrite! Appsmith and Appwrite make an amazing open-source duo for business applications. We built an excellent authenticated dashboard to manage a database with Appsmith as frontend and Appwrite as backend.

Thanks to Matej from Appwrite and Confidence from our team, who successfully built everything live. We thank the entire community for all the positive responses and feedback!

We've got a host of other bug fixes and updates too, be sure to check out our release notes here.

See you next month with more updates! Do join us on Discord, follow us on Twitter, Youtube, and Linkedin to stay up to date.

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms
12
November
2021
Tutorial

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms
Vihar Kurama
0
 minutes ↗
#
applications
#
code
#
announcement
#
automation
#
community
Tutorial

Automation has become the ‘it’ thing in the world of business. The need for organizations to cut costs has forced them to improve internal processes to provide improved service while also conserving time. Unfortunately, it's not always easy for teams to streamline everything internally because they often seem like complicated processes - but there are ways around this. Using Appsmith, developing internal tools can cut costs, time and even improve your workflow by connecting services across specialized platforms with Zapier.

Zapier has thousands of apps and services that can meet almost all your business automation needs. Integrating Appsmith into the mix opens up a whole new dimension. In this way, you'll have a more efficient system in which you can connect anything from, say, a MailChimp email campaign to a Google form with data from your ERP or CRM systems delivered within the app!

In this blog, we will be looking at adding automation to Appsmith applications using Zapier.

Let’s get started!

Building Internal Tools with Appsmith

Appsmith is a powerful platform to build admin panels, dashboards, crud apps, and internal tools. It allows us to create these applications with little to no coding required. We can build apps that integrate with just about any service you can think of. Today, Appsmith has more than 15+ data source integrations; a few popular ones include Postgres, MongoDB, Google Sheets. That's one of the best things about Appsmith -- it's completely customizable. But if you want to build apps with Appsmith, you will likely be doing some coding in JavaScript. Yes, we can use JS anywhere across the Appsmith applications to bind, transform and create actions to the data. In terms of UI, Appsmith provides more than 25 widgets with a wide range of styling options. While it's not hard to use Appsmith to build apps, you will need to start building them to get to the next level with Appsmith.

Now, let’s build a simple newsletter application that can help collect contacts from Appsmith and send Emails using Sendinblue via Zapier.

Building UI on Appsmith

The idea of our newsletter is to collect emails from users and to maintain campaigns on Appsmith. Let’s get started by following the below steps:

  1. Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  2. Create a new application by clicking on the Create New button under the Appsmith dashboard.
  3. We’ll now see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources and Widgets.
  4. Click on the + icon next to the widgets section and drag and drop a container widget onto the canvas.
  5. Next, bring in a form widget inside the container and two input widgets inside the form.
  6. We can configure widgets and their properties by clicking on the cog icon on the top right. This will open a property pane where we can update all the widgets settings.
  7. Now set the form labels to name and email.
  8. Additionally, you can add a text widget to add aesthetics to our application; the following is how the UI looks like:
CleanShot 2021-11-09 at 16.21.52@2x.png

Excellent, our UI is now ready; let’s create a new Zapier workflow to connect to SendInBlue and manage our newsletter.

Set Up Zapier with Appsmith

Excellent, our UI is now ready; let’s create a new Zapier workflow that can connect to SendInBlue and manage our newsletter.

  • First, create a free account on Zapier and select create custom workflow option from the dashboard.
  • On Zapier, every action on the workflow is named on Zap; to establish a connection between Zapier and Appsmith, let’s create a Webhook.
Webhooks are essentially a way to create a communication channel. It allows you to listen to an event and run a command or take any action you want. Here, the event will be triggered by an API call from Appsmith.
  • Now open the Appsmith app, click on the + icon next to the Datasource section from the sidebar, and choose Create New API.
  • Copy the webhook URL from Zapier and set the request type to POST. For ease, let’s also rename the query to addContact.
  • Here, we also need to send the data from the Form widget we had created earlier; now, let’s use their names to collect data and pass them in the Webhook.
  • Navigate to the Body tab on the API and paste the following code snippet:
{
"name":"{{Input1.text}}",
"email":"{{Input2.text}}"
}
  • This code snippet will send the information from the Input widgets to Appsmith.
  • Lastly, set the button onClick property to execute a query and set it to addContact.
  • Now, on Zapier, hit the test button and send a request by filling the form on Appsmith and hitting the API. We should see the successful response on Zapier.
CleanShot 2021-11-09 at 16.38.03@2x.png
  • Next, click on the + icon beneath the zap to add a new workflow. Select the SendInBlue Zap from the list.
  • We will need to authenticate with SendInBlue from Zapier to access the workflow; for this, you can either create a new account or log in with your existing credentials.
  • Next, set the Action type to Add or Update in Sendinblue and fill in the details related to Email; here, we can also use the data sent from the Webhook. In the following screenshot, we select the EMail field data to be the email received from the webhook.
CleanShot 2021-11-09 at 17.16.35@2x.png
  • Similarly, you can add a Send Transactional Email in Sendinblue action to the workflow using the Seninblue Zap.

With this, whenever a new user subscribes to the Newsletter, he receives a confirmation Email and will be added to the contact list on Sendinblue.

And just like that, we could configure and build an entire Newsletter manager without writing code. This application can be extended in multiple ways, such as creating new email campaigns, filtering contacts, blocking users, and many more! The entire demo app of this tutorial can be found here. This is just one example of how you can automate your apps on Appsmith!

We hope that you will have a better idea of how to leverage automation in your Appsmith applications. For more information on automating your Appsmith applications, please contact me anytime at vihar@appsmith.com.

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support
2
November
2021
Monthly Round-up

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support
Vihar Kurama
0
 minutes ↗
#
announcement
#
applications
#
app-development
#
community
#
crud
Monthly Round-up

We’re back again this month with updates from the last 30 days. We like to work hard! We’ve shipped many features, fixed bugs, and launched Hacktoberfest with a series of fun events. You can check them out here.

Widget, UI, and UX Improvements

#1 Menu Buttons on Table Widget 

Tables on Appsmith are one of the most loved widgets, and yes, we’ve upgraded them again! We can use menu buttons inside the table widget on any particular column to create menus and customize them. Open the column settings from the table’s property pane and set the column type to the menu button to see them in action! And just like that, we should be able to see a menu button on our table. Additionally, you can add more items to this by configuring the Menu Items property. That’s not all, and you can further customize the items to have icons, border radius, box shadows, and more!

#2 A New Sparkling White UI

Notice anything new? Yes, we have improved our whole design system to help developers focus more on their application editing on Appsmith. Right from searching through apps on the dashboard to building them using queries and widgets, everything is white! 

#3 Option to Hide/Unhide Properties from Property Pane

At Appsmith, we consistently focus on adding new properties and features to widgets, and sometimes it can get a bit overwhelming to see all of these at the same time! To make it less cumbersome, we’ve added an option to hide and unhide a few properties. Developers can concentrate on what’s important. To use this feature, toggle the dropdown arrow inside the property pane. You will see an option to collapse the various options within the pane. For example, in the picture below, only the header option has been made visible.

New Appsmith Functions!

You can bid goodbye to refresh buttons! Developers had to use refresh buttons on Appsmith Appsmith to be able tore-run the queries. We recognized this pain point. Now there’s a cool new feature to periodically run APIs and DB queries. You can configure these by using the  setInterval and clearInterval functions!

The setInterval function executes a trigger callback at a given interval. Here’s how you can use it while dynamically binding queries onto widgets:

setInterval(callbackFunction: Function, interval: number, id?: string)
// setInterval(() => { Query1.run() }, 10000, "myTimer");

The clearInterval function stops executing the trigger callback started with the setInterval method.

clearInterval(id: string)// clearInterval("myTimer");

Appsmith Deployments

#1 Helm Chart Support

Helm charts are now added for Appsmith deployments on Kubernetes deployments. These include application deployments with basic default support. Additionally, developers can add custom configuration for persistent volume data, custom ingress controller and secure with TLS certificate

#2 Support for Deploying Appsmith on ARM Architecture 

Previously, many developers had reported issues regarding docker-based installation of Appsmith on ARM architectures. Now, we had rectified them and had added extensive support for M1 MacBook users.  Following are the changes that we made to the scripts for docker installation:

  • We heavily refactored Dockerfile to build the image that is able to support both AMD64 and ARM64 architecture
  • We have updated docker.env.sh with additional environment variables and renamed the existing MongoDB credential variables
  • We added a document to build an image for multiple architectures using Docker buildx

Quit Buggin! Cheers to our Updated Debugging Experience

We have improved the debugging experience by adding hint and errors messages for different cases when working on queries and binding them onto widgets. To make these messages more efficient, we added a new attribute named readableError to the ActionExecutionResult object, returned to the client post after actions are executed. With this, we should be able to understand and solve complex errors quickly. Not just that, we have seen many APIs failing because of using duplicate headers or query parameters, so we have added a few hint messages to help you debug faster.


We’ve got a host of other bug fixes and updates too, be sure to check out our release notes here

See you next month with more updates! Do follow us on Twitter, Youtube, and Linkedin to stay up to date.  

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform
18
October
2021
Announcement

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform
Vihar Kurama
0
 minutes ↗
#
announcement
#
beginners
#
applications
#
app-development
#
features
Announcement

Building an app on Appsmith is great fun. Why? Because it takes minutes to build a clean and consistent UI, and less than a few hours to make data connections.  We might be tooting our own horn, but what we love about Appsmith (ask our in house devs!) is that we can use JavaScript anywhere on the platform to add additional transformations, functionalities, and actions using the moustache syntax. We’re aware that not everyone is a JavaScript enthusiast, everyone prefers a language of their choice! So we’ve come up with our new feature: “JS Snippets.” With this, you can get some help with writing JavaScript inside Appsmith. In this blog, I will tell you how we made this feature and how you can use it!

The story!

We often see many questions in our community forums and discord channels seeking help with binding nested APIs, write data transformations, configure chained actions. Hence, we thought of building a library of snippets inside Appsmith applications that you can use directly and customize based on your data source. 

Initially, we thought of the issue in a straightforward way, but at Appsmith, we always like to go the extra mile. So, we brainstormed this idea multiple times and decided to extend it to customize and add snippets particular to widgets and data sources. But, in order to do this kind of customization, we need a database application that validates and filters these snippets. So we built an internal Appsmith app that manages all the JS Snippets. This is how the application looks like:

Here, as we can see, on the left, we see a list of all the available snippets today. When these are clicked, we will see the details of the snippet and have options to verify it and publish it live directly to the JS Snippets library.

To customise these snippets, we define three formats for each of them. 

  1. Snippet: The example code snippet written in JS
  2. Args: Customisable variables inside the snippets and their expected data type,
  3. Template: The dynamic template that helps devs customise their snippet with any variable on Appsmith

Here’s an example of how we ideated customizable JS snippet using these three forms for merging two queries in a table:

Snippet:

{{ 
	fetchOrders.data.map((orderObj) => {
   const user = fetchUsers.data.find((userObj) => userObj.id == orderObj.refId) || {};
   return { ...orderObj, ...user };
	})
	}
}

Args:

[
  {
    "identifier": "fetchOrders",
    "name": "Query1",
    "type": "OBJECT"
  },
  {
    "identifier": "fetchUsers",
    "name": "Query2",
    "type": "OBJECT"
  },
  {
    "identifier": "orderObj",
    "name": "row1",
    "placeholder": true,
    "type": "OBJECT"
  },
  {
    "identifier": "userObj",
    "name": "row2",
    "placeholder": true,
    "type": "OBJECT"
  },
  {
    "identifier": "id",
    "name": "key1",
    "type": "VAR"
  },
  {
    "identifier": "refId",
    "name": "key2",
    "type": "VAR"
  },
  {
    "identifier": "user",
    "name": "recordForMerge",
    "placeholder": true,
    "type": "VAR"
  }
]

Here’s a screenshot of how the snippet is rendered on Appsmith:

Users can now directly copy this snippet onto the widget, or customize the arguments, test it out, and use it in the widget.

How to use JS Snippets on Appsmith

We can find JS snippets inside the Appsmith applications from Omnibar. Click on the Search/Omnibar from the top navigation and choose the `Use snippets` option. Here, you can filter snippets based on data sources and UI widgets. 

The other easy way is to access snippets from the slash commands. Just type in / inside the bindings, and choose the insert snippet option. 

Special credits to Arun Vijayan, Sumit Kumar, Ajinkya, and Nikhil Nandagopal who had worked so hard on this feature!

Hope you’ll build some super cool applications using the JS Snippets on Appsmith! If you do, don’t forget to tell us about it, we would love to feature your work! Your contributions and feedback help us make Appsmith better and we really appreciate it.

Join the community! Come chat with us on Discord, or jump in on Github directly!

You can also follow us on Twitter and Linkedin.

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go
6
October
2021
Product

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go
Abhishek Nayak
0
 minutes ↗
#
announcement
#
open-source
Product

Appsmith launched a year ago, and since then, we’ve seen tens of thousands of engineers make Appsmith a part of their internal tooling tech stack. We’ve seen a lot of community contributions that have made Appsmith better for everyone

Today, I’m thrilled to announce that we’ve raised $10.5mn across two rounds of funding from Accel, Canaan Partners, Bessemer, and others. 

We couldn’t have done this without the love from our users and support from the community. We aim to use this capital and make Appsmith the best choice for every internal software project.

Appsmith, as an idea and subsequently as a product, came out of a series of interlinked personal experiences. A few years ago, when I was building Mob Show, a mobile game, all I wanted was for our daily active players to increase. In two months, we went from zero to five thousand, and we were doing everything we could to double that number. We wanted growth. Sure enough, we went from 5000 to 120000 DAUs within a week! We should have been thrilled, but we felt overwhelmed and exhausted. Why? Because unprecedented growth comes with unprecedented challenges. Scaling at such a breakneck speed amplified the number of bugs and problems in the game. Customer support requirements grew by 30x, while our team size remained the same. This growth was hell. We found ourselves scrambling to build internal tools that would help us make sense of this growth. 

I’ve seen this before when I was running Gharpay, a hyperlocal e-commerce company, where we relied on at least ten complex internal tools. These included backend tools for delivery personnel to manage and track their orders, tools for the accounting team to manage reconciliation on a daily basis, and of course, customer support tools to ensure speedy resolution of service requests. In fact, Appsmith’s co-founder, Arpit (who was also Gharpay’s CTO) was responsible for building and maintaining these apps. 

My co-founder, Nikhil, has also experienced the side of growth that is not pretty. Things go wrong wherever they can. And things will go wrong. As the head of product at Eat.fit, Nikhil saw orders scale from 50 a day to 50,000 a day in a short period. Customers began to have negative experiences; orders would go missing, delivery partners couldn’t find addresses, and there were payment issues. If these experiences are anything to go by, it’s that internal tools are critical to the success of every business. Nikhil, Arpit, and I feel strongly about the state of internal tools and believe that they are the backbone of any company’s success - old or new. 

So if Nikhil, Arpit, and I were getting together to create something together, both logic and intuition have led us to the Appsmith journey. We started Appsmith with a simple goal: To help engineers build the best apps they can to help their teams while avoiding repetition and monotony. Frontend and backend development for simple applications have become incredibly complicated. It feels like we are building the same things repeatedly but just using different programming languages.

Appsmith is an open-source low code framework to help developers avoid repetitive work like modifying UI components, writing integrations, creating a login page, etc., and building beautiful internal apps.  We have worked hard to create a product that developers use at Swiggy, Dunzo, WazirX, and thousands of other beloved companies. This has also meant that developers, HR, Operations, Finance, Admin, Customer Success, and Management teams have saved thousands of hours and boosted their productivity with Appsmith! 

Over the past 12 months, we have kept a razor-sharp focus on helping companies develop custom software that talks to different data sources. And each new day has been spent refining the product, building community feature requests, preempting the needs of our users. 

Since our launch, we’ve shipped:
35 UI widgets • 15 data integrations • JS editor • Debugger • Real-time commenting • A 2 min docker container setup

We’re gunning for more; brace yourselves! The Appsmith team and their speed of shipping genuinely amaze me. 

What Will We Do Next 

We’ll be shipping much-awaited features like white-labeled apps, custom widgets, mobile responsive apps, collaborative real-time editing, integration with multiple SSO providers, custom authentication, audit logs, and server-side JS execution in the next few months.  We will also be improving front-end customization while ensuring snappy performance. So we will be building a lot of new widgets, adding more integrations, introducing dynamic height components, custom theming, and supporting custom CSS.

Overall, we will be focussing on five areas: 

  • Improving the quality and complexity of the frontend that can be built using Appsmith. 
  • Creating better coding and data integration experiences for our users. 
  • Putting more effort into integrating Appsmith in the software development cycles of engineering teams. 
  • Developing and shipping features specific to larger teams, such as SSO, audit logs, granular role-based access control, etc. 
  • Creating an excellent repository of learning resources and material like tutorials, guides, and templates so that users can learn how to use Appsmith faster. 

We are fully prepared to fulfill our promises, and I know that our stellar team has already started work! 

Welcoming our Investors 

We’re thrilled to have the best minds in the industry backing us. Accel led the seed round. Canaan Partners led the Series A round with Accel, Bessemer, OSS capital, and Prasanna Sankar, CTO of Rippling.

By the community, for the community 

Appsmith is a community product. Open source creates public goods that benefit a lot more people than proprietary products. I believe that low-code, combined with the power of open-source, is the way to empower businesses large and small. 

Before Appsmith, there was no open-source project that could build such custom internal tools and admin panels. There are many low code products, but we saw that no competitor was willing to reveal the source code, enabling engineers to contribute changes. I think buying proprietary software is like buying a car without an option to fix it. Open-source helps you make small improvements and changes to the software. We also saw that our competitors would only work with companies with large budgets and ignore the experiences of small teams or individual developers.

One of Appsmith’s users told me that volunteers use it in France to help new immigrants avail of government services and enable them to navigate their new life. Appsmith is a forever free open source project that has helped developers build for food banks, non-profits organizations, schools, universities, and government agencies. It’s immensely satisfying to support such users.

Before I end, I would like to take a moment to thank the entire team for building such a fantastic project in a very short time.

Without you, there is no Appsmith. 

Coming to this point was a lot of fun, and in many ways, it’s the first step towards a long road. We expect it to be rocky, but it will be fun as heck. 

Hacktoberfest 2021: Let the Contributions Begin!
27
September
2021
Announcement

Hacktoberfest 2021: Let the Contributions Begin!

Hacktoberfest 2021: Let the Contributions Begin!
Vishnupriya Bhandaram
0
 minutes ↗
#
hacktoberfest
#
announcement
#
developer
#
engineering
Announcement

Time indeed does fly because it feels just like yesterday when we hosted our first ever Hacktoberfest last year! And what a year it has been.

We started Appsmith because we wanted to create a developer-first product to make an engineer’s life easy. From being a small, little-known project on Github, we now have 5K stars. This wouldn’t have been possible without our community; apart from giving us incredible feedback, they also contributed immensely to our codebase, from contributing new integrations to helping solve bugs. We now have over 100 contributors, and we want to expand our community (that means you!), empowering them to contribute to a project that will always remain developer first.

And so, we’re back again this year for an exciting month-long virtual festival supporting open-source projects. We love it because it’s celebratory and community-oriented! At Appsmith, we genuinely believe open-source can take the way we build things to new heights. And our commitment to the community will never waver.

In that spirit, we are kicking off the Hacktoberfest 2021. In the run-up to the actual code-fest, there are going to be many talks! We will be bringing together folks from other awesome projects to talk about Hacktoberfest and Open Source. Be sure to check these out. You will definitely get to learn more about how to get involved in open-source projects. And yes! We’re ready to swag it out, too, for every valid PR! And contributors who submit more than 4 PRs and invite others to contribute to our repository will get a special prize. You are welcome to contribute to the issues on Appsmith’s repository on Github. Be sure to check contribution guidelines, review, and merge policies. Please note that not all pull requests will count towards Hacktoberfest 2021.

Contributing to open-source projects is an excellent way for users to become contributors. And it’s both a fun and rewarding experience. Sure, it can be scary to begin, and many think that only code that implements significant features matters. Well, I am here to tell you that it’s not true. We believe that no contribution is too small. Bug fixes, documentation updates, submitting articles are all fantastic ways of participating.

Hacktoberfest is open to all: Students, developers, anyone really. Background no bar. To this end, this year, we’ve included several newbie-friendly issues in the challenge to give a warm welcome to first-timers.

If you’ve still got some doubts about participating or need some queries answered, head over to our Hacktoberfest channel on Discord, and we will be happy to help you out!  To know more about how you can participate in this event, take a look at our Contributor Guidelines and Code of Conduct.

Happy Hacking! 🐱‍💻

Launching the Appsmith Writers Program!
22
September
2021
Announcement

Launching the Appsmith Writers Program!

Launching the Appsmith Writers Program!
Vishnupriya Bhandaram
0
 minutes ↗
#
writers program
#
announcement
Announcement
Editor's Note: We have paused the form for new applications for the writer's program. If you wish to contribute, please send an email to writersprogram@appsmith.com along with a brief outline of the topic you wish to write on, links to two writing samples, and mention your areas of interest/expertise. Please note that we receive a high volume of emails, do allow us some time to get back to you. Be assured that we will do our best to get back to you in a timely manner.

Are you an engineer who enjoys creating content and sharing your knowledge with the world? We'd love to talk to you!

We've been creating a lot of content at Appsmith over the last few months for our growing audience of developers to educate them and share our knowledge with them. You can check it out on our Youtube or our blog. As an open-source project, we don't just want to share our codebase with our community but also our collective knowledge.

What is the Appsmith Writers Program?

At Appsmith, we want to work with engineers who love writing or creating videos. Whether you're a veteran of the trade or a young student just starting out, we'd love to hear from you.

And of course, pay you for the work you do.

Topics that excite us are internal tools, low code, open-source, databases, application performance, engineering best practices, Javascript. And needless to say, newer ways to use Appsmith.

All that we care about is whether you can write in-depth and in detail. We're looking for long-form pieces which help educate our community (1500 words and up).

We don't care about your style and grammar. We've got a great editorial team to help with that.

Is it paid?

Yes! We pay anywhere between $200-$400 for content created (video, templates, blog posts, tutorials).

What kind of content should I send in?**

Below are the types of content we're most excited about:

Blog Post / Templates

If you want to write an engineering post that could be relevant for Appsmith's audience of backend developers but not directly about Appsmith (for example, this), we'd be very excited to discuss those too.

If your proposal is accepted, we’ll feature it on our website with your name and share it with our rapidly growing open-source community.

Video

These videos can fall into different categories:

  • A Tutorial where you show how you built something using Appsmith.
  • A How-to guide explaining some of Appsmith's features.

If you want to have an ongoing engagement with Appsmith, where you want to create Youtube videos on broader engineering topics (not directly related to Appsmith) on the Appsmith Youtube channel, please do reach out as well; we can figure something out.

Great, how do I get started?

The best way is to fill our form to share an outline, and we can take it from there. (Note: We're going to only consider previously unpublished content)

If you're keen on exploring this opportunity but don't have a clear idea of what you'd like to write, we're happy to help! Just mention this in the form, and we will get back to you ASAP!