New Table features, easier self-hosting options, improved usability, and more
17
November
2022
Monthly Round-up

New Table features, easier self-hosting options, improved usability, and more

New Table features, easier self-hosting options, improved usability, and more
Vihar Kurama
0
 minutes ↗
#
community
#
announcement
Monthly Round-up

October was almost all about usability at Appsmith. We made some obvious improvements like splitting the Content and Style tabs in widget props, some not-so-obvious but big improvements like mapping datatypes across databases, and shipped useful new features in the Table. Let’s dig in.

The Table is closer to a CRUD app builder

Taking the Table from just a presenter of data to a full CRUD app builder all by itself has been a top initiative at Appsmith. These new features bring it closer to that reality.

  • With in-line editing enabled, you can now use the Select widget’s functionality in the Table. This is great for when you want to offer a menu of triggers as your end-users are editing data in rows.
Post_1.gif (854×480)
  • The Table now auto-detects the datatype in columns and changes Column Type in Column settings from Plain text to whatever is most appropriate for the datatype. For example, we will automatically detect numbers, boolean, string, and date values in a column and change the column type to Number so you can see it right by default. This is super-useful when you want to generate a table from a query response that’s tabular, especially when you are using our one-click CRUD app builder.
  • Got images in your Table? Great! You can now cycle through Default, Medium, and Large sizes in Column settings to make your app even more beautiful.
Post_2.gif (854×480)
  • One of the quirks-that-irk with web tables is loading a large dataset. In Appsmith, you can forget performance issues with such datasets with the Virtual Row Functionality algorithm.
  • The endsWith operator in the Table’s filters is now much better at recognizing what a value ends with. Your Ends with filters should now work better across all string column types.

New usability features

  • For situations when you want to delay the next-best-action via triggers by the onClick event, you can now use setTimeout() much as you would use setInterval().
  • For some databases, you can use forms for quicker and easier query construction. Pro-devs who want to convert RAW code queries to form-based ones for the rest of your team can now do that easily.
Post_7.gif (854×480)

On-screen usability isn’t far behind

  • We’ve made it easier to find and configure data and style properties for widgets by splitting props into two intuitive tabs—Content and Style. Designers on your team don’t need to hunt for styling props.
Post_3.gif (854×480)
  • You can now fork templates into new and existing apps, which is awesome. Awesomer is that you can also choose a page from a template to fork and all forking works with Git connected apps, too. Build your app faster with templates and as always, let us know which templates would make your life easier.
  • Resizing the container for some widgets messed around with the layout of widgets outside the container. We have now improved that exercise a whole lot.
Post_4__5_Combined.gif (854×480)
  • You can now write JavaScript promises without return statements. That’s one less line of code per JS Object.
  • In reskinning our widgets to make them look more consistent and usable, we now have a total 14 widgets that look better.
  • Map Charts have now been upgraded with new legends, captions, and font styles.
  • The Rich Text Editor, JSONForms, Video, Audio, and Forms widgets now look like they belong with the other reskinned widgets.

Easier self-hosting

  • Appsmith now ships with Mongo and Redis built-in so you don’t have to spin up instances individually when installing Appsmith via Kubernetes.
  • Your choice of a reverse proxy now works with Appsmith without a hitch despite there being a NPM proxy that Appsmith ships with by default. This is great if you want your reverse proxy configs to work with Appsmith without having to change anything.

Some more security

  • The iFrame widget, useful to embed other apps or sites in your Appsmith apps, now runs in a sandbox for all new instances. All instances, new and existing, can toggle the environment variable APPSMITH_DISABLE_IFRAME_WIDGET_SANDBOX =TRUE or =FALSE to disable or enable it, respectively, but we recommend you keep it =FALSE.
  • We have fixed a bug that inadvertently let you edit some other workspace on the same instance than the one you intended to. This didn’t affect anyone neither will it going forward.
  • We also fixed known Apache vulnerabilities and made Appsmith a little more secure.

More details and a bunch more features, improvements, and fixes at our GitHub.👇

Take me there

Peek into the future

Before we publish a public roadmap, here’s a sneak peek into what you can expect from us.

  • Widget dynamic height: See widgets grow or shrink automatically within a configurable range relative to screen sizes and other widgets in your app.
  • Context persistence: Have Appsmith remember exactly where you were on the canvas, queries, and JS Objects before you switch to a different screen and automatically take you there when you want to.
  • Granular access controls for teams: Assign access and rights by roles and groups for all your users. Go as granular or as high-level asa you want to.
  • Audit logs: Stay on top of activity and big changes with a searchable, filterable trail of the what, the who, and the when.
Appsmith Hacktoberfest - Week 4
24
October
2022
Announcement

Appsmith Hacktoberfest - Week 4

Appsmith Hacktoberfest - Week 4
Ron Northcutt
0
 minutes ↗
#
hacktoberfest
#
community
Announcement

It is the final week of Hacktoberfest, and we have had a good time so far. But - the fun is not over yet! We still have a final week of fun and coding left, and plenty of prizes to award.

Theme 4

Lots of people who use Appsmith find joy in creating beautiful dashboards and tools to track data. So, the theme for week 4 is Dashboard Layouts. These can actually be some of the most fun and interesting designs simply because we have the very powerful Fusion Charts library available in our platform. In addition to some of the common charts, there is support for custom charts where you can really go wild. There are plenty of examples in our Template library, but this is your chance to impress us with your skills.

Remember, we are awarding some prizes for UI-only submissions. That means you can let your inspiration free to stretch the limits of what can be done, and show the world some amazing dashboard designs. Don't let that stop you from building actual, working apps. If you have some good data to bind to the charts, thats even better.

Swag Store Updates

There have been some questions about when the store will be open for buying cool, Appsmith stuff. The answer is after Hacktoberfest. We need to finish the event and award all prizes and awards before everyone starts spening their coins. It is great that folks are eager to get cool stuff, but stay patient.

Also, we've added two new items to the store: donations to charity! Each donation costs 1 coin and will give $5 USD to one of two worthy causes:

  • IRC for Ukraine - The International Rescue Committee delivers essential aid to Ukrainian refugees fleeing conflict.
  • Girls who Code - Girls Who Code is on a mission to close the gender gap in technology and to change the image of what a programmer looks like and does.

We wanted to not only provide ways to give back to the wider community, but also provide a way to use left over coins. Of course, you can also use ALL of your coins to donate to charity, and we would love to see this.

Giving Back Can Be Easy

If you missed it last week, we did a livestream on a "legal cheat code" for getting an easy submission for the contest. We want high quality and useful stuff, but we also want to make it easy to use or reuse existing code you may have hanging around. We are also on Discord in the #hacktoberfest channel if you have questions of need any assistance. Time is running out, but there is still enough time to get a few good submissions in. One of the great things about Appsmith is how easy it makes it to create awesome UIs, so get those ideas on the platform and submitted!

Appsmith Hacktoberfest - Week 2 and 3
13
October
2022
Announcement

Appsmith Hacktoberfest - Week 2 and 3

Appsmith Hacktoberfest - Week 2 and 3
Ron Northcutt
0
 minutes ↗
#
hacktoberfest
#
community
Announcement

We’ve been so busy creating amazing things that we decided to update on weeks 2 and 3 at the same time. Don’t worry, you haven’t missed anything and we still have plenty of time for you to show off your great work.

Livestream

Last week, we had a great livestream with Joseph, Vihar, and Ron to walk through the Hacktoberfest app and answer your questions about the event. The video is included in the app, but if you haven’t seen it, check it out now! It should answer any questions you may have about the app, how to contribute, and how to win prizes.

Themes 2 and 3

The theme for week one was “Startup Apps”. Remember that you can submit your contributions at any time and for any theme. These themes are just for us to group the contributions and give you more chances to win cool prizes.

For week two, the theme is UI Kits and Designs. While Appsmith is made by developers and for developers, we have made it super simple to build really great UIs without needing to write code. So, we are always looking for amazing and creative designs that push the boundaries of what our platform can do. So - go have fun! Drag, drop, design, and don’t worry about code.

For week three, the theme is App clones. Much of the functionality that you enjoy in your favorite applications can be replicated to a certain degree with our platform. We’ve seen people replicate desktop apps like notepad, and replicate online apps like e-commerce stores. We’ve even seen people replicate a basic music player that takes inspiration from one of the most popular streaming services!

So, let your creativity flow. Show us your functional apps, your amazing designs, and your fun clones.

Mini quests 2 and 3

There was a delay in getting the week two mini-quest activated in time, so we actually left the week one quest open for longer! To give everyone an equal chance, we actually have BOTH the week 2 and week 3 quests open. They are very simple and easy to accomplish. Some have suggested they are too easy… but at Appsmith, our goal is to make your life simpler and your work faster.

Legal cheat code?

In the spirit of making things easy, we wanted to share a “legal cheat code” that will make it even easier for you to take part and contribute back to the community - adding existing apps!

Anyone who has been using Appsmith for a while has at least a few apps hanging around that they would love to show off. There is nothing in the rule book to stop you from taking your awesome, existing work and contributing… and we encrypted the rule book so the judges can’t change it!

All you need to do is duplicate the app, make any tweaks or changes to remove internal data or references, make it public, and then submit it! It's ridiculously easy to extend, remix, and reuse apps on our platform.

In fact, we will have another livestream video on Thursday that will show you exactly how to do this quickly and easily. In many cases, it will only take a few minutes. So, check out our livestream on our Youtube channel on Thursday and follow along at home.

It is so easy that you can probably get one or two submissions done before we even finish our stream. If you can, let us know on our Discord channel.

Giving back more

As you have seen, we love to joke about how our event is “too easy” and remind you that Appsmith is a great tool that works for everyone, but that is because our platform is powerful and user friendly. In other words, this contest is “easy” because Appsmith makes building internal apps easy.

However, let's remember that the purpose of Hacktoberfest is to contribute to open source projects and help everyone. Whether you contribute code or templates, all of these submissions will be shared with the community. That not only lets you pay it forward to the next person but encourages even more resources to be available for you.

This virtuous cycle is one of the reasons why open source projects continue to grow and drive innovation across the world.

Appsmith Hacktoberfest - Week 1 Theme and Free Coins
4
October
2022
Announcement

Appsmith Hacktoberfest - Week 1 Theme and Free Coins

Appsmith Hacktoberfest - Week 1 Theme and Free Coins
Ron Northcutt
0
 minutes ↗
#
hacktoberfest
#
community
Announcement

At Appsmith, we like to do things a bit differently, and Hacktoberfest is no different. While we are looking for submissions all month, we will be announcing the 4 themes for the template contest each week. 

Additionally, we will have a way *each* week to get “free” coins, which can be redeemed for prizes in our swag store! Check back each week to find out how to get these free prizes.

Themes and prizes - how it works

In order to encourage a broad range of submissions from a broad range of people, we have arranged the template contest across 4 themes:

  1. Startup apps
  2. UI Kits and Designs
  3. App clones
  4. Dashboards

For each theme, we will have 3 categories:

  1. Best UI
  2. Clever Use of Code
  3. Most Inspirational

And, in each category, we will have 3 prizes:

  1. Gold - 10 coins
  2. Silver - 7 coins
  3. Bronze - 4 coins

A bit of multiplication (4 x 3 x 3) will reveal that we are giving out 36 prizes in total! Even better, all accepted submissions may be added to our community repository. So, not only can you win cool stuff, but you also may have your contribution immortalized in our community library. It’s a win-win scenario.

Theme 1 - Startup apps

For the first theme, we want to focus on “Startup Apps”. In other words, we want to see cool, clever, and amazing apps that any new startup would find useful. Whether the startup is a pre-seed project being run out of a garage or is a Series B+ funded organization with millions to wisely spend.

All businesses need internal applications, and often you can see smaller organizations struggling to scale by trying to build or buy solutions to help them manage their growing business and team. 

Appsmith makes this easier by allowing them to quickly build and implement internal apps as fast as they can be imagined, planned, and outlined. We can make it even easier by sharing community application templates that can inspire or provide a great starting point.

Who knows, the Startup App that you submit could be the thing that helps the next great open source company survive and thrive! It will at least be a great example of how people can use Appsmith to move faster and leverage the power of open source to do well.

Free coins

While we hope that everyone contributes great stuff, and we would love to give everyone a prize, that's just not how it works. We have tried to find a balance between offering great prizes and giving awards to as many people as possible.

But, there is a bit of a loophole. 

Each week, we will have a “mini-quest” that you can complete to win a free coin for our shop! All you have to do is visit our Hacktoberfest app, and click on the “Coins” menu item. Here, we will have a new quest each week that you can perform and redeem in order to win a bonus coin!

The only caveat is that you need to be registered to take part, AND you need to go check out the mini-quest each week. You should have plenty of time to do that in between writing code and building templates!

So - what is the week 1 mini-quest? It’s almost TOO EASY! All you have to do is register in our Hacktoberfest App and then visit the Coin page to redeem your coins. That's it - I told you it was too easy.

FAQ Week 1

  • Do I need to wait for the weekly theme announcement to submit something?
    No way! You can submit code or templates anytime in October, for any theme. We will talk more about them each week, but if you have a great idea, start today!

  • Do I need to have a Github account to participate?
    Yes, you do. Our main code repository and our community library both live on Github, so we will need you to have a Github account.

  • What are these “coins” and why do I want them?
    A coin is a virtual currency that can only be spent in our Swag Shop (coming soon). Trust us - you will want coins so you can get some of our great swag!

  • Instead of templates, can I just submit good old-fashioned code for Hacktoberfest?
    Of course! We have a convenient listing of Hacktoberfest issues in our app for you to contribute to. Go ahead and get registered, and then get coding.

  • Can I submit to issues AND the template contest? Is that legal?
    Let me check the rules… hmmm…. not seeing anything that prevents that, so go for it! In fact, there isn’t anything in the rules preventing you from submitting code and winning multiple template prizes. The more you play, the more likely you are to win.

  • So, can I get enough coins to buy everything in the store?
    I don’t know… can you? 

Native GraphQL support, Console Logs, SOC2 certification, and more
5
October
2022
Announcement

Native GraphQL support, Console Logs, SOC2 certification, and more

Native GraphQL support, Console Logs, SOC2 certification, and more
Vihar Kurama
0
 minutes ↗
#
features
#
community
#
announcement
Announcement

In September, we went up a major version in preparation for the curtain raiser on two big features coming real soon—granular access controls and audit logs. We also made native GraphQL available in Appsmith, added a view for console methods, and shipped a whole raft of other improvements.

But before anything else…

We're SOC2 certified!

This certification demonstrates our long-held commitment to security as an integral part of Appsmith.

GraphQL + Appsmith = ❤️

Connect any GraphQL endpoint to Appsmith and use the familiar Query Editor to start working with your data.

unnamed.gif (1440×810)

With native GraphQL support in Appsmith, you can

  • ↔️ see query objects and the variable dictionary side-by-side
  • ✍️ write query and mutation objects in Appsmith
  • 🧩 use fragments to save time with repeat code
  • 📄 paginate your app easily with both limit-and-offset and by keyset, AKA cursor-based pagination.

Meet Console Logs

Also available now is a view for all console statements in your JavaScript. Called Console Logs under Logs in the Appsmith Debugger, it’s a much better way to see all the responses to your console statements than the browser sub-window.

632dd672cb5cb654992bbae3_Console_Log_-_Option_4_(1).jpeg (1920×1080)

With support for console methods, you can

  • ⛓️ log entry and exit points in your functions
  • 🔢 specify a sequence of actions to log as they run
  • 🛎️ fire helpful messages in your debugging flow
  • 🤖 get auto-complete suggestions for all functions and variables when using console methods
  • ⚡ write better code faster

Scanners + sliders

Code Scanner, a brand new widget to let your users scan codes from their device cameras for a variety of use cases—authentication, code redemption, even to just land on your app.

unnamed_(1).gif (600×338)

Three visually engaging sliders are also here so you can let your end-users control numbers, a range, or the size of another component when they use your apps.

unnamed_(2).gif (1440×810)

2X faster widgets

➗ We do smart math now to see which widgets you are changing and update only them on the canvas.

✖️ We also calculate space available on the canvas only when you are moving a widget on the canvas or when you are dragging a new one.

➕ Seemingly small changes? Nope. Render times have decreased from 250ms to 150ms in the Edit mode and 150ms to 80ms in View mode.

Tons of Table improvements

✅ The Table meets the Checkbox and the Switch in new column types.

🪜 The pageSize property on the table widget is now fluid based on the the table’s height.

🚣 Row properties on the Table now ignore interactive column types like a Button or an Icon.

The debugger gets a facelift

🎢 Repeat logs now get grouped into one log line that you can click and expand.

🔥 Performance boost: Instead of saving each log line by line, console methods now save a batch of logs together

More details and a bunch more features, improvements, and fixes at our GitHub.👇

Hacktoberfest 2022: Come on in, the low-code is fine!
3
October
2022
Announcement

Hacktoberfest 2022: Come on in, the low-code is fine!

Hacktoberfest 2022: Come on in, the low-code is fine!
Ron Northcutt
0
 minutes ↗
#
hacktoberfest
#
community
Announcement

There is no denying that October is a great month. Whether it is Diwali, Halloween, Dios de Los Muertos, or other great events*,  this is a great time to get together with friends and family and celebrate!

Of course, one of our favorite events isn’t just a day or a week… but the whole month! That’s right - Hacktoberfest! Appsmith has been a joyful participant in Hacktoberfest for many years, and 2022 is no different. As part of the open source community, we love the opportunity to celebrate how our community of “Smithys” comes together to help make awesome software. 

This year we are doing things a bit differently to make it more fun and to ensure that everyone can take part. We will be diving into more details in future blog posts, but for now, lets cover the high points:

Hacktoberfest Portal

We have created a portal for this year’s event. This will make it so much easier for you to share and take part in the experience. We have loads of features like:

  • Registration and profile updates
  • Core issue listing and filtering
  • Submitting your template contributions
  • Tracking the status of your contributions
  • Redeeming your awards
  • Shopping in our swag store

You can go to hacktoberfest.appsmith.com to register today. More of these features will be rolled out as the month progresses, so keep your eyes open.

Swag Shop

Getting swag rewards is great, but do you know what’s even better? Getting to choose your own rewards! This year, we are building a swag shop with lots of options from shirts and hoodies to bluetooth speakers and lunch boxes. 

Instead of winning some pre-determined prize based on your contribution, we will be awarding “coins” that can be redeemed and used in our store. This way, you get to choose the specific things that you want. It may not be your birthday*, but you should still be able to get what you want.

Template Contest

While we love to get code submissions (see below), not everyone is a coder or is comfortable working on a complex open-source project like Appsmith. That's ok - you can still take part by building a cool app with our low-code platform and submitting that to our Template Contest.

Still not sure about all of that Javascript data binding? No problem - we have specific categories for UI-only entries. Use our free cloud service to drag and drop your way to app design greatness.

We will be awarding prizes across 4 themes with 3 categories and 3 prizes in each category. I did the math (and had my high schooler check it), and that comes out to 36 total prizes we will be handing out!

Keep in mind that there is no limit to the number of entries OR the number of prizes you can win. I wonder if anyone will be able to win enough prizes to get everything in the shop!

Core Contributions

Of course, we are also still hoping to encourage contributions to the Appsmith codebase as well. Our main repo is tagged for Hacktoberfest, and we have selected a group of issues that would be great ones to start with while still providing value.

If there is another issue that you’d like to work on that is not on the Hacktoberfest list, let us know and we can see about adding it for you. Also, please note that only work that is posted in October and is accepted will be eligible.

See the portal for a full list of issues available for the event.

Just the Beginning

Stay tuned for more information as Hacktoberfest continues. We will be telling you more about our themes, how to get free coins, and revealing our store inventory!

If you have any questions or want to reach out, head over to our Hacktoberfest channel on Discord, and we will be happy to help you out!  Finally, be sure to check out our Contributor Guidelines and Code of Conduct.

Happy Hacking! 🐱‍💻

Like my birthday in October. Want to get me a present?

Self-host Appsmith on a custom domain
3
October
2022
Resources

Self-host Appsmith on a custom domain

Self-host Appsmith on a custom domain
Confidence Okoghenun
0
 minutes ↗
#
community
#
deployment
Resources

While app.appsmith.com is great for those new to Appsmith or don’t have a ready infrastructure of their own, we find our users choose to self-host for obvious reasons.

In this post, you will see how to self-host Appsmith on a custom domain and easily enable SSL for added security.

💡 This guide is intended for use on a machine that’s running other services already. If you want to run only Appsmith on a machine, see the official guide.

Three easy steps do it

Before we get started, you will need a domain so you can map your self-hosted instance to it. Preferably, you want a sub-domain on your company’s root domain so your web security policies cover your Appsmith instance. To try it out first, you can get a free domain name from freenom.com.

Setting up a reverse Proxy

A reverse proxy is needed so that Appsmith can be run on a port other than port 80 and still accessible by visiting the IP address of the machine without specifying its port. We also have the added benefit of easy domain management and service mappings (if we choose to run other services on the same machine).

We show you how to do this using Nginx Proxy Manager (NPM), but you can choose one of several popular options like Traefik, Caddy, and Swag.

☝🏾 NPM is distributed as a Docker container and has a web GUI, thus, making it easy to set up and manage proxies.
  • Make sure no other services are running on port 80 before installing NPM.

If you’re using the default Docker configuration for Appsmith, change the default port from 80 to, say, 8080. Your docker-compose.yml should look like ↓.


version: "3"

services:
  appsmith:
    image: index.docker.io/appsmith/appsmith-ce
    container_name: appsmith
    ports:
      - "8080:80"  # Move the external port to a different port i.e 8080
     # - "443:443" # Remove the SSL port. This will be handled by NPM
    volumes:
      - ./stacks:/appsmith-stacks
    restart: unless-stopped

  • To install NPM using Docker, let’s create a docker-compose.yml file with the following configuration.

version: '3'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

  • Then pull the image and run it with

docker-compose up -d

  • You should now see the admin web UI when you go to http://<your-ip-address>:81.

http://:81

  • With the reverse proxy set up, you can login with the default admin user details and change them.

Email:    admin@example.com
Password: changeme


Mapping your custom domain

Preferably, you will use your company’s DNS provider(s) to do this. We have gone with Cloudflare, but the steps shouldn’t differ wildly with any other provider.

  • Create a Cloudflare account if you don’t have one and navigate to the Website tab on your Cloudflare dashboard.
  • Click Add a Site.
  • On Select a plan, scroll down and select Free.
Untitled.png (1206×963)
  • You should be automatically taken to the DNS record page.You can go to the DNS records page any time by clicking the DNS tab on the side-bar.
  • Copy the nameservers and paste them into a field for them in your domain provider’s admin settings.
Untitled.png (1146×340)
  • Scroll up to add a new DNS record to link your domain to your hosting provider’s IP that’s running the Appsmith instance.It looks like ↓.
Screen_Shot_2022-08-17_at_1.51.19_PM.png (1091×309)
  • You can add sub-domains like the WWW sub-domain or use the root domain for Appsmith.
  • Any request to your custom domain will be resolved by Cloudflare or your DNS provider and sent to your Appsmith-hosting server’s IP address.
  • Finally, head back to the web admin UI for NPM and create a new proxy host like ↓.You will use your custom domain for Domain Names  and the port you moved your Appsmith instance to when configuring a reverse proxy.
Screen_Shot_2022-08-17_at_2.29.51_PM.png (1446×621)
⚠️ The hostman is set to 172.17.0.1 which is the Docker network IP. This lets NPM which is in a Docker container talk to Appsmith which is in another Docker container. That IP shouldn’t be changed.

If everything’s right, you should now be able to access your Appsmith instance from your custom domain. 🎉

Generating SSL certificate for HTTPS

You may have noticed Appsmith wasn’t served using HTTPS when accessed from your domain. You will need to add SSL certificates to make that change. This can be easily added with Let’s Encrypt from NPM.

  • On NPM’s admin web UI, click the SSL Certificates tab, then click Add.
  • Type in your custom domain and an e-mail address you’d like to use with Let’s Encrypt and click Save.
Screen_Shot_2022-08-17_at_2.27.52_PM.png (1540×640)
  • Your certificate should now be live.Test this out by accessing Appsmith from your custom domain and see if it’s served using HTTPS.

And that’s it! Congratulations on a custom-domain self-hosted Appsmith complete with SSL protection. We can’t wait to see what you build.

Our cloud hosted version automatically handles hosting, security, and updates. Give it a try.

Disappearing watermarks, powerful auto-complete, and more
5
September
2022
Monthly Round-up

Disappearing watermarks, powerful auto-complete, and more

Disappearing watermarks, powerful auto-complete, and more
Vihar Kurama
0
 minutes ↗
#
widgets
#
community
Monthly Round-up

In August, we let you turn off the Appsmith watermark, moved to Kubernetes-based deployments for reliability, turned widgets 40% faster, and made a bunch of usability updates. We also leaked a few preview screens for GraphQL as a datasource and we will announce availability of v1 anytime now. All in all, a feature- and performance-packed month.

Let’s recap.

#BigThings

Charts’ turn to say hello to Theming

You have used Themes with the new table, the Button, and the container widgets. In August, we brought theming to charts, too. Line, bar, and pie, our default charts, now follow the theme you set for your apps.

#didyouknow we also support Fusion Charts natively in Appsmith. Learn how to use them in your apps here.

Powerful upgrades to auto-complete

Auto-complete now knows your variables within widgets and across JS Objects.

  • It now remembers local variables and also shows where you used them.
  • It doesn’t trip up on the Select, Button Group, and CheckBox widgets like it did before.
  • It also behaves more consistently on forms when you use mustaches.

Peek-a-boo watermarks

For those of you who have put your money where your app is and still see the Appsmith logo, head over to your Admin page, check "Hide", and watch the watermark disappear. While you are at it, consider turning telemetry on so we can build and ship better. Win-win.

Updates from Project Reskinning

  • Radio, Toggle, and Checkbox, useful and popular widgets, are now themed.
  • Your labels on the Rich Text Editor widget have moved out of the Property Pane and are now available on the widget itself.
  • Widget properties on the Property Pane are now grouped by content, style, and events.

#UpdateThings

Controlled sync functions

There was a time when a function first written aync and then turned sync used to run on page load. That doesn’t happen anymore.

Securing your embeds

With great usability, comes great responsibility. So, while we now let you embed your apps in all domains by default, we recommend you don’t use this option and carefully allow domains and sub-domains to embed your apps.

Sun setting real-time commenting

While v1.7.13 is now sunsetted, we are excited about the future of collaboration inside Appsmith and will come back with a collaboration suite that addresses a range of your collab use cases.

#UpcomingThings

Native GraphQL support

Your days without native GraphQL support inside Appsmith are numbered. Very soon, GraphQLphiles can use the query language as a supported datasource and write their queries like you would a REST API query.

We will follow up with more soon.

June Round-up: Fuzzy Search, Backup and Restore, More Product Updates
4
July
2022
Monthly Round-up

June Round-up: Fuzzy Search, Backup and Restore, More Product Updates

June Round-up: Fuzzy Search, Backup and Restore, More Product Updates
Vihar Kurama
0
 minutes ↗
#
community
#
app-development
#
widgets
Monthly Round-up

It's been an eventful month here at Appsmith! We raised a Series B led by Insight Partners with participation from Accel and Cannan Partners. The round will help us improve our open source project and make it easier for large companies to adopt Appsmith. We're excited to have such strong partners on board as we continue our mission to make it easy for anyone to build and deploy internal applications. Stay tuned for more updates in the coming months!

Not just that, we've shipped a lot of features over the past month, so let's go through them.

New Features

Fuzzy Search for Widgets!

With so many options, it can be tricky to find the right widget for your needs can be tricky. We've got you covered! Fuzzy Search is an easy way navigation through all of our widgets by typing in keywords or phrases that match what exactly need to be done.

For example, say you have a typo while searching a specific widget. We'll make your search experience enjoyable by showing you the right results without hassle. Or say, if you're looking to find different input widgets that can help in your data collection process, just type an idea related to data input, and we'll show you all of the widgets that are likely to be needed on this project!

Easy Backup and Restore

Are you self-hosting Appsmith? Want to back up your data? Or are you recovering from an old backup? No worries! We just added two new commands that you can use from CLI that make it easy as pie.

For backup use:


appsmithctl backup

To restore use:


appsmithctl restore

Spellcheck for Rich Text Editor

The rich text editor's new superpowers will help you type quicker, with fewer errors. Yes! We've added a spell checker that enables you to catch any typos on your way no matter where you are or how busy things get. Just hit the CTRL and right-click on the typo; you should see the corrections.

Spell Check Image.png

Connection Pooling for MS SQL

We now introduce a connection pool for the Microsoft SQL Server (MS SQL), where we allow multiple connections per datasource (up to 5). So if five queries need to run on page load, they can all pick their connection and get executed simultaneously.

Previously, if multiple queries were to run together, they would be sequentially queued. And if the first query took a lot of time to execute, the second query would time out even before it got sent because it starved for a connection.

Generate New Page now Uses JSON Forms

The new Generate New Page feature makes it easier to customize your app! JSON forms now power the CRUD Apps, so you can change just one setting without editing individual form elements.

Product Updates

Better App Editing Experience

We know sometimes it’s hard for you to select a widget you need. We improved the experience by introducing a couple of changes:

  • Focus on the first property whenever we click on the widget.
  • When we add or paste a new widget, focus on the widget name. (it should be editable only if we press Space or Enter; otherwise, it will be hard to other operations like delete, copy, paste, etc.,)
Added more styles to Checkbox and Switch Widget

Checkbox and Switch Widget support more styles out of the box. The new options include text position, alignment label, and color size font style!

Added Deprecation warning to old widgets

With this update, we're adding a warning to all the widgets going out of date. If you want you're running on a self-hosted version, you can show these Deprecation messages on their widgets; just add "deprecated: true" in the config file.

Theming for CRUD Templates and JSON Form Templates

Theming is now supported for CRUD apps and JSON Forms. This will allow developers to create and customize forms more efficiently in a few clicks.

Fixed Cyclic Dependency Errors

We fixed cycles in dependency error messages when changing or updating widgets' names and other bugs that made them behave incorrectly.

Update Organization URL Slug

When the organization name is updated, the slug is not updated. This generates an outdated URL when the user clicks on an organization name from the left panel. This PR changes the following behaviors.

  • The Organization slug will no longer be unique.
  • Link to organization applications will be based on the organization id instead of the slug.
  • The organization slug will be updated whenever there is a change in the organization name.
  • All the existing organization slugs will be updated.

Collaborations, Technical Content, Videos & Tutorials

June was an excellent month for the community, with many folks collaborating on exciting new projects and maintaining their current work. We documented many user queries on our forum that will help guide future development decisions.

  • These questions can be found on our Community website (community.appsmith.com) under the appsmith-support tag.
  • We've done an awesome How Do I Do X Session with our engineers Trisha and Nidhi on JS Promises, onPageLoad Actions, and Prepared Statements. Watch the stream here.
  • The engineers behind the scenes are constantly working on something new and exciting. They just shipped an excellent feature - Version Control with Git! Watch as they describe its function, explain how it was built with examples in no time, and most importantly, show you some cool tricks using this powerful tool yourself!"
  • We've partnered with a few friends from MariaDB to build an easy-to-use reservations tool. You have to input your desired date and time, then let the system take care of everything else. Watch the stream 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 by raising a PR on Github, and we will do our best to include it at the earliest opportunity.

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

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.

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.

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.

February Round-up: Helm Charts, Product Updates, and Collabs
7
March
2022
Monthly Round-up

February Round-up: Helm Charts, Product Updates, and Collabs

February Round-up: Helm Charts, Product Updates, and Collabs
Vihar Kurama
0
 minutes ↗
#
community
#
developer
#
deployment
#
product
Monthly Round-up

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days! In the second month of 2022, we cleared a few bugs and created an all-new event called How Do I Do X, where many frequently asked questions live.

I am here to give you more deets; follow along!

Appsmith Support on K8s with Helm Charts

We’ve added support to deploy Appsmith on K8s using Helm charts. Deploying Appsmith on Kubernetes clusters has now become super-easy with Helm charts. If you have a cluster ready, you’re three commands away from your own Appsmith on k8s.

Read the complete documentation here!

To explain this feature in detail, we had Shri, one of our engineers, join us on a community call. Take a look:

Product Updates

New Entity Explorer**: We’ve shipped an all-new entity explorer that’ll help you navigate to any query or widget and give you an entire overview of all the application data. Here are the changes we’ve made:

  • We no longer show the entities from all the pages. Only entities pertaining to the specific page that the user is currently on will show up—performance improvements by writing better selectors and memoizing components.
  • Queries now have the same icon as the datasource and are sorted under the datasource.
  • We have a new section that shows all the queries and JS Objects. They are grouped and sorted by default.
  • The widgets section is expanded only on demand.
  • Action creation will now go via the Omnibar.
  • Bindings are no longer under the entity but are shown in a separate popover.

Here’s a screenshot:

pasted image 0.png
Mobile Responsive UI

Appsmith application dashboard, settings, and configurations are now mobile-compatible. With this, you can share apps, manage members and view your applications through any mobile device.

Here are a few screenshots:

CleanShot 2022-03-07 at 14.45.54@2x.png
New S3 Command

We added a new query to our S3 datasource that lets us delete multiple files at a time in given bucket storage. All you’ll need to do is input the bucket name and send the file names in an array separated by commas. Note that these inputs will also allow dynamic binding using the moustache operator from appsmith.

CleanShot 2022-02-28 at 12.06.52@2x.png
More keyboard control in Widgets

Internal tools usually deal with a massive amount of data. Hence having more keyboard control over all the widgets will save a considerable amount of time, especially while working with forms, widgets, and select-dropdowns.

With this update, you can navigate options inside the multi-select widget using general keyboard shortcuts.

  • Use Tab to focus the dropdown.
  • Enter Space key to open the dropdown
  • ArrowUp ArrowDown keys to navigate
  • Enter or Space to select an option
  • Enter or Space or ArrowRight to open submenu
  • ArrowLeft to close sub menu

Additionally, you can use these on input widgets as well:

  • Tab to focus
  • Enter to switch to editable mode
  • Esc to move out of editable mode
Support Body in GET API Requests

Now all HTTP methods support a body in the HTTP request. This feature adds another tab in the Rest API plugin called None. Users can use this to define HTTP requests that don't have a body. In the Body field, clicking on None will remove the content-type header, while clicking on RAW will keep any existing content-type header.

We also refactored the ApiEditorConstants to use enum values instead of arrays. It makes the code more readable and understandable in various places.

New Collaborations, Technical Content, Videos & Tutorials

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

  • We built admin panels on SnowflakeDB, ArangoDB, MariaDB, MSSQL, Firestore, and Redis, all on Appsmith. Not just that, we have more coming soon; if you would like us to work on any new integration, feel free to reach us on Discord.
  • We created a fully authenticated internal application without writing any code, using Xano as the backend. Check out the full tutorial here to learn how we’ve made it.
  • Sathish Gandham, a frontend engineer focusing on UI performance at Appsmith, explains to us how How 40 Lines of Code Improved Our React App’s Performance by 70%; read the full blog here.
  • That’s not everything; we’ve collaborated with Cube to build a metrics dashboard on Appsmith live using Cube’s APIs as backend. Watch the full video here.
  • Confidence, our developer advocate was invited to Hasura’s Data and API Show to demo how one can build internal tools dashboards using GraphQL API and Appsmith. Watch the entire event 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.


Building an Appsmith Dashboard with Cube
24
January
2022
Tutorial

Building an Appsmith Dashboard with Cube

Building an Appsmith Dashboard with Cube
Vyom Srivastava
0
 minutes ↗
#
community
#
tutorial
#
dashboard
#
javascript
Tutorial

Every project contains several moving parts. We developers call them features. They can be dashboards, performance overviews, a blog, or web pages that include forms. Features take time to develop from scratch. That can impact delivery and deadlines.

In this article, I want to create a metrics dashboard with Appsmith. I'll use API endpoints generated from Cube with a public dataset from the Museum of Modern Art (MoMA).

Here's what the end-product will look like:

dashboard-image

I want to showcase how it would be more efficient for your team to have a tool to create custom dashboards for internal metrics. A huge bonus point is that it can be used by anyone, including non-devs in your team. This is where low-code tools come into play.

Appsmith is an open-source low-code platform that lets you create web applications like dashboards and admin panels by using drag-and-drop widgets. With Appsmith, you can connect multiple data sources like MySQL, MongoDB, REST API, Google Sheets, and perform CRUD operations.

I'll be using a hosted Cube deployment on Cube Cloud to get data from the Museum of Modern Art (MoMA) dataset.

A Quick Look at Appsmith

You don't need to be a developer to create metrics dashboards using Appsmith. It comes with a set of drag-and-drop widgets for forms, charts, images, and more, that you can use in your application to enhance its functionalities.

A few of the benefits of Appsmith include:

  • The ability to create apps without development knowledge
  • Saving the developer team's time
  • Saving your company's money by saving man-hours
  • Increased productivity
  • Drag-and-drop widgets

However, keep in mind that despite all of its functionality, Appsmith can't compare to the customization level of a custom-built app.

A Quick Look at Cube

Cube is an open-source analytics API platform that lets you connect with data sources and then access the data through an API. You can connect to data sources like MySQL, AWS Athena, and Google BigQuery, among others. It's agnostic for visualization tools, meaning you can connect to any front-end charting framework and build your own customized UI.

The Cube API lets you sort, group, and filter through the dataset itself. It acts as a centralized back-end metrics layer for any dataset. The multi-staging query system allows Cube to handle trillions of data points.

Creating a Dashboard with Appsmith and Cube

You're going to display a public dataset from the MoMA on the dashboard you're creating on Appsmith. The MoMA is one of the largest and most influential museums in the world, with around 300,000 books and catalogs, and more than a thousand periodic files.

This is how your dashboard will look:

dashboard-image

You'll use db4free.net, a free database service, to upload and host the database. After uploading the data to the database, you'll connect to the database using Cube. You'll be able to integrate the API generated through Cube into the different widgets of Appsmith.

Prerequisites

  • Any public dataset (in this case we're using one from MoMA)
  • A Cube account
  • An Appsmith account
  • Any database service; this tutorial will be using db4free.net

1: Clone the Dataset and Host It on Your Database

Once you clone the dataset, use the PHPMyAdmin or the cPanel of the database hosting service and import the data via CSV.

2: Connect Cube to Your Database

Now log in to your Cube account and click Create deployment. Give the deployment a name; the images in this example will use Appsmith Dashboard.

setup-1

On the next screen, select MySQL from the data source list. If you're using some other data source like Google BigQuery or AWS Athena, select the option accordingly.

step-2

Now, just fill in your database credentials, and you're good to go!

step-3

Once you've generated the data schema of your dataset, you can create REST APIs.

3: Get API Credentials and API Endpoints from Cube

Once you have created a deployment, you'll be redirected to the overview page of the deployment.

overview-page

Copy the API endpoint and click How to connect your application to get the Authorization key.

And you're done creating Cube's API. It's time to move ahead with Appsmith to create your dashboard.

4: Set Up Appsmith

Log in to your Appsmith account, create a new application, and select Build with drag & drop.

create-app-1

5: Create the First Widget

Once you see an empty canvas, click the + button next to Datasources in the sidebar. Select Create new API.

create-app-2

You should see the following page:

create-app-3

For the URL, paste the REST API endpoint, and in the Authorization header, paste your API code. In the case of this tutorial, the REST API endpoint is https://fuchsia-shark.aws-eu-central-1.cubecloudapp.dev/cubejs-api/v1/load.

Pass the following JSON as a GET param:

{
  "dimensions": [
    "Artists.begindate",
    "Artists.displayname"
  ],
  "timeDimensions": [],
  "order": [
    [
      "Artists.begindate",
      "desc"
    ]
  ],
  "limit": 10
}

In this code block, you're asking the REST API to return the top ten begin dates and display name. The rows are in descending order.

Once you start to get the data, you'll see a list of widgets on the right side of the page. Select Table from this list:

A table will appear in the canvas.

6: Create the Second Widget

Repeat the previous step but with a different query. Just add another API data source with the following query:

{
    "dimensions": [     
        "Artists.nationality"   
    ],   
    "timeDimensions": [],   
    "order": {     
        "Artists.count": "desc"   
    },   
    "ungrouped": false,   
    "measures": [     
        "Artists.count"   
    ] 
}

This query will return the count of artists according to country.

Again, select Table from the widget list. Your canvas should look something like this:

create-app-6

7: Add Different Widgets as Per Your Requirements

In this example, I've experimented with different widgets and data customizations. I've added three more charts using this query.

Query 1

This query will return the count of all artists with their begin date.

{   
    "dimensions": [     
        "Artists.gender", 
        "Artists.begindate"   
    ], 
    "timeDimensions": [],   
    "order": {     
        "Artists.count": "desc"   
    },   
    "ungrouped": false,   
    "measures": [     
        "Artists.count"   
    ], 
    "filters": [
        {
            "member": "Artists.gender",
            "operator": "set"
        },
        {
            "member": "Artists.begindate",
            "operator": "notEquals",
            "values": [
                "0"
            ]
        }
    ]
}

Query 2

This query will return the gender breakdown of the complete dataset. I have used the data coming from this API in the pie chart.

{
  "dimensions": [
    "Artists.gender"
  ],
  "timeDimensions": [],
  "order": {
    "Artists.count": "desc"
  },
  "measures": [
    "Artists.count"
  ],
  "filters": []
}

Query 3

This query will return the count of artists from each country listed in the dataset.

{
  "dimensions": [
    "Artists.nationality"
  ],
  "timeDimensions": [],
  "order": {
    "Artists.count": "desc"
  },
  "limit": 10,
  "measures": [
    "Artists.count"
  ],
  "filters": []
}

You can use this query with any widget to represent the data efficiently.

Create Your Own Internal Apps with Appsmith

In this article, you learned how to create a metrics dashboard with Appsmith and Cube to display data from the public dataset from the Museum of Modern Art (MoMA). You now know how to use low-code tools to save time and money on development.

Check out the live example here and try adding some more widgets to your metrics dashboard with Appsmith.

I think Cube and Appsmith are a great match. With Cube, you focus on creating business value without wasting time and effort on maintaining infrastructure.

Appsmith lets you focus on creating business value with metrics dashboards with minimal effort to both create and maintain.

You can register for Cube Cloud right away, and check out Appsmith as well!

I'd love to hear your feedback about building metrics dashboards with Cube Cloud in the Cube Community Slack. Click here to join!

Until next time, stay curious, and have fun coding. Also, feel free to leave Cube a ⭐ on GitHub if you liked this article. ✌️

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.

It Took Us Less Than 1 Hour to Build a PgAdmin Clone with Low Code: Here’s How We Did It?
3
January
2022
Engineering

It Took Us Less Than 1 Hour to Build a PgAdmin Clone with Low Code: Here’s How We Did It?

It Took Us Less Than 1 Hour to Build a PgAdmin Clone with Low Code: Here’s How We Did It?
Vihar Kurama
0
 minutes ↗
#
admin
#
postgresql
#
dashboard
#
community
Engineering

PostgresDB is an open-source database that uses and extends the SQL language. It’s used widely across many organizations to build a variety of apps. Developers tend to love and prefer PostgresDB for its simplicity and extensibility. Postgres Admin (PgAdmin) has a neat interface for accessing any Postgres instance from any device with a web browser. It allows administrators to carry out tasks like managing user accounts, databases, clusters, and more.

However, PgAdmin has a few biting downsides; here are a few:

  • Installation can be difficult
  • Troubleshooting and debugging is a complication, especially if you’re new to Postgres
  • Takes time to load on a machine, and is prone to freezing, especially when establishing a new database connection
  • Slow to respond to queries
  • Cumbersome interface when dealing with multiple databases

I think these are problems that can be dealt with if there was just a better user experience. I set out to build a new version of the PgAdmin! And I did this in under a few minutes. In this blog, I will tell you how I did this.

But, I have to say, cloning the PgAdmin app is not an easy task; there are multiple challenges here, as we have to implement several functionalities. With a fully functional PgAdmin app, we should be able to:

  • Establish connection on any remote cloud-based Postgres instances
  • Manage databases, roles and users
  • Create, alter, and drop tables on the connected databases
  • Provide UI for data export/import from CSV files, schema checker, etc.
  • Write queries on an editor to run SQL statements and see the results of querying against your database

Doing all this in under minutes is an impossible task if we have to code things from scratch, so we will be using a low code platform like Appsmith. Using Appsmith to build internal applications is super fun; we can connect to any data source, write queries, and build UI 10x faster than usual. This is entirely web-based; depending on the preference, we either self-host this on any server or simple use the community cloud edition.

How did we build this?

It took us less than an hour to build this, as Appsmith comes with a Postgres data source integration. With this, we can run any PG query and use it anywhere across the application using dynamic JS bindings. We will talk more about the features of the application in the following sections; before that, here is a sneak peek of how the application looks:

CleanShot 2022-01-03 at 15.21.31@2x.png

The application has two pages, one for managing tables (Table Manager) and another for testing and running queries (Query Executor). Now, let’s deep dive into each of these tables, and talk a bit more about their functionalities.

Table Manager

On the table manager, you can find all the tables from the connected PG data source. It offers all the functionalities that a PgAdmin does; you can create, read, update and delete these tables on this admin panel. Performing these CRUD operations on tables is pretty straightforward on Appsmith. Additionally, you can filter the tables based on the schema and update them whenever needed.

When you click any table name (select a row) from the table widget, you’ll see a new container on the right, where we display the three essentials:

  1. General Table Details: Here, we can update the information of the table and set the owner.
  2. Column Details: Configure all the settings for columns inside the selected table.
  3. Constraints: Add any relations between the columns inside the table.

Using these three features, we can manage the column properties and add different relations between them. We’ll talk a bit more about this in the next sections.

Query Executor

This is the second feature of our Appsmith PGAdmin. Here, we can execute any queries.

CleanShot 2022-01-03 at 15.42.41@2x.png

Our auto-complete and slash commands feature will make it much easier to test queries in real-time. For building this, we’ve used the RichText Editor widget on Appsmith; whenever we execute the query, we display all the responses on the table widget. However, this can be customized within minutes based on different use-cases.

Now, Let’s Use the Appsmith PgAdmin

In this section, we’ll talk about the different functionalities provided by the Appsmith PgAdmin with a few examples. We’ll also deep dive into some of the queries that were used on Appsmith to implement the functionality.

To see this in action, you will need to switch data sources on Appsmith. For this, you can connect your PG database by clicking on the + icon next to the Datasources section. Next, on every query we will see the data source it’s connected to. Here, we can switch the data source by selecting it in the data source dropdown.

Managing Tables: When working with databases, we often need to configure names, schemas, on Appsmith PgAdmin. Doing this is super easy on Appsmith! As soon as you open the PgAdmin, you will see the list of all the tables on the table widget. To see their configuration, we can simply select any row, as soon as it’s selected, we’ll see a new container on the right, where we can configure the entire table details. Here’s a screenshot:

CleanShot 2022-01-03 at 15.31.01@2x.png

As we can see, on the right, when a table is selected, we can see all the details under the general tab. We can also delete a particular table by clicking on the delete button inside the table. This is done by adding a custom column on the table widget and setting the column type to a button. If you prefer modals, then you can configure tables to show modals where we can update the necessary details.

Configuring Columns in Table: To manage columns inside the table, select the table and navigate to the Columns tab inside the container on the right.

CleanShot 2022-01-03 at 15.32.17@2x.png

Here, we will see a list widget, which has all the details from the selected table. We can edit the data type and also the column names, using the interface that we’ve created on the list widget. In case, you want to delete a particular column you can use the delete button that’s present on the list item. Additionally, you can toggle the not-null option to set the ‘accept null values’ for individual attributes.

Here’s a GIF:

CleanShot 2022-01-03 at 15.33.48.gif

In the list above, we only see the data types from the table columns; to add constraints such as foreign keys, we can simply navigate to the constraints tab and add or configure the attributes.

With this, our custom PgAdmin is ready for use. We use this application for internal processes like managing our Postgres instances. We definitely find it faster than the native PgAdmin app, and it’s definitely nicer to look at!

If you want to build any admin panel, you can do it with Appsmith. We’ve got all the popular database integrations, and this list is growing! Do join our growing community on Discord for more tips, and tricks on how to make the most out of Appsmith.

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!

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.

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n
8
November
2021
Resources

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n
Vihar Kurama
0
 minutes ↗
#
applications
#
community
#
crud
#
automation
#
beginners
Resources

Developers spend quite a bit of time building internal tools, admin panels, and applications for back-office tasks that help automate everyday essential business processes. These involve multiple efforts, from maintaining a special database to writing lots of frontend and backend code. But, what if we told you that you could utilize a modern stack to build such applications that can help with your backend, frontend and automation tasks? Sounds good right? It is!

We’re happy to introduce a great new stack to build applications: The Supabase, Appsmith and n8n stack (SAN Stack) for developers to build and maintain modern custom internal tools.

What is the SAN Stack?

SAN stands for Supabase, Appsmith and n8n, after the three emerging and notable software that makes up the stack.

Supabase: The open-source firebase alternative to creating a backend in minutes. Start your project with a Postgres database, authentication, instant APIs, real-time subscriptions and storage.

Appsmith: An open-source framework to build custom business software with pre-built UI widgets that connect to any data source, and can be controlled extensively using JavaScript.

n8n: An extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your custom functions, logic and apps.

This stack lets you build any application within minutes. You can use Supabase for the database and backend, Appsmith for UI and adding functionality, and n8n for automating background tasks.

One of Appsmith’s co-founders and head of product, Nikhil Nandagopal broke down the basics of app building into three steps.

CleanShot 2021-11-08 at 11.20.37@2x.png

This has gained quite some traction among developers, especially those looking to build internal tools or applications.

Why Supabase, Appsmith, and n8n?

  • Free / Opensource: Supabase and Appsmith are fully open-sourced and can be self-hosted on their servers. While n8n follows a fair-code distribution model and always has visible source code, which is available to self-host.
  • Low-code yet high functionality: All three platforms follow the principles of the low-code model to help developers deploy and scale their applications in the fastest way possible. However, devs can utilize SQL, JavaScript, and data structures to customize their applications.
  • Editing Experience: Supabase, Appsmith, and n8n have an excellent UI interface and provide rich editing and debugging experience for developers right from the beginning. Both Appsmith and n8n provide a drag and drop interface for building UI and automation workflows, respectively. In comparison, Supabase offers a live SQL editor to test out and play with your database and has the power to export them into APIs directly from the platform.
  • Collaboration: When working with teams, all three platforms offer great collaboration tools; you can share these applications or workflows with anyone and set specific permissions such as view-only or edit mode. They are consistently being improved in their future roadmap.
  • Self-hosted: Developers can self-host all three platforms on their servers for free. It is useful when you want your data to be more secure, have complete control over customization, and have custom domain options.
  • Fantastic Community: The community is incredible across all three platforms; they provide excellent support and a transparency roadmap. New feature requests or existing bugs are immediately taken care of based on the priority. And with a great community, content gets better and better, and they provide rich documentation and many tutorials for devs to get started.

Build a Simple Ticket Manager Using SAN Stack

There are so many tools and applications that can be built across the SAN stack. Here are a couple of examples: An Employee Survey Dashboard and a Ticket Management Admin panel.

Using the SAN stack, you can build any dashboard in just minutes.

As an example, I will show you how to create a support dashboard manager application.

Using this application:

  • Users will be able to create or raise new tickets for a particular query
  • The support team will be able to see these tickets and assign them to engineers
  • When the tickets are resolved, we will be sending an automated email to the users
CleanShot 2021-11-08 at 12.20.33@2x.png

Let's get started!

Set up your Backend on Supabase

The first step is to set up the backend for the application; for this, we will be using a Postgres database on Supabase.

  1. If you are new to Supabase, you can create a new account (it's free!) or sign in with your existing credentials.
  2. You will be redirected to the Supabase dashboard; here, you can manage all your projects.
  3. Create a new project, and set the name to Support Dashboard. Create a new table by clicking on the Create Table option on the side navigation.
  4. Supabase gives us many ways to add data to the tables, from writing queries to creating schemas using UI to simply uploading CSV files; developers can choose any option.
  5. For our support dashboard, we will be creating a table by uploading a CSV file on Supabase.
CleanShot 2021-11-08 at 12.21.48@2x.png

The DB is now set up; let's use Appsmith to connect this PostgresDB and build UI for the application. For this, we might need to note down the connection info from project settings on Supabase. Following is how it looks like:

CleanShot 2021-11-08 at 12.22.58@2x.png

Build UI on Appsmith and Writing Queries

Our backend is ready; now, let's connect it to Appsmith to build UI and add functionalities. Follow the below steps:

  1. If you are new to Appsmith, you can create a new account (it's free!) or sign in with your existing credentials.
  2. After we sign in, we will be redirected to a dashboard to create a new application.
  3. Next, let's connect a new data source. To do this, click on the + icon next to the Datasources from the sidebar and choose PostgresDB.
  4. Now, copy the database connection details from Supabase to here and click on the test button to validate the authentication.
CleanShot 2021-11-08 at 12.23.58@2x.png

Awesome, we now have established a connection to our data source. Next, let’s build UI using widgets on Appsmith.

  • Click on the + icon next to widgets and drag and drop a Tab widget. We can configure using the property pane by clicking on the cog icon on the top-right corner.
  • As seen in the below screenshot, we have added four tabs to support the dashboard.
CleanShot 2021-11-08 at 12.24.46@2x.png
  • Now, we will add a button that should open a modal and have a form to raise a new ticket when clicked. For this, just drag and drop a new button widget from the widgets section and move it on canvas.
  • Add a few input widgets and a button to submit the form; this is how the form looks after the UI is complete:
CleanShot 2021-11-08 at 12.25.29@2x.png
  • We now have the UI to create a ticket. Let’s write two queries on Appsmith that will allow us to create tickets and list tickets. To do this, click on the + icon next to the data sources and use the Supabase connection here to create a new query.
  • Rename the query to create_new_ticket under the query pane; here we can write SQL that can collect inputs using moustache bindings. Following is how it looks like:
INSERT INTO PUBLIC."tickets"("id","createdAt","user","updatedAt","description",
"status","priority","category","assignedTo")
VALUES('{{appsmith.store.ticket.id}}','{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_user.text}}', 
'{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_description.text}}','{{c_status.selectedOptionValue}}',
'{{c_proporty.selectedOptionValue}}',
'{{c_category.selectedOptionValue}}','{{c_assignee.selectedOptionValue}}');
On Appsmith, we can use moustache bindings anywhere across the app to bind data or write javascript code to customize and add functionalities to your widgets.
  • Lastly, we now set the onClick property for the button to execute a query and select the create_new_ticket. And just like that, we should be able to create new tickets on the application.
  • Now, let’s write one more query where we could list all the tickets that users create. We will name this query get_tickets; the following is the SQL snippet.
SELECT * FROM public."tickets";
  • Now, drag and drop a table widget onto the tab widget under the Assigned To Me tab. Open the property pane and add the following snippet to bind the tickets:
{{get_tickets.data.filter(t => t.assignedTo === 'confidence@appsmith.com' && t.status !== 'closed')}}

Fantastic, we should be able to see all the tickets assigned to the specific user! It’s that’s simple to write custom JS to configure our internal applications on Appsmith. Now let’s use a webhook and build automation that sends Emails from the ticket using n8n!

Building an Extendable Workflow on n8n

If you want to build an internal tool that requires sending emails, then n8n is the way to go. n8n is a tool that can be used to automate workflows between your favorite web apps (such as Slack, Google Drive, Dropbox, etc.). However, n8n can be used to connect almost any two web apps that you use. Now, let's create a workflow and use a webhook to send requests to n8n from Appsmith.

  • If you are new to n8n, sing-up for their cloud version here.
  • Next, create a new workflow by selecting New under the workflow menu
  • Now, drag and drop a Webhook node onto the canvas; you can configure the nodes by clicking on them.
  • Now set the HTTP method to POST and copy the TEST URL

Awesome, now that we have the Webhook, let’s connect it with Appsmith by adding it as a data source.

  • On the appsmith application, click on the + icon next to the data source and create a new API.
  • Set the API type to POST and paste the API webhook URL,
  • Now paste the following code snippet under the body tab to collect input from the dashboard.
{"message": "({this. params. message})","email": (this. params. email})","ticket": "((appsmith. store. ticket. id}}"}
  • Next, connect a Gmail node to the webhook and authenticate with your Google ID.
  • To pass the data from the webhook to the Gmail node, configure the message property by using the variable selector nodes on the left pane.
  • Lastly, make sure you set the workflow state to active.

And just like that, we should be able to send Emails using n8n without writing any piece of code.

CleanShot 2021-11-08 at 12.28.38@2x.png

Building this app from scratch, including writing snippets of code, is likely to take 30 minutes! Isn’t that fast?

If you're looking for a modern approach to building internal applications, check out Supabase, Appsmith, and n8n! These tools are straightforward, powerful, and can help you build apps faster than ever. So what are you waiting for? Start building your next internal app today.

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.  

Learn How to Push Content from Multiple Sources to Discord in One Go
20
October
2021
Tutorial

Learn How to Push Content from Multiple Sources to Discord in One Go

Learn How to Push Content from Multiple Sources to Discord in One Go
Vihar Kurama
0
 minutes ↗
#
community
#
applications
#
dashboard
Tutorial

Every job has a set of critical and essential tasks that can feel mundane to execute. As a developer advocate, I love talking to developers and new users and helping them out on their journey with Appsmith. While I am busy doing this work, some tasks often slip into the basket of “I’ll get to it soon.” These tasks often include pushing out information about our new content in specific channels on Discord. This is crucial work and helps us, but it gets deprioritized when there are many other things to do. For social media, a tool like Hootsuite has been a game-changer for us. We also built our custom social media scheduler with Appsmith and automated it using n8n. We also wanted to solve this for our community on Discord. And that’s when we came up with our comprehensive push messaging system, which automatically pulls up content from various channels like our blogs, Twitter handle, and Luma events. We can just share it with users on our Discord server in just one click!

The Discord Message Pusher has been an excellent internal tool for us; the entire content and marketing team uses it, and guess what? No more pending tasks on our to-do lists! In this blog, I am going to discuss the steps involved in building this application on Appsmith. And hopefully, like me, you can make a customizable internal tool for your content team.

Let’s start! 

Connecting Data Sources (APIs) on Appsmith

In the first step, we will be creating a new application on Appsmith and integrating it with different data sources like Twitter, Youtube (YT), and Webflow. We’ll be using APIs to fetch all the information and render them on the Appsmith widgets. First, let’s set up a new application to get started!

  • Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  • Create a new application by clicking on the Create New button under the Appsmith dashboard.
  • We’ll now see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources and Widgets. This is where we can connect to data sources and find all the widgets.

Fantastic, the app is now set up, now let’s fetch all the information from a particular YT channel and render them onto a list widget.

Setting up Youtube <> Discord Push Messaging System

In this step, we’ll be connecting to YouTube using APIs. Appsmith provides an easy-to-use IDE-based environment to connect to APIs and configure them. Now follow the below steps to fetch all the Youtube video links and their information.

  • Click on the + icon next to the data sources section and choose the Create New under the APIs section.
  • Paste the following URL:
https://www.googleapis.com/youtube/v3/search?key=APIKEYHERE&channelId=UCMYwzPG2txS8nR5ZbNY6T5g&part=snippet,id&order=date&maxResults=20
  • This API will allow you to fetch all the videos from a particular channel using its ID. We’ll need to create an API key from the Google Console account to put it in use.
  • Rename the API to getYTData by double-clicking on the existing one. 
  • Additionally, Appsmith automatically parses the URL and adds them into the parameters tab, where you can update the ID and the API key. Following is the screenshot of how it looks like: 
  • Here, we can configure all the settings for this API. Additionally, we can turn on pagination settings if we’re working with massive sets of data.

We now have all the videos on Appsmith Youtube Channel (Appsmith YT ID: UCMYwzPG2txS8nR5ZbNY6T5g). Now, let’s use this query to render all the information on the application by following the below steps:

  • Click on the + icon next to the Widgets section, here we’ll find the list of all the widgets that we can use for building the application.
  • Now find the Tabs widget, drag, and drop it onto the Canvas.

> The tabs widget allows us to create different navigation tabs. We’re using this as it’s more suitable for adding navigation between social platforms.

  • Next, open the property pane of the tabs widget by clicking on the cog icon on the top-right corner of the device. This is where we can configure the entire widget.
  • Here, under Tabs property, we’ve added found different tabs to navigate between our social contents. Also, the `Default Tab` property is set to Youtube.

Listing all the Youtube Information to List Widget

We have our tabs ready. We’ll display all the videos from the Appsmith channel to the List Widget under the Youtube tab. Follow the below steps:

  • Drag and drop a new list widget inside the Youtube tab, adjust the width to half so that the other half can be used to write the messages to push them on Discord. 
  • Open the List widget property pane and set the List Items property to:
{{getYTData.data.items}}
  • Initially, we see the list widget already populated with pokemon data. To make changes to them, we just need to edit the first item, and the others automatically get populated. 
  • Delete all the widgets on the first item on the list widget, and add one image widget and three text widgets. Now set the following properties to these widgets:

Image Widget Value : {{currentItem.snippet.thumbnails.high.url}}

Text Widget 1 Value: {{currentItem.snippet.title}}

Text Widget 2 Value: {{moment(currentItem.snippet.publishedAt).format("LL")}}

Text Widget 3 Value:

https://www.youtube.com/watch?v={{currentItem.id.videoId}}

Here, we’re accessing the currentItem, which evaluates the element in the list values. On the first text widget, we’re displaying the Title of the Youtube Video; the second widget corresponds to the time it was published. On Appsmith, we can use moment to display the DateTime field in the necessary format. Cool right? Lastly, we display the YT video URL and add the id to the end of the URL.

Here's how the list widget looks like:

Excellent, next. Let’s learn how to push messages from Appsmith to Discord. Follow these steps:

  • Drag and drop the container widget next to the list widget. Add Input widget and a button widget. Additionally, we can also add some Text widgets to customize and style the UI of the application accordingly. 
  • Now set the default value of the Input widget to the following: 

Here, in the code snippet, we have a default message; this will help us push it directly to Discord. Also, we’re accessing the title and youtube video id from the list widget. Therefore whenever a new list item is clicked; the message automatically gets an update for you.

Let’s now use a Webhook to push these messages on a discord channel. For this, you’ll need a discord server and a dedicated channel.

Now follow these steps:

  • Navigate to the channel on Discord and click the cog icon next to it. 
  • Click on Integration and choose webhooks, and copy the given URL.
  • Click on the + icon next to data sources and click create new. Add the copied URL and set the request method to post. Now open the `Body` tab under the API configuration and paste the following:
{"content":"{{Input1.text}}"}
  • Here, we’re sending the contents from the Input widget to this particular request. Now, as soon the API is called, the data is to the Webhook, and the contents will be posted on this specific Discord channel.
  • Rename this API to pushYTVideo
  • Lastly, let’s go back to the page and configure the button onClick to call this API. Open the button widget property pane and set the onClick property to call a query, and choose pushYTVideo

Awesome! When you choose or select a video from the list widget, the message automatically updates from the default value and will be pushed to the discord channel. 

Setting up Twitter <> Push Messaging System

This part is almost similar to how we’ve listed all the videos from Youtube and drafted a custom message; the only thing that changes is the data source. Instead of YouTube, we’ll be using the Twitter API.

Now, let’s copy-paste all the widgets from the YouTube tab to the Twitter tab; for this, select the YouTube tab, hit CTRL/CMD + A, CTRL/CMD + C, open the Twitter tab, and hit CTRL/CMD + V. This will copy the list widget, the buttons, and the inputs.

Just like that, all our widgets will be copied to the tab. Now, let’s add the functionality to fetch all the tweets and push them to the Discord channel by following the below steps:

  • Click on the + icon next to Datasources and hit Create New, rename the API to getTwitterData, and add the following URL:
https://api.twitter.com/2/users//tweets
  • We’ll need to add the Authorisation key to the API. For this, we’ll need to have a developer account on Twitter and create the API keys. 
  • We can configure this under the API settings.

Following is the screenshot:

Now let’s update the widget properties. 

To show all the tweets on a list widget, open the property pane and set the Items value to {{getTwitterData.data.data}}. Next, add two text widgets to the list widget and set the Text Value to the following:

Text Widget One: Tweet ID {{currentItem.id}}

Text Widget Two: {{currentItem.text}}

On the right, in the Discord Push Message Input placeholder to following:

Checkout our latest tweet here: https://twitter.com/theappsmith/status/{{List1Copy1.selectedItem.id}}

This is how the application looks like now:

With this, we should be able to schedule/push our social posts from Appsmith to Discord. In case if you’re using other services like Webflow, you can utilize APIs to fetch objects from CMS and use the same template. Building this app from scratch, including writing snippets of code, is likely to take 30 minutes! Isn’t that fast?

If you liked this tutorial, and are planning to build this, let me know. I’d love to help you make it as complex as you’d like.

Write to me at vihar@appsmith.com.

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. 

Appsmith Roundup: Powerful Widget Grouping Options, Undo-Redo, and New Widgets
6
October
2021
Monthly Round-up

Appsmith Roundup: Powerful Widget Grouping Options, Undo-Redo, and New Widgets

Appsmith Roundup: Powerful Widget Grouping Options, Undo-Redo, and New Widgets
Vihar Kurama
0
 minutes ↗
#
community
#
engineering
#
open-source
#
applications
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.

Powerful Widget Options

From grouping widgets to copy-pasting them to undoing or redoing them on the canvas, we’ve got everything covered for you to customize your applications on Appsmith. This makes your app-building experience much more accessible, smoother, and of course, fun!

To use the widget grouping feature, you have to select all required widgets on the canvas with your pointer. This will create a widget group highlighted in a rectangular dotted box; next, you can drag the rectangular box anywhere across the canvas to move them all in one go. Additionally, widget groups can also be duplicated and copied, or deleted. You can find all these options on the top-right corner of widget groups.

There’s no such thing as error-free creation; it’s common to make mistakes while building apps. Often,  we accidentally delete widgets while building the UI and have to redo everything. With the new undo-redo feature, you can make changes in the canvas using simple keyboard shortcuts. 

Undo - Command / Control + Z

Reo - Command / Control + Shift + Z

We also resolved some critical issues for copy-pasting widgets. Now, the widget won’t overlap, and all the functionalities such as deleting them, customizing them would be working as expected!

New Widgets and Customisation Options

We got four more new widgets last month! A stat box widget to display all the metrics on your dashboards, a checkbox widget to configure multiple checkbox inputs, a beautiful audio recorder widget to record audio on your applications, and finally, a tree select widget for selecting options in a nested tree-like structure. Cool right? Here are the quick previews of these new widgets.  

Additionally, we’ve upgraded all the widgets styling options to give developers more control over customization. Now, you can add background color, shadows, borders, border radius to almost all the widgets where there is a chance of customization. Of course, we’ve tried them. We have a new product designer who joined us recently who had built this beautiful dashboard on Appsmith.

Don’t forget to chat with us on our discord channel if you want to see more such internal tools and designs!

Configuring Page

We’ve added a new option to configure all your pages in the application in one place. Using this, you can rename, reorder, duplicate, and delete pages within few simple clicks. To access it, click on the application name and select the page option from the dropdown to configure pages under the application. Below is a screenshot that shows how easy it is to manage your application pages on Appsmith!

Introducing JS Snippets!

JavaScript is like fuel at Appsmith. We can use JS anywhere across the application, from binding data to writing functions to implement complex JS transformations using the moustache bindings. But not everyone is a JS expert; even we sometimes google to get stuff done. Hence to make it handier we’ve introduced a super cool feature, the JS Snippets. Some common use-cases can help you with fundamental transformations, functions, binding, and many more. 

Here’s how you can access this:

  1. Open the Quick search and navigation on the top menu bar.
  2. Select use snippets
  3. Search for Snippets

Before you use them, you can also test them out with your connected data. 


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.  

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
1
June
2021
Product

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
Rishabh Kaul
0
 minutes ↗
#
open-source
#
github
#
community
#
general-advice
Product

It’s been only about 9 months since Appsmith became a GitHub project. Since then we’ve amassed about 4500 stars, which is a simple way for GitHub users to bookmark repositories that interest them. We’ve been very curious to learn more about these people. Who are they? What are they like? Are there things we could do to accelerate awareness and interest?

I recently came across this incredible post from Spencer Kimball (CEO, CockroachDB) based on the code that he wrote many year back and thought of running it over our Stargazers to learn more.

Why did we do this?

As a project which took an open source turn, we’ve been building in public. Most of our team members are going out and answering questions on Discord, Github, Reddit, Hacker News and Twitter. A lot of what we achieve is going to be determined by the community that we build. We like to think of stars as bookmarks and while we’re thrilled at our star growth, we also know that it’s often just one of the many indicators we’d like to consider when learning about how we’re being known in the wider technology ecosystem. The ultimate joy is going to be to see people build and use our product and there’s no replacement for that and the team is burning the midnight oil to gather feedback, observe usage and be there to help in any way we can.

That being said, given that Spencer did most of the heavy lifting, we were curious to learn more about our Stargazers and see if there’s something we could pick up from this analysis.

How did we get here?

As a project that hasn’t particularly invested in paid marketing, a lot of our outreach has been primarily through engaging with our community and writing content.

Content also has a compounding effect: we can repurpose it, we can start a thread on a new discussion board or link it back to twitter. By going through our cumulative growth in stars over the last 9 months and checking if that overlapped in any major releases or news items gave us a sense of what might have contributed to it.

Content & Community Matters, with a little help from luck.png

In our case, our first major content post which drove traffic was when Arpit (our CTO) wrote about Appsmith (on Hashnode & Dev.to).

Trending on Github gave us an initial bump, however the credit for this goes to the early community that was nurtured which allowed us to trend in the first place.

A big part of our steady growth honestly was just via our team being extremely active on public forums. This Reddit post got us a lot of traffic. As did our showcase on Hacker News . We were also featured in The Hindu (a major newspaper in India). And then sometime in April, something interesting happened, we got a couple of mentions from the community in China and Korea and that led to a lot of users from these places, which in turn led us getting mentioned in RunaCap’s list of most popular Github Projects in Q1 of 2021, as well as constantly trending on niche categories of Github.

In the meantime, we’re continuously coming up with a lot of listicles around low code platforms like this , this or this . None of these by themselves are needle moving, but together they all add up and it helps that this category is gaining traction.

Needless to say, we intend to continue to invest heavily in content, from tutorials to showcasing how our community is using Appsmith to other learnings around building software and teams.

Where are our Stargazers coming from?

In total, our Stargazers are from over a 100 countries. This data however isn’t complete since getting the exact location from a Github profile often becomes tricky. Why? For starters, only 60% of our Stargazers mentioned a location. Within these, folks have mentioned multiple locations, misspelled names or mentioned places like Mars ;)

However, from an indicative perspective, these are the top 25 countries.

Users who star_ We are one world.png

For our team at Appsmith, at the very least, it means having a global outlook towards our community, as well as keeping a lookout on certain geographies, where we might see Appsmith suddenly gain traction.

What else are our Stargazers checking out?

Starring on Github is super easy and people can go trigger happy with it. Still, analyzing the other repositories our Stargazers star gives us a directional sense of their interests. Our Stargazers starred a total of 247K repos. Of these, 222K repos had < 5 stars, which sorta points towards a power law that we’ve come to expect from social networks.

Here are the top 20 repositories

Screenshot 2021-05-30 at 8.31.26 AM.png

Our users love dev tools which should come as no surprise. Some common themes that are noticeable here: Tools that make it easy to create UI, tools that help automate workflows and tools that help on the database side of things. And since Appsmith is highly relevant to users trying to accomplish each of these things, it makes sense that these end up becoming the most correlated repos.

How much do our Stargazers contribute to open source projects?

29.1% (1310) of our Stargazers have made atleast 1 commit to a repository. repository. In total, our Stargazers made about 379K commits, of which the top 10 contributed 127K commits (or 33.5%). Spencer was kind enough to include some base criterion in his code to make the numbers palatable: only repositories with > 25 stars or 10 forks, or 10 open issues were included. This puts the average number of commits at 289 with a median number of commits at 46.

The top 20 active Stargazers had these impressive stats

Screenshot 2021-06-01 at 5.57.41 AM.png

A Networked Platform

Do our Stargazers follow each other? If so, to what extent. To make the data meaningful, we decided to go with only those Stargazers that had atleast 10 followers. This gave us a dataset of 2214 (~49%) Stargazers. Plotting the distribution bases % of shared followers, we see that for 62% of our Stargazers, there was an overlap of atleast 40% of their followers with other Stargazers of the Appsmith repo. Talk about a networked platform! And since we get followers from many countries, we can be reasonably certain that such a networked effect isn’t restricted to one or two locations.

Distribution of Shared Followers with Appsmith's Stargazers.png

Attributes of our new Stargazers

One additional thing that Spencer included in his code was to look at the follower and commit activity of Appsmith’s incoming Stargazers. Honestly, we’re not quite sure of what to make of this data except that there’s a positive (albeit weak) correlation between average follower count and average commits on Github.

Average Followers & Commits for new Appsmith stargazers.png

Why not try it yourself?

Go ahead and use the Stargazers repo yourself to analyze yours (or anyone else’s) repo’s trends. Depending upon the number of Stargazers you have, it can take some time. It took us about 7-8 hours (with a 5K/Hr rate limit).

And incase you're fed up of spending months building internal tools, dashboards, admin panels and what not or are just curious about why these 4500+ folks starred Appsmith, do check it out here !

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

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.

Building Our Community while Building in Public: Learnings at Appsmith
6
July
2021
Product

Building Our Community while Building in Public: Learnings at Appsmith

Building Our Community while Building in Public: Learnings at Appsmith
Akshay Rangasai
0
 minutes ↗
#
community
#
open-source
#
marketing
#
leadership
Product

User engagement is a catch-all phrase the internet uses for well...engaging with your users. But like all such phrases, it doesn’t mean much without context, especially for an open-source company like ours that builds software for developers.

At Appsmith, we’re evolving from a small project with great support on Discord to a company that is investing heavily in engaging its users. In this post, I’ll walk you through our key learnings over time, with a little bit about what our users had to say at each step of the journey.

  1. Distinguishing great support from engagement
  2. Personalizing interactions with users
  3. Discovery as a core function of engagement initiatives
  4. Using the product to drive engagement
  5. Segmenting users
  6. Seeding content in the initial days
  7. Tracking progress and engagement

Great support is just the first step

We started a Discord channel to brainstorm ideas and learn from our users. Back in January, our Discord was (and still is) active 24x7. We were helping users across time zones all day. Users loved the speed of our support. Support work has remained extremely important for us and @mohanarpit, our co-founder, makes it a point to give shout outs for support work on our internal slack.

CleanShot 2021-07-06 at 17.38.42@2x.png
CleanShot 2021-07-06 at 17.38.57@2x.png

Being available all the time for support was helpful, but we were not generating relevant content. Very rarely were users spending time discussing the product with us. We needed to do more to communicate with users around what we were doing, and had to find ways to show them that we cared about their inputs. While speaking to our users, we also learnt that they engaged with us to request features, report bugs, and plan for the future so they could continue using us. Asking for support was just one of the ways in which they could get their jobs done. Support is what gets users started with the community, but it doesn’t make them stay and get involved.

That’s when we started our newsletter and other content initiatives. In addition to our docs, Appsmith now has a wide variety of videos, tutorials and templates to get users started. We immediately saw an impact and a lot of new users loved us for it, and our non-support channels started getting more active on Discord!

Make it personal and experiment with what works

Almost simultaneously with the content initiatives, we started something we used to call “office hours”. Users could join us on Thursdays and ask questions and receive live support. Our first month was decent, but over time, fewer people joined, and most questions coming up were about future features and timelines. So, on one hand, this felt like a failure because we didn’t get the volume of activity we expected, but on the other hand, our entire team loved interacting with the users. It felt personal and we got the best feedback through these sessions. Some of these sessions also helped users decide whether Appsmith was offering them what they wanted in the near future. There was definitely a great value in having such an initiative.

CleanShot 2021-07-06 at 17.42.21@2x.png

First community call where 3 users showed up

So we furthered the initiative with Community Hours. With Intercom and Discord for near-instant support, we used the Community Hours to speak about our product roadmap, talk about releases and lift the hood around some engineering choices we made.

CleanShot 2021-07-06 at 17.43.50@2x.png

All the features voted for by the community, that we’re building right now (watch)

We had a long list of feature requests and these events helped us prioritize our features to what the community wanted. We also started streaming live demos so our users could see our new features in action while we built complex applications.

This showed us that not every initiative is a success, but if there is value in an initiative, it is worth looking at how we could get the same interactions through a different format. We were so focused on support that it took us time to realize our users were with us in this for the long haul.

Now, we have launched Betasmith to interact with users even more closely. You can join Betasmith here!

CleanShot 2021-07-06 at 17.45.23@2x.png

Discovery is important

It’s easy to ship content, but it is really hard to make it discoverable for people. It is even easier to set up a website or Discord channel, but even harder to get them to work for you.

The trick is to have easy ways to engage with your users and this sometimes means using multiple channels in tandem. We frequently inform all our users about our Discord channel in case they need support. Our intercom chat pops up a couple of times for new users helping them with tips, tutorials and asking them if they need help. Our entire onboarding email is set up to get users to succeed with Appsmith and engage with us meaningfully.

To really drive home engagement, we included an omnibar really early in the lifecycle of the product so people could find what they were looking for easily. Our content efforts were first focused on existing users vs initiatives for real growth. We focused on the problems our users were trying to solve on Appsmith and focused on it than content that was more friendly to new users on SEO. Tying back to our first point, the only reason we believe our content initiatives are successful is that we made them easy to access.

omnibar.gif

Omnibar to the rescue

Use your product

We want to be there for our users, especially while they’re using the product. To make it as non-intrusive as possible, we use Intercom for gentle nudges to help them, hear from them and figure out how to help them succeed. From our analysis, it is surprisingly effective in getting people the help they need and setting them up for success on Appsmith.

At the same time, it is important not to overuse the product for engagement and let our users use the product the way they want. It is easy to get carried away and use the real estate near the banner, navbar and other empty spaces to push for engagement (This is something we argue over every day), but it is important to understand that users don’t use the product to engage with us. Engagement is a great side effect of a good product.

Not all users are the same

This seems obvious but is hard to put into practice. Not all users want the same features or the level of support or the roadmap. Segmenting users here helps to figure out which channel is more effective to engage with them.

Our users include startup founders (who are super active on Appsmith) as well as CTOs of large companies (who use our product once in a while and don’t personally engage on the platform). We need different strokes for different folks. For example, support requests work great on discord for founders and engineers, but might not be the most optimal channel for CTOs of larger companies.

Discord was great for instant support, but it was a nightmare for users during peak hours. Repeated questions, examples and JavaScript snippets were clogging the pipeline. Before we officially launched community.appsmith.com, users had already found the website and started asking questions. We quickly realised that our users were seeking a place where they could search for pre-existing queries or have their queries answered without the hassle of Discord. This also signalled a preference for more elaborate answers to questions about the direction of our project.

We’re still in the process of getting our forums to be as active as our community, and I think we will get there fairly soon, simply because of users’ preferences in where and how they want to engage with us.

CleanShot 2021-07-06 at 18.01.47@2x.png

Seed common spaces!

The one thing I believe we definitely did right from the beginning, was seeding our forums and Discord community with content. When our users saw that there was activity, they were happier to post, argue and discuss with us across a variety of channels.

But what really helped us do this easily was that we decided that as contributors to Appsmith, we were essentially the group that set the bar on community interactions and formed the core part of the community. We operated as members of the community first, and used Appsmith to create our own internal apps, and posted questions that came up naturally in that process.

CleanShot 2021-07-06 at 18.03.14@2x.png

From a user on our forums

Track your progress:

While this is not something you do directly for the community, as a project, it is very important to see where you and the community see returns in the efforts. At Appsmith, we use GitHub for issues, discourse forums, Reddit, Discord, email and intercom as channels to engage with users, and it is really complicated to see if our initiatives are working long term, without measuring retention and engagement for the community.

Luckily, we found orbit, a product-focused on community engagement that helps us figure out how users are interacting with various touchpoints in the community and the engagement of our users. We can now keep track of important metrics like messages on Discord and posts on discourse along with the number of returning members, and tie it with product metrics to improve user experience and engagement.

CleanShot 2021-07-06 at 18.03.55@2x.png

Orbit Dashboard for Appsmith

CleanShot 2021-07-06 at 18.04.48@2x.png

Tracking messages on Discord to measure the engagement

Some things to keep in mind:

While these ideas have worked for us at Appsmith, by no means will it work for everybody across the board. Also, one obvious engagement tool I haven’t touched upon in this article is email. Email is how most engagement starts, and there is tonnes of content about using email and making engagement effective online. The other problem with email, is there is a fine line between engagement and spam and thus we use email judiciously with a cap of one email a week and not more. We’re always thinking about how we can cut down the email we send our users and engage with them without spamming their inboxes.

But in the spirit of ticking all the boxes, you can check out our live demo on how we email users who are churning out. As we have scaled, we have also used Appsmith to build a ton of our internal engagement tools, to great effect.

This article provides an overview of the initiatives we’ve undertaken at appsmith to drive user engagement and build a community. We hope some of these initiatives will be useful for your context. Do let us know what you think!

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.

Appsmith Round-Up: Three New Widgets, Slash Commands, and Improved Navigation
18
August
2021
Monthly Round-up

Appsmith Round-Up: Three New Widgets, Slash Commands, and Improved Navigation

Appsmith Round-Up: Three New Widgets, Slash Commands, and Improved Navigation
Vihar Kurama
0
 minutes ↗
#
community
#
open-source
#
javascript
#
app-development
Monthly Round-up

One of the key beliefs here at Appsmith is to make our framework better each and every day. Our engineering and design teams are constantly aiming to expand possibilities for all users on Appsmith. Our speed of shipping is something we’re proud of, and we hope to keep this momentum going for the days to come.

July and early August were busy months at Appsmith as we shipped so many new features — especially widgets, and an improved navigation experience. In this round-up, we will take you through some of the significant changes and improvements that we brought in over the last 30 days!

🎨 New Widgets and Upgrades

One of the primary goals of our design and engineering is to ship new widgets as early as possible. Widgets help our users put together UI components quickly, and speed up the overall app-making process. Now, we’ve added three new widgets! The Rating, Divider and Menu widgets. Here’s what each widget does:

Rating-Widget: With this widget, users can perform a quick rating operation on anything! For example, in a support dashboard, you can use the Rating widget to rate conversations with your customers. Not just that, at Appsmith, we’re quite serious about this customization. This widget goes beyond appearances; extended features of this widget include colours, calling APIs, viewing alerts etc.

Drag and drop the widget onto the canvas, and use the property pane to assign actions.

Divider Widget: The divider widget on Appsmith can help visually separate or compartmentalize different parts of an application. This can be added anywhere around the canvas, either in a horizontal or vertical orientation. You can always customize the divider type and change accents based on the application's aesthetics.

Menu Widget: This widget was highly requested by the community. With this widget, users can create and customize menus on Appsmith. Additionally, users can also add different functions such as filtering data based on the selected item on the menu or navigating between any pages.

We also made some much-needed improvements to the existing widgets! Here are some of the notable changes:

  • The list widget is now faster, smoother, and bug-free. Users can now increase the height of list items, use modals, add multiple bindings, and do much more! Read the documentation to learn more.
  • The image widget now has a cool rotate property! To enable it, toggle the rotate property on the property pane. Wait! We’ve also added a new object-fit property that lets users align images to cover, contain or auto-fit! Cool right?

When using filters on the Table widget, users can now drag the filter pane with ease anywhere across the canvas. This helps users look at other widgets on the canvas easily.

We’ve seen many people adding data related to expenses, hence to make it easier we’ve added a currency data type on the input widget to help with money calculations. Users can also set the currency type and the decimal correction for more accuracy.

The table widget is a user favourite and with good reason. There are many things a Table widget does best. So, we are thinking up ways to improve its functionalities. Now, users only view a few headers on the table widget or remove them to show the data. They can export the entire table data into an excel file or CSV file with just one click. To make it more powerful, we’ve added a feature where users can select multiple rows on a table. To enable this, choose the multi-select property from the table widget property pane.

🛩️ New Navigation and Slash Commands

Last month, we spent a lot of time upgrading our user experience for creating and connecting data sources to applications. This was one of the crucial design decisions we've taken so far! With this new upgrade, users can now create and manage their data sources much faster. To learn more about our design and engineering approach, read the detailed blog post here.

Simply put, our overarching goal with this update was to get people to connect their data to the UI.

Widget ➡️ Datasources ➡️ Querying Data ➡️ Connecting Widget

With this flow in mind, we made several changes to the navigation experience.

Users can now:

  • Connect data sources faster
  • Find the right widget for available data
  • See relationships between UI and Data clearly

Slash Commands

We introduced another big feature. Appsmith now has slash commands. Slash Commands are a quicker and simpler way to bind widgets to a data source. Now users can trigger commands by typing "/," which can be utilized anywhere inside a dynamic binding.

New Context Menu

We focused on making the widget grouping experience much better. We know how valuable this feature is for our users, especially in terms of the overall experience of Appsmith. Users can now drag over particular widgets and group them together, a context menu will help in performing different actions like duplicating/copying/deleting within a single click.

⚒️ New Integrations

It’s now pretty well documented that Appsmith is all about integrations. We have included yet another database integration to Appsmith. 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. Now users can integrate with 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!

This integration feature was developed by mingfang, one of our users and top contributors on Github!


That’s all we have for this month’s round-up. 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.

Appsmith Roundup: Build CRUD Apps with one-click, Move Multiple Widgets, New Icon Widget and Omnibar
7
September
2021
Monthly Round-up

Appsmith Roundup: Build CRUD Apps with one-click, Move Multiple Widgets, New Icon Widget and Omnibar

Appsmith Roundup: Build CRUD Apps with one-click, Move Multiple Widgets, New Icon Widget and Omnibar
Vihar Kurama
0
 minutes ↗
#
open-source
#
community
#
app-development
#
javascript
#
ui
Monthly Round-up

We’re back again this month with updates from the last 30 days. Apart from adding support to self-hosted Appsmith instances, we’ve got some big features we shipped last month.

Here’s a low-down on what we were up to!

🖱️ Generate a CRUD app from any database with one click!

We know how important CRUD applications are for internal operations. Why should something so critical to an organization's success be difficult to make? We’ve 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? Now, it’s possible.

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. To learn more about this feature check out this blog here or watch a quick demo here.

Want to create your own CRUD app on Appsmith, here’s how you can do it:

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:

sdHNRHrKK.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!

🎉 New ICON Widget

Icons are a great way to create a better user experience! On Appsmith, buttons are widely used for performing different actions such as calling APIs, opening modals, showing alerts, and many more. Sometimes, it might be hard to find the right buttons; in such cases, our new icon widgets come in handy. You can use it to create a better user experience or perform actions similar to the button widget.

We ship this icon widget with a wide range of customization, and you can choose these from 300+ icons or connect with your own. Like other widgets on Appsmith, we've added buttons like button style, button variant, border radius, box-shadow, and shadow colour to help you create the perfect application!

Here's a sneak peek of some of the variants created using the icon widget.

Awesome right? What are you waiting for? Give it a try!

New Omnibar

When building huge internal applications on Appsmith, sometimes it’s hard to navigate to the right widget or data source queries, to overcome this, we’ve redesigned our entire Omnibar. With this, you can navigate to any widget, or data source query at any point of time with a single click, not just that, you can search for any query from our documentation directly from inside the application using Omnibar, all you’ll need to do is use the keyboard shortcut CMD + K or CTRL + K and enter your query!

💡 Moving multiple widgets using widget grouping!

So far, we’ve made quite good progress with our widget grouping feature. With this, developers are able to copy and delete multiple widgets at a time. Now, we’ve added the most requested feature! Yes, it’s moving multiple widget’s when widgets are grouped. Just, select the required widgets by dragging them over them and move across the canvas to multiple widgets at one time! Cool right? You can also use this to move widget’s into containers as well. Here’s the GIF showing the same:

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