21
April
,
2022
Announcement

Introducing JSON Forms in Appsmith

Introducing JSON Forms in Appsmith
Somangshu Goswami
0
 minutes ↗

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.

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.

Write More Code & Create Reusable Functions with Our New JavaScript Editor
6
December
2021
Announcement

Write More Code & Create Reusable Functions with Our New JavaScript Editor

Write More Code & Create Reusable Functions with Our New JavaScript Editor
Vihar Kurama
0
 minutes ↗
#
javascript
#
developer
#
community
#
features
Announcement

What’s better than some space? More space. We’ve cleared out the clutter and developed a brand new full-fledged code editor to make the coding experience on Appsmith smooth like butter. Our Github repository is home to many feature requests, and whenever we ship out a new feature, it’s cause for a mini celebration 🎉.

JS editor is one such feature that was in the making for a while. This new feature enables users to write reusable JavaScript variables and functions as JS Objects. These JS Objects can be used anywhere across the Appsmith platform using the moustache bindings.

In this blog post, we will discuss our efforts to ship this much-needed feature and how you can get the most out of it.

The Story

Appsmith is one of the most loved open-source internal tool builders for developers. Today Appsmith sits with ~9000 stars on GitHub. We are proud of the love we receive from the community. One of the main reasons for Appsmith's success is the simplicity and customization it provides while building internal tools. We can use JavaScript anywhere on the platform to handle bindings, transformations, actions, workflows, and many more using the moustache syntax. However, all this had to be done in the small input boxes on Appsmith's property pane. This was somewhat cumbersome, especially when writing larger blocks of code. Here’s a screenshot to show you how things used to be:

CleanShot 2021-11-23 at 18.39.03@2x.png

It’s hard for any developer to write code on this small property pane, and code reusability was also not possible. However, the input editor on the property pane still served its purpose well, with its excellent auto-complete, slash commands, linting, and debugging features. However, we take developer experience seriously and constantly work towards improving it.

Our primary goal was to create a full-fledged code editor to help developers write JavaScript with access to all the supported libraries without any distractions. To achieve this goal, we broke down this problem into three ideas:

  • Introduce the concept of JS Objects files where developers can define variables and functions which they could write in a full-fledged editor
  • JS Objects should be accessed anywhere across a page, using moustache binding.
  • JS objects should use linting and autocomplete features developers expect from a full-fledged editor.

We began the shipping process for the JS Editor around mid-July 2021. As strong proponents of building in public, we posted all the design previews, issues, ideas on our community channels and took community feedback into account while making this feature.

CleanShot 2021-11-23 at 19.18.35@2x.png
CleanShot 2021-11-23 at 19.17.59@2x.png
CleanShot 2021-11-23 at 19.17.23@2x.png
CleanShot 2021-11-23 at 19.16.56@2x.png

How did we build this?

Appsmith has a highly modular code-base, so adding new widgets, integrations, and custom styles are easy. But, for a new feature like the JS editor, things needed to be stitched from scratch. Our engineers and product folk brainstormed multiple times before getting started on it to ship a scalable solution around this.

Here are a few thinking points that we started with:

  • JS Objects are a completely new entity in Appsmith. We had to lay the foundations for this feature but did not want to derail away from already established concepts. We designed these objects as “Action Collections” where each function is a different Action (integration). This enabled us to quickly build on top of existing paradigms and allow features like onPageLoad, dependency calculation, and reactive coding.
  • Like other parts of Appsmith, these code blocks are reactive, which means they will automatically re-compute when their dependent data points have been updated.
  • You could make mistakes, and the editor would be forgiving and guide the user to the right path.
  • While these are strictly objects today, we have laid the groundwork to enable more freestyle “JS files” where users can organize code however they want.
  • Along with this, we are also working to enable true async code in Appsmith. Async code with native promise support would help users create complex workflows easily, keeping the code readable and maintainable.

This would enable us to create a robust feature that everyone would love and give the same freedom as any standard coding framework.

JS Editor and Objects in Action

Appsmith's JS editor is quick and easy to use, and it lets you create objects with a single click. Just open the application, search for JS Objects from the entity explorer (left sidebar), and click on the + icon. We will be navigated to a new file, as shown in the screenshot here:

CleanShot 2021-11-23 at 20.50.51@2x.png

Here, myVar1, myVar2 are two variables, and myFun1, myFun2 are two functions defined in the JS Object which are exposed in default export. Currently, we don’t support exposing functions using named exports. Now, let’s define a new random variable and try to access it onto a widget, for this, update the Code contents of JSObject1 to the following:

export default {
    myRandomNumber: () => {
        const randomInteger = Math.floor(Math.random() * 10);
        return randomInteger
     }
}


To test this function, use the run icon from the appsmith console below:

And voila! Just like that, we should see our output; in case of errors, the console will return all the instructions options that will help you debug the issue.

Now, click on the + icon next to widgets and drop a new text widget onto the canvas. Open the property pane of the text widget by clicking on the widget name, and update the text property to the following:

{{JSObject1.myRandomNumber()}}


Now click the + icon next to widgets and add a new text widget onto the canvas. Open up the property pane of that new text widget by clicking on its name and updating the Text property to:

{{JSObject1.myRandomNumber()}}


With this, we should be able to see a new random number bound onto the text widget:

The next question that comes to mind is, what if there's an error in the JS object's code? Does it work the same as a JS compiler does? The answer is yes! If you make a mistake in JavaScript syntax while writing your code, the JavaScript Editor will highlight the error using a red-colored lint below the possible position of the error. Here’s a screenshot for reference:

CleanShot 2021-11-24 at 11.26.15@2x.png

Not just that, we can see all the logs; we can also see the history of each update and execution of your function under the Logs tab.

CleanShot 2021-11-24 at 11.37.12@2x.png

What’s Next for the JS Editor?

Following are a few features, we will be extending to the JS Editor, keep an eye our, or join us on Discord to stay up to date :)

  • Inspect and debug code by hovering over entities
  • Auto format options
  • Functions running on page load
  • Asynchronous functions

We hope you’re as excited about the JS editor as we are. If you’d like to give feedback on this feature or have a say in the roadmap, join the Betasmith program today.

Thanks to Apeksha, Hetu, Ajinkya, Nidhi, Parth, Aakash, Saptami, Prappula, Nikhil, who worked hard on shipping this feature out!

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.

All You Need to Know About the Appsmith Hacktoberfest 2021
9
October
2021
Announcement

All You Need to Know About the Appsmith Hacktoberfest 2021

All You Need to Know About the Appsmith Hacktoberfest 2021
Vihar Kurama
0
 minutes ↗
#
community
Announcement

The quality and value spec is incredibly high when you have a like-minded yet diverse community working together to solve a problem. It is the spirit of collaboration to solve problems that drive open source projects. With open-source, failures can be seen as important milestones to improve as they become moments of learning from the community. Help, resources, perspectives that are beneficial for the community are all available in the open-source world. This is why Appsmith will remain forever free and open-source. 

Every year, we look forward to Hacktoberfest because we find it an excellent way to get to know our growing community, and we hope that you find a few issues that you would like to fix, and get to know our product and society better. 

Of course, participating in the Appsmith Hacktoberfest can also help you win some swag! In this blog, I am going to help you get started! 

What is Hacktoberfest?

Hacktobefest is an annual month-long celebration of open source. It is an excellent opportunity for everyone, from seasoned developers to students, code newbies, technical writers to UX designers, to contribute to open source communities. At the same time, they can develop skills and stand a chance to win limited edition swag. 

Before participating in Hacktoberfest, make sure to register on the official DigitalOcean Hacktoberfest site here

What is Appsmith?

Appsmith is a low code, open-source framework to build internal applications. With its Javascript-based visual development platform, you can build CRUD apps, Dashboards, Admin Panels, and many more 10x faster. You can use pre-built UI widgets, connect them to your APIs and databases to build dynamic apps and complex workflows. And the best part? Deploy these apps on the technology you prefer! (self-host for free!).

One of our community members wrote an in-depth review about Appsmith; check it out here to better understand the framework.

You are welcome to contribute to the issues on Appsmith’s repository on Github. Before raising a PR, please read our contribution guidelines, review, and merge policies.

How to contribute to Appsmith for Hacktoberfest?

To participate in Appsmith Hacktoberfest, make sure you register before raising a PR to Appsmith; this will allow us to track your PRs and ship the swag to your location! Before working on any issue, please ask maintainers to get it assigned to you. Start working on it only after the issue has been assigned. 

If you are new to this process and don’t know how to raise a PR, here’s a list of resources to help you get started: 

Below, we put together a brief on the various issues of different specialties (engineering, code, content, templates, etc.). However, you are free to wander around the Appsmith Project and take on any current issue or open a new issue that you think is important. 

Contributing to Appsmith Code Base

We have a bunch of good-first-issues for Hacktoberfest that are labeled frontend, bug, and many more. You can pick from these based on your interest or expertise and can start working on them. If you need help understanding the issue or have any other code-related questions, chat with us on the Discord channel.

For setting up Appsmith and understanding git workflow, refer to this guide. 

> Before raising a pull request, ensure you have submitted a related issue and discussed a plausible solution with a maintainer. This gives your pull request the highest chance of getting merged quickly.

Swag Details

  • 1 Closed PR -  Appsmith Stickers
  • 2 Closed PRs - Appsmith Stickers, Water Bottle
  • 3 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith T-Shirt
  • 4 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith Hoodie
  • 4 Closed PRs + - Appsmith Surprise Box

Contributing to Appsmith Documentation

Help improve our documentation and how-to guides! We’re always looking for developer experience for Appsmith, and we believe documentation is one of the core assets. If you are a newbie contributor, this is a great place to get your feet wet with Appsmith. We’ve prepared a list of newbie-friendly Hacktoberfest issues ready to be tackled.

You can find these in our DOCs section here. Feel free to share more content ideas as a comment on the mentioned issue.

I urge you to go through documentation guidelines and get the maintainers to assign it to you before you take up any issue. 

Here are some of the examples for good contributions:

  1. How to work with Google Sheets on Appsmith
  2. How to work with Local APIs on Appsmith
  3. Writing JavaScript in Appsmith
  4. JS Errors

Swag Details

  • 1/2 How-to Guide PR -  Appsmith Stickers, Mug
  • 3 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith T-Shirt
  • 4 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith Hoodie
  • 4+ Closed PRs - Appsmith Surprise Box

Contributing to Appsmith Tutorial or Blog

There are endless tutorial and blog ideas for creating internal applications, admin panels using Appsmith! From simple store catalog manager to complex Postgres admin panel, everything is possible. So far, we’ve made more than 20+ dashboards and admin panels to help developers build internal applications. 

We believe the Appsmith community is more than just code! For Hacktoberfest, we are considering tutorials and blogs as valid contributions. 

These need not be assigned to you; all you need is to join our discord channel and post your idea in the #hacktobest channel. 

You can either publish them on your blog or submit it for publication to the Appsmith blog. Lastly, do not forget to raise a PR on the awesome-appsmith repository, so this contribution is valid towards the contribution amount for both Appsmith and DigitalOcean events 😊.

Take a look at these Tutorials and Blogs to get an idea about what we’re looking for:

  1. GET Google Maps Images from Address Text
  2. Building an Internal Leave Management Dashboard using Google Sheets
  3. Building an Expense Manager for your Startup!
  4. Building a Store Catalogue Management System using Appsmith and GraphQL
  5. Building a Reddit Browser (and XML Parser) in Appsmith
  6. Replacing Google Forms with Appsmith

Swag Details

  • 1 Blog/Tutorial -  Appsmith Stickers, Mug
  • 2 Blog/Tutorial - Appsmith Stickers, Water Bottle, Appsmith Hoodie
  • 3+ Blog/Tutorial - Appsmith Surprise Box

Appsmith Video Contributions

Create video tutorials to help our new community members get started with Appsmith!

It can be anything! How to deploy Appsmith on Linode, use the Google Sheet integration,o work with GraphQl APIs, build a Shopify/Ebay backend on Appsmith... The sky is your limit. Also, it can be in any form! Your recorded video can be uploaded to Youtube, Twitch, or other streaming services. As long as there is a record, we will accept your submission.

Take a look at these video tutorials on our Youtube channel to get inspired!

  1. Building a PgAdmin Alternative
  2. Building a Ticket Tracking System with Supabase and n8n
  3. Building an Employee Survey Dashboard with Supabase and n8n
  4. How to Filter Arrays Using the Filter Method

Raise a PR on awesome-appsmith repository, so your contribution is valid towards the contribution amount for both Appsmith and DigitalOcean events 😊.

Swag Details

  • 1 Video -  Appsmith Stickers, Mug
  • 2 Videos - Appsmith Stickers, Water Bottle, Appsmith Hoodie
  • 3+ Videos - Appsmith Surprise Box

Contributing to Appsmith Templates

Help us build excellent forkable admin panels, dashboards, CRUD apps with Appsmith for Hacktoberfest! On Appsmith, it’s super easy to fork any application based on the user permissions. We’re creating an incredible library of templates that will benefit our community. 

Here are some of the templates we’ve built:

  1. Meeting Scheduler
  2. Fund Raising CRM
  3. Review Moderator

Raise a PR on awesome-appsmith repository, so your contribution is valid towards the contribution amount for both Appsmith and DigitalOcean events 😊.

If you’ve got any questions, ping me on Discord or send me an email (hacktoberfest@appsmith.com). We’ve also listed some more FAQs on this page; please do go through them. 

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!

Launching Betasmith: The Appsmith Beta Community
11
June
2021
Announcement

Launching Betasmith: The Appsmith Beta Community

Launching Betasmith: The Appsmith Beta Community
Rishabh Kaul
0
 minutes ↗
#
open-source
#
community
Announcement

We’re thrilled to launch Betasmith: The Appsmith Beta Community .

Since our inception, we’ve relied on the community to help us decide what to build. With Betasmith, we want to involve our users even more deeply in our product development process.

Do you want to have a say on the future of Appsmith? Do you like the idea of sharing ideas to help shape the future of the product? Or maybe even be the first to test out our new features?

Well, we’d love to hear from you.

What's more you'll gain access to our previews and be able to take part in private interviews and other treats along the way. You can be a part of our Beta Community from anywhere in the world.

What can you do as a community member?

💬 Give feedback on early design concepts and prototypes. Sit back and be the judge of the future.

✏️ Participate in research sessions and workshops. Chat directly with our talented designers

🤐 Get early access to new feature previews and demos Who doesn't love being the first to get a new toy?

Ready to sign up? We can’t wait for you to help shape the future of Appsmith. ‍ Sign up here

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.

Introducing the All-new SnowflakeDB Integration on Appsmith
29
July
2021
Announcement

Introducing the All-new SnowflakeDB Integration on Appsmith

Introducing the All-new SnowflakeDB Integration on Appsmith
Vihar Kurama
0
 minutes ↗
#
open-source
#
community
#
databases
#
ui
Announcement

Today, we are super proud to announce Snowflake DB integrations on Appsmith in our latest release (>v1.5.5). It was one of the highly requested integrations by our community, and we've shipped this right on time. This blog is an attempt to share with you our motivation and experience in building this integration.

We first received a request for this SnowflakeDB integration on our GitHub Issues. This was posted by one of our community members in the last week of April. We then researched SnowflakeDB's architecture and data sharing capabilities and decided to supercharge it with Appsmith for querying and building applications.

CleanShot 2021-06-29 at 07.13.15@2x.png

On Appsmith, it's super fast and easy to build new Integrations. This is because we've architectured each integration as an individual module; with this, it's super handy for us and contributors to build, customise and organise any new integration.

To learn more about Appsmith's backend architecture, we recommend you watch the session about integrations by our co-founders here.

Considering the amount of interest this integration had gathered within our community, we decided to fast-track the work on Snowflake DB Integration. It barely took us two weeks to build, test and ship it to production. Super C❄️❄️L, right?

CleanShot 2021-06-29 at 05.43.57@2x.png

Our existing integrations helped us organise most of the code, and with Snowflake DB's JDBC driver support, we were able to establish a connection with our backend quickly. We've made a few easy-to-get-started decisions on the UX front, but we'll enhance these based on feedback from our community.

Connecting Snowflake DB on Appsmith

It is super easy to connect databases with our integrations on Appsmith. Now, let’s look at how we can connect SnowflakeDB on Appsmith to build applications.

Step #1 Find Snowflake DB Integration under Datasources

CleanShot 2021-06-29 at 06.50.21@2x.png

Step #2 Add connection details for SnowflakeDB and save a data source

CleanShot 2021-06-29 at 06.51.44@2x.png

Step #3 Create Queries and Build UI

Awesome, in just three steps, we're able to connect to SnowflakeDB on Appsmith! Now we can power UI widgets with queries from the created data source.


Credits to Nidhi Nair, who had worked hard on getting this integration 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.

Embed Anything! Introducing the New iFrame Widget
19
July
2021
Announcement

Embed Anything! Introducing the New iFrame Widget

Embed Anything! Introducing the New iFrame Widget
Vihar Kurama
0
 minutes ↗
#
open-source
#
community
#
ui
#
javascript
Announcement

We’re excited to announce the new iFrame widget on Appsmith’s latest release (v1.6). With this, we can now embed content from other sources, such as web pages, videos, and scores of other content formats on Appsmith applications within no time!

At Appsmith, as an open-source organisation, we believe in the power of community and take member requests seriously. It’s also a part of our commitment to building in public. This iFrame feature was highly requested by our community members, prompting us to create an issue on our Github repository.

Iframe Issue.png

Today, we want to talk a little bit about how we got to prototyping and then delivering this widget.

First, we listed the basic requirements for an iFrame widget and the other specific functionalities we wanted to include. And yes, all the ideation and prototyping are open to the public; you can check out the Figma files! One of our contributors, Paul Li, volunteered to build the widget. Li’s submissions were then thoroughly tested on our deploy previews and then pushed into production. A working example of the collaborative engineering practices we follow here at Appsmith! 🙌

In case you’re wondering about how to set up Appsmith in the local environment and start contributing, this detailed guide will help you!
Iframe Peek.png

Using the iFrame widget

You can add the find the iFrame under the widget sections from the entity explorer inside the application. Drag and drop it onto the canvas to use it. By default, you’ll see a Wikipedia webpage, and you can change this by opening the property pane and adding a new link to the ‘Source’ property. You can also update the ‘label’ property to assign a name (title) to the content page that you wish to embed.

Handling Message Events on iFrame Widget

The iFrame widget will allow you to trigger a value when a message event is received. This can be handled by configuring the onMessageRecieved property.

Here’s how it works:

  • The iFrame widget listens to the message event of the window for catching the message from the iFrame embed. This event can be registered in the event listener.
  • This means that the iFrame widget is ready to receive messages from the iFrame embed.
  • In the iFrame widget, the defined ‘onMessageRecieved’, is just a function that will execute any action set on receiving a message.

In the future, Appsmith will also provide an API that will let you access the message received from the iFrame embed.

Here is another example with a similar use case. When the developer provides auto-login to another website that they have embedded inside their new website.

Note that the control of the embedded website is paramount here and also this approach is insecure. We have allowed this assuming that the developer understands the security issues and deals with them appropriately.

Handling URLs on IFrame Widget

You can handle certain actions when the Widget’s URL is changed using the onURLChanged property.

Here’s an example:

Let’s say you have loaded user data in the table and want to display details from there onto the website. When you click on a particular row on the table, you can change the iFrame URL to show the rest of the details on your own website using the onURLchanged property. We can also bound a trigger to execute an action whenever the URL is changed.

Up.png

Hope you’ll build some super cool applications using the iFrame widget and 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.

Generate a CRUD App from Any Database with One Click!
26
August
2021
Announcement

Generate a CRUD App from Any Database with One Click!

Generate a CRUD App from Any Database with One Click!
Vihar Kurama
0
 minutes ↗
#
crud
#
databases
#
ui
#
open-source
#
javascript
Announcement

Most apps on the internet are actually CRUD applications. What this means is that any basic app does the following functions: Create, Read, Update, and Delete (CRUD). In fact, if you look at Twitter, it’s a simple CRUD app where users can create tweets, read tweets, update tweets (like re-tweets) and delete tweets! CRUD apps are used on a daily basis by several businesses and organizations to maintain their day-to-day workflows. For example, in an enterprise organization, HR departments would be using a CRUD application to manage staff and keep track of existing employees.

Well, at Appsmith, we know how important CRUD applications are for internal operations. Why should something so critical to an organization's success be difficult to make? Well, we took matters into our hands and we made it super easy to make one. What if we said that you can now make the entire CRUD application with all the UI, logic, and complete control in just one click? Yes. You read that right!

We’re super excited to announce our new feature called the “Generate New Page from Database” With this, you can build CRUD applications within no time. We’ll discuss a bit more about our approach in shipping this feature in this blog, and also talk about how you can use this feature on the Appsmith framework.

So What’s This Feature All About?

The idea of the “Generate New Page” feature is rather simple, we wanted to ship a feature that would help developers save time in building UI and writing queries for basic CRUD applications. Now, all that users have to do is just open the canvas for a new application, connect a data source and then click on the “Generate New Page” option. And here’s what this will do:

First, it will create four new queries for you from the selected data source that will do the following:

  • CREATE new data (rows) into the table
  • Read all the data from the selected table
  • Update a particular row item in the table
  • Delete the selected row item in the table

These straightforward CRUD operations will be automatically generated for users!

As for the UI, this feature will automatically create a new table and fill all the data in the table using the read query. However, users can customize the rows based on specific use-cases after the application is generated.

Next, when users click on the ‘Create Row’ button, it will open a modal to insert new rows into the table. This option will use the ‘Create’ query.

To update the data in a particular row, users can use the Update Row container on the right, where they will be able to update any row data by selecting from the table and using the form. This will be using the ‘Update’ query.

Finally, inside the table, the last column will be populated with buttons which when clicked will delete the entire selected row by using the ‘Delete’ query.

What a breeze! Not just that, the table comes with powerful features where users can search, filter or sort contents of the table by configuring it.

Following is the screenshot of the entire generated UI.

UI.png

Now, we’ll talk about how to use this feature!

How To Use the Generate New Page from Database Feature

In order to be able to use this feature, the first step is to connect a new data source on the Appsmith application.

If you’re new to Appsmith follow the steps below:

  1. If you’re an existing user sign in to your account or you can sign-up here for free.
  2. After you sign in you’ll be redirected to the Appsmith dashboard where you can create a new application by clicking on the Create New button.
  3. This will create a new Appsmith application, now to connect a data source click on the + icon next to the Datasource option on the left navigation bar.
  4. You can choose from a wide range of options here, in case if you want to test it you can use the mock-users database.
  5. Next, under the active data sources click on the GENERATE NEW PAGE option.

You’ll see the following options:

Options.png

Now, you can select the table and add a searchable column. As soon you click on the Generate Page, you’ll see the UI where all the CRUD operations can be performed.

Hola, and with just one click the entire application is generated. Hope you love this new feature.


Follow us on Twitter and Linkedin to stay up to date with more news and announcements!

We love feedback, and we want to know your thoughts. Write to us with your ideas, opinions, or even send us brickbats on marketing@appsmith.com.

If you want to write a blog for us, send me an email and I’ll make it happen: vihar@appsmtih.com.

Say Hello to Our New ArangoDB Integration
28
July
2021
Announcement

Say Hello to Our New ArangoDB Integration

Say Hello to Our New ArangoDB Integration
Vihar Kurama
0
 minutes ↗
#
open-source
#
graph-database
#
javascript
#
developer
Announcement

We’ve added yet another database integration to Appsmith; say hello to ArangoDB! ArangoDB is an open-source multi-model database system where you can natively store data for graph, document and search needs. And the best part? It’s free!

We’ve made it super easy to build new integrations on Appsmith. This is because we've architectured each integration as an individual module. It's super handy for us and contributors to build, customize and organize any new integration. This integration feature was developed by one of our users and top contributors on Github, Mingfang!

github.png
To learn more about Appsmith's backend architecture, we recommend you watch the session about integrations by our co-founders here.

Once the PR for the ArangoDB integration was raised, Sumit, one of our engineers from the backend team reviewed it. He then made all the changes and got things into a working shape. Needless to say that our QA team will ensure that these new features are bug-free in testing and production environments.

CleanShot 2021-07-28 at 18.43.09@2x.png

Using ArangoDB Integration

To start using the ArangoDB integration on Appsmith, you can sign in to your account or create one for free here and follow the steps below:

  1. On the Appsmith dashboard, create a new application by clicking on the Create New button under any organization.
  2. Find the Datasources option on the left navigation pane, click on the + icon next to it.
  3. Find the ArangoDB integration and select it; you’ll be redirected to a new page where you will have to add your ArangoDB configuration.

Note: Please whitelist Appsmith IP addresses to access ArangoDB Cloud projects.

CleanShot 2021-07-28 at 18.44.17@2x.png

With just three simple steps, you will be able to connect the ArangoDB Datasource to Appsmith. Now, follow the steps below to utilize the data and build UI.

  1. Click on the + icon next to the data sources on the side navigation.
  2. Find the ArangoDB data source and click on NEW QUERY
  3. In the query pane, write Graph Queries for performing any operations on the data source. For this example, we’ve installed the eCom Analytics example from the ArangoDB cloud. Let’s try to fetch the departments that are present in the department’s table.

Add the following query in the query pane and click the RUN button on the top-right.

FOR document IN departments RETURN document

This will return the values from the department table. Here’s a screenshot for your reference.

CleanShot 2021-07-27 at 14.14.24@2x.png

Similarly, you could run queries and connect with different widgets on Appsmith to build awesome dashboards and internal applications. 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.

Don’t forget to sign up for our live events!

Appsmith Project Now Has 1000 GitHub Stars
12
November
2020
Announcement

Appsmith Project Now Has 1000 GitHub Stars

Appsmith Project Now Has 1000 GitHub Stars
Arpit Mohan
0
 minutes ↗
#
open-source
#
github
Announcement

I announced the Appsmith project on Dev.to for the first time on Aug 21st. While stars don't reflect the quality of a project, seeing 1K stars on our GitHub project makes me happy. 😺

Check out the project at: https://github.com/appsmithorg/appsmith

A few reviews from developers:

Alt Text
Screenshot 2020-11-12 at 5.47.17 PM.png
Alt Text
Screenshot 2020-11-12 at 5.50.06 PM.png

In the past two months, we've seen thousands of users from 65 countries who've used Appsmith for building all sorts of internal apps and admin panels. We've also seen over 40 contributors who've reported issues and code.

We built Appsmith because there is no open-source platform that helps you build custom and beautiful internal tools or admin panels. Today Appsmith ships with 17 UI components, 7 database integrations, and a REST API connector. There's a lot more coming soon.

When should you use Appsmith?

An Appsmith user said this: "This tool is perfect when you need an admin panel that needs to query multiple data sources in the same UI, update values from one with the other, and even use values retrieved from both to query external APIs."

Try Appsmith at appsmith.com

Hacktoberfest Week 1 Update
6
October
2020
Announcement

Hacktoberfest Week 1 Update

Hacktoberfest Week 1 Update
Arpit Mohan
0
 minutes ↗
#
open-source
#
hacktoberfest-1
#
hacktoberfest2020
Announcement

It's been a busy week at Appsmith, thanks to Hacktoberfest. There's no better way to end this week than by thanking all the developers who chose to contribute to Appsmith during this period. We are a small team of developers and this ❤️ means a lot to us.

Over the week, we've merged in 16 Pull Requests from contributors. That's insane!

"If you'd like to get in on the action, Appsmith is running a special challenge during the month of October where you not only get swag for contributing a valid PR but also a customized mechanical keyboard; for inviting other users to contribute to our repository."
"Check out details of the Appsmith Challenge here."

Here are the contributors (in no particular order) that I'd like to mention & thank.

Also, a lot of folks improved our documentation. We've merged 20 PRs just for our docs. Some of the top contributors to our documentation are:

Thank you everyone for being a part of this project. Look forward to more pull requests & contributions.

Happy Hacking!

PS: Join our Discord channel and participate in the Appsmith Challenge and become a part of a welcoming community.

Hacktoberfest Kickoff Event
1
October
2020
Announcement

Hacktoberfest Kickoff Event

Hacktoberfest Kickoff Event
Arpit Mohan
0
 minutes ↗
#
open-source
#
hacktoberfest2020
#
hacktoberfest-1
Announcement

Hacktoberfest is a month-long celebration of open source software. As developers, we stand on the shoulders of giants. Each year, in the month of October, as a community, we pledge to feed this giant.

Contributing to open source projects is fun and rewarding. At times, it can even be daunting to get started. Lots of people believe that only code that implements large features matter. That's not the truth. No contribution is too small — bug fixes and documentation updates are valid ways of participating.

I'm doing a livestream on Appsmith's Discord channel today at 8:30 AM PST / 9 PM IST to help you get started and show you how to open your 1st PR. This 30 minute stream is a tutorial for new and seasoned developers.

The agenda for the livestream will be:

  1. How to find the right projects to contribute to
  2. How to open PRs
  3. How to communicate to ensure your PRs get accepted
  4. Best practices when contributing to open source

As the lead maintainer of Appsmith, I'll use our repository as an example of how to contribute.

Register for the event here. See you on the stream!

Shameless plug: Appsmith is an open source low code product to build custom internal tools and admin panels. We are a welcoming community & have lots of issues that first time contributors can pick up.