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.

Announcing the Import-Export Feature for Appsmith Applications
28
June
2021
Announcement

Announcing the Import-Export Feature for Appsmith Applications

Announcing the Import-Export Feature for Appsmith Applications
Vihar Kurama
0
 minutes ↗
#
features
#
engineering
#
open-source
#
javascript
Announcement

You have been asking for it, and we have developed it! The import-export feature is now out in the latest version (>v1.5.4) of Appsmith. With this, you can easily migrate apps from your self-hosted environment to Appsmith cloud or vice-versa.

At Appsmith, our users develop internal applications on the cloud, self-hosted installations, or even on local environments on their laptops, and it’s a pleasant experience in all cases. However, when looking to move the app from one environment to another, the only option was to rebuild applications… until now!

We’ve been asked multiple times on our community platforms for a quick way to migrate applications.

CleanShot 2021-06-25 at 01.28.11@2x.png
CleanShot 2021-06-25 at 01.25.51@2x.png
CleanShot 2021-06-25 at 01.30.57@2x.png

And then, we’ve created a feature request on GitHub!

CleanShot 2021-06-25 at 11.31.48@2x.png

Today we proudly ship the import-export feature to our community. With this feature, you can export the application as a JSON file and import it to any development environment in just a few steps.

We limit this functionality to only the organisation’s administrators to ensure that your database credentials, etc., do not get exposed to all the developers.

Want to try this out? Let’s see how mind-bogglingly easy this is!

Step #1 Export the Application

On your dashboard, open the overflow menu of the application you want to export from the source environment. Select the export option from the menu. This will download a JSON file with all the information about your application.

CleanShot 2021-06-28 at 08.16.28@2x.png

Step #2 Import the Application

Choose the organisation you want to import the application from the dashboard to the destination environment. Open the overflow menu by selecting the organisation name and select import. Upload the exported application JSON file.

Awesome, in just two simple steps, you should be able to migrate your Appsmith application!

Special credits to @abhvsn, who had worked hard on getting this feature out!

We appreciate each contribution and piece of feedback that you share. Join the community! Come chat with us on Discord, or jump in on Github directly.