January Roundup: New Drag and Drop Experience, Progress Bar and Input Widgets!

January Roundup: New Drag and Drop Experience, Progress Bar and Input Widgets!

Table of contents

We're now officially in 2022 because the first month of the year is done and dusted! Our engineers have been super busy building new features and improving the user experience. And, as always, I am here to give you the deets!

Without further delay, let me jump right in.

First up, one of the big features to go live in our new resizing experience for widgets on the Appsmith canvas!

If you've been using Appsmith for a while, you were likely frustrated with an experience while pulling a new widget onto the canvas with other UI components already placed. The new widget wouldn't get drawn in, and you'd have to scroll all the way down on the canvas, find an empty spot, and then drag the new widget. Then, you would have to go up, readjust the space between the existing widgets on the canvas, and then resize your new widget and place it in the space. That's a lot of work, we know! This issue has been high on our priority list, our engineers worked very hard on it, and we're happy to say that this issue has been fixed with the new and improved resizing experience.

With this new feature:

  • When dropping a new widget, pre-existing widgets on the canvas will now automatically move out of the way.
  • Widgets near the canvas edge/canvas boundary will shrink to make space for the new widget.

At the moment, this feature is still in Beta and does not work on grouped widgets. If you want to turn this feature off, you can do this with a single click from the docked property pane on the right.

If you want more information on this, you view this video, where Appsmith's co-founder and CEO, Abhishek Nayak, demos the feature and presents a walkthrough.

CleanShot 2022-02-01 at 01.53.21.gif

Widget Updates

Progress Bar Widgets

Progress bars are an essential part of many user interfaces. They can help understand the progress of a task or a project in a visual way. It's the intuitiveness of these bars that makes them a popular choice! According to stats, they are used on over 38% of the top 1,000 websites on the planet. We've now added progress bars into a repertoire of widgets and guess what you can customize the labels and colours to your liking!

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

And another way, this has been further made cool is by fantastic community contribution! One of our contributors, Yaldram, inspired by React, created the circular progress component! I never cease to be amazed by our vibrant community! <3

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

With this new widget, you can add progress bars anywhere across the application and further customize them with JavaScript. To see how this works, watch the demo here.

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

Revamped Input Widget

What's in an input? Turns out, quite a lot! We wanted to improve the capacity of this widget by ensuring there are different kinds of details and types that can be added. Our Input widget now has three different types: CleanShot 2022-02-01 at 10.49.57@2x.png

  • Input: The input widget is now more stable, but you won't be able to configure currency and phone number input types on this one.

  • Currency Input, Phone Input: Many internal tools need customization on currency and phone number data type; for that reason, we've separated the currency and phone number properties onto a totally new Currency and Phone Input widget. Not just that, you can configure your phone number codes and currency types with JavaScript using our geolocation APIs.

We've got a few more updates for you.

Using HTML on iFrame

The iFrame widgets on Appsmith will now support embedding the HTML code. Just copy your HTML onto the srcDoc property to see the magic.

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

Updates for OAuth2

We have updated the authentication workflows for OAuth2 and made it generic for all the datasources. The call-to-actions available in forms are now fully customisable depending on the authentication type.

Resolve Errors Faster while working on APIs

Now, while working with APIs you can now see the evaluated value of dynamic fields in the URL, this will help users faster and resolve errors.

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 that is 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.