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:
Open the Quick search and navigation on the top menu bar.
Select use snippets
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.
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:
Open the Quick search and navigation on the top menu bar.
Select use snippets
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 July, we squashed 102 of the peskiest bugs and shipped 34 top requested features over and above under-the-hood performance and usability improvements. There’s a new table widget that’s so much more powerful, an Airtable integration, and cleaner Google Sheets queries with 178 commits in 22 days just for that enhancement alone! You can tell we have got our ears close to you. Keep it coming, guys. We love it all, and we are always listening.
#BigThings
The swanky new table widget
Fact: Just 25% of you tell us who you are and how you use Appsmith. We are okay with that. We respect your privacy. Assertion: Our usage numbers should be 4X more. Inference: When we say the Table widget, ever since we launched it, has been used a crazy 820,000 times by 6,840 users, we actually mean it's been used a lot more and is second only to the Button. Takeaway: Give it more love.
Introducing the new Table widget
Everything you asked for from the table and more is packed into this massive update. Here’s three that should make you sit up.
With inline editing, you can now forget about writing queries to edit data by cell, row, or column. You just get your data into the table and edit on the screen. We heavylift the queries, updating the database, and making sure it sticks–all behind the scenes. Clicksaver? Lifesaver? Timesaver? All three and more? We think so, too.
You know how you have always wanted to refer to custom column names more naturally than typing customColumn1, customColumn2, and so on in your queries? Yep. Done. No matter what the name of your column, reference away just as naturally as you name them.
Themes have been making apps pretty for a while, but Tables stayed rebelliously aloof from that prettiness. We have now made them fall in line with Themes, so if you want shades of blue and Roboto, you got it in Tables, too.
There’s a whole lot more that you are going to have to see for yourself.
Oh, okay. You are still here. Fine. We will show you.
Automatically pretty code is pretty cool, huh? More about it here.
#UpdateThings
“Hide Error Messages, Hide”
Infuriating little things, error messages, that bring up existential questions, right? And when they showed up all the time, they got us to, “Frustrating!”. They don’t anymore, only showing up when a widget is visible and clicked.
“How much to upgrade?”
Got your Appsmithing going, but a paid feature’s in your way? Fret not, self-hoster. We got your back with a command-line feature that estimates your usage in thirty seconds. Click this and all shall be revealed.
Run any Appsmith branch locally
With something like ./scripts/local_testing.sh chore/local-testing, running any branch as a FAT container is a breeze. Make sure Docker’s installed and running, port 80 is open, and you add arguments if you don’t want to run the release branch.
Errors, alerts, and logs
Two new modules, logger.js and mailer.js now store backup errors and alert you to them—helpful to get you on top of the error and aid find-and-fix.
While logger.js is on by default, mailer.js needs appsmithctl backup --error-mail to get humming.
Just two of the many, many ways we got your back(up).
Moving Google Sheets to UQI
Google Sheets is a popular data source. We didn’t dig up numbers, but you can take out word for it. UQI stands for Unified Query Interface and affords standardization for queries. Made sense to get queries to Sheets working better and looking neater, too.
#AsAlwaysThings
If wishes were fishes, round-ups would be essays. Wishes aren’t fishes. So, head over to v1.7.9 if you closed our Release Notes in-app pop-up one of four different ways—yeah, we are fixing it—and see What Happened In July Appsmith style.
Airtable is a popular choice for developers who want to manage tabular data easily. While it's easy to use Airtable as a backend, it can be challenging to build a custom UI from scratch. This is where Appsmith comes in. With Appsmith's native Airtable integration, you can create dashboards, CRUD apps, and internal tools in minutes.
In this tutorial, we'll use an Airtable base to build an issue tracker. We'll start by creating a database in Airtable and then importing our data into Appsmith and building on top of it using JavaScript.
With this application, users can:
Connect to their Airtable base.
Add a new bug/issue
Update the existing issue
View the current bugs in the management tool.
Let's jump in!
Step 1: Getting started
Create a new Appsmith App
First, we need to create a new application in Appsmith so we can build it out.
In the 'Introduction' section of the documentation, copy the Base ID (highlighted in green in the picture below)
Select the "Bugs and issues Table" on the left pane. Copy the table name highlighted in green in the image below.
Step 2 : Set up UI for the App
Wireframe
Here is the wireframe for what we are trying to create.
Including the modal that is used to add new bugs.
Create your widgets
Using the wireframe as a guide, create the UI for the application using the drag and drop editor. Here is a suggested process.
Choose a preferred theme from the Theme properties option in the property pane on the right.
Add a container widget with a text widget for your app's header.
Three (or as many as you like) stats boxes on the canvas to display essential statistics at a glance.
A container with a text, icon button, and list widget for showing a list of all the issues.
A container with text, button, select and list widgets for showing details of the selected issues.
A modal with a text, icon button, and JSON form widgets for adding a new bug entry.
Step 3 : Binding data on widgets
Listing records on the List widget
The list of bugs/issues should look something like this. In order to populate the data, create a new query and bind the results to the text.
Create a new query from the left pane which uses the Airtable datasource you created in the first step. Rename the query to getBase and choose the Commands to be List records. We chose this command because we would like to list all the bugs and issues in our app. Enter the Base ID and Table Name you copied in the steps above.
Hit Run and you should see a JSON response generated which lists the records.
To bind this response to the list widget, we would first create a JSObject that maps the fields from the records. Create a new JSObject and paste in the following snippet.
In this JSObject, we get the response from the GetBase query, map the fields, and get the id for every row in the table.
Bind the list with this data using {{JSObject1.getAirTableFields()}}
For getting the bug name and the source, bind the text widgets within the list with {{currentItem.Name}} and {{currentItem.Bug_source}} respectively.
Getting details of the selected bug
When we click on an item from the list, we should populate the view container with details of the selected issue
In order to get details about the selected bug on the container placed on the right, we would just use the {{List.selectedItem.attribute}} for all the details you wish to display. For example, The bug title can be displayed using {{List1.selectedItem.Name}}, for Associated features write {{List1.selectedItem.Associated_features}}, For priority write {{List1.selectedItem.Priority}}. So on and so forth.
For a closed/open bug field, use the ternary format to display the status. {{List1.selectedItem.Closed == '1'? "Closed": "Open"}}
To bind the attachments for the selected bug, write {{List1.selectedItem['Attachments']}} to bind data on the list widget in the right container.
Just like binding the bug details, in the image widget enter {{currentItem.url}} in the property pane to display the image attached
Use {{currentItem.filename}} and {{currentItem.type}} to display the file name and type on the text widget.
Displaying statistics on the statsboxes
These statsboxes should help display important information at a glance from this database. As the number of issues grows, this will give us a quick understanding of the status.
In order to populate the statsboxes with statistics, we would create a JSObject function that maps to fields and then to Priority within the same JSON response and check if the value is High, meaning the priority is set to high. What we get in the response is our desired statistic.
To insert a new record, we’ll write a new query. Create a new query and name it as InsertQuery. Choose the command to be Create Records. Add in your Base ID and Table Name. For the Records, bind the form data from the JSON form for every field.
Now bind this function on onClick of the Add Bug button in the JSON Form.
Update fields of a bug
This query/button can help update the details of the bug. In this case, we update the priority and statuses.
To update the priority and status of a selected bug, an Update Records query would be used.
Create a new query and rename it as updateQuery. Choose the command to be Update Records and enter your BaseID and Table Name. In the records field, paste the following to get the selectedOptionValue of the select widgets
First, you created a new Appsmith application and connected it to Airtable. Then you created the UI for your app using the drag and drop tools in Appsmith. Finally, you tied the data from Airtable to the UI widgets. Your final app should look similar to this:
Please use this form to contact us if you have any template requests for internal tools that you need, and we will get to work!
If you have any questions, contact us on Discord. You can also keep up with us on Twitter and YouTube.
Today, our integration with Airtable comes out of beta and is available for everyone 🎉! You can now build custom UIs and interact with applications built on Airtable, with minimal configuration.
While it is possible to use the default API interface to connect to Airtable, we wanted to make it easier for you to directly connect your Airtable account and create applications faster than ever. This new data connector introduces a number of features:
Integration located in the “Datasources” section
Connect to your Airtable account with either an API Key or a Bearer Token (OAuth 2.0)
Create queries to fetch, create, retrieve, update and delete data from a datasource using the Appsmith query editor.
List command lets you display all the data from Airtable, and can also present data that has been filtered and sorted based on fields, records, time zones, etc.
For details and information on how to use this new integration (with videos!), check out our Airtable documentation here. See it in action on our full tutorial here, where we build an issue tracker with Airtable as backend. As always, let us know what you think!
What’s a Rich Text element?
asdsadasdsa
asdsadasdsa
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
sfdfsdfds
dsfdsfdsf
adfkaldf
dfghhghff
dfgdfgfd
The rich text element allows you to create and format
sadadasdasdas dsada sadas asd ad
Static and dynamic content editing
dcdsdfd
dfdfvddf
vdfgdgd
gjgjg
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.