June Round-up: Fuzzy Search, Backup and Restore, More Product Updates
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
 minutes ↗
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 JSON Forms in Appsmith

Introducing JSON Forms in Appsmith

Introducing JSON Forms in Appsmith
Somangshu Goswami
 minutes ↗

Forms are a core part of most internal tools since its one of the major ways in which data is created or updated. Today, we're introducing the JSON Form Widget (documentation), which allows for a fantastic form creation experience and has been one of our top requested features.

The JSON form widget is helpful for quickly generating (dynamic or otherwise) forms from JSON fields.

Here are some highlights of this widget:

Generate Forms from Database Queries, APIs, or JS Objects

Once you drag a new JSON form widget, you will see a default form rendered with some details. You can update the source data field to infer data and then generate the form. This can be bound to any query or variable containing JSON data, such as DB queries, APIs, or JS Objects. The JSON Form widget can be bound to any other widget in Appsmith as well.

Auto Generate Form When Your Data Changes

The form fields are generated according to the source data when you enable an auto-generated form. Fields are generated according to the key-value pairs in the source data. Whenever there is a change in the source data, the form fields get updated automatically.

Configure Fields As You See Fit

Field configuration shows all the fields generated automatically in the forms. You can edit the fields to tweak properties like the field type and default value and bind specific actions by using editable properties. Most fields use the underlying data type-specific widget's properties to allow a full level of customization just like the widget would. For example, if the input type is text input, the editable properties are similar to the input widget in Appsmith.

  • Array Fields allows you to add, remove, and update a group of fields together.
  • Object Fields allow you to group fields together.
  • Add New Field, disable invalid forms (and control them further with JS), and control a widget's visibility on the app page to create highly customized dynamic forms.

Some of the ways that we've seen our users use the JSON form are:

  • Customer service executives select a form template and customize it for a customer. This is stored in a database and then sent over to the customer.
  • Users can create dynamic sign-up forms, as having both the Sign-in and Sign-up forms on the same page. Conditional switching between forms is effortless because you don't need to create two forms; you only need to change the JSON data.
  • Marketing teams are using the JSON form to create personalised form-based campaigns and much more!
Note: It’s live on the cloud app and will be live on the self-hosted version very soon.

Want to explore the JSON Form in detail? Head over to the JSON Form documentation page to learn more.

December Round-up: Docked Property Pane, Switch Group, Document Viewer Widgets, Admin Page Settings!
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
 minutes ↗
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:


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.

Use Color and Gradient Styles in the Table Widget to Improve App UI

Use Color and Gradient Styles in the Table Widget to Improve App UI

Use Color and Gradient Styles in the Table Widget to Improve App UI
Uma Chukwudinma Victor
 minutes ↗

Statistical data and database information is often represented using table models. These models might represent large amounts of data sets; hence there is a need for customization between table sets to help distinguish them. Finding a suitable application to help develop tables that meet these requirements is often an uphill task. Appsmith is an open-source framework that enables developers to build internal tools for applications and add functionality quickly. With Appsmith, we can also create tables, link them up to an API or database and perform CRUD operations.

In this blog, we will learn how to style tables in Appsmith. We will also learn how to customize different aspects of our table to change the appearance and how the table data is displayed. We will apply different styles to other tables to help distinguish them.

Why Do We Need To Style Tables?

In situations where we are building numerous tables on Appsmith, we will need to add labels to each table to differentiate between them. Alternatively, we can also apply different styles to each table ranging from color gradients, cell colors, borders, and box shadows. Styling helps to improve the overall appearance of tables. When styles are used to identify specifically stored data, it makes it easier for viewers to pinpoint what they need to see in a table. For example, a table may have a specific cell color for table columns reflecting profit or loss in an account, making it easier to understand. 

How Styling Works in Appsmith

Appsmith tables provide an ordered form of representing data from a data source in rows and columns. This table can also be used to view large amounts of data, and the data can be arranged in the form of server-side pagination in which the amount of data displayed is limited per page. 

Here are a few examples of some tables built with Appsmith:

Appsmith provides us with a property pane. The Appsmith property pane contains all the properties where users can connect to data and customize it with different properties. Numerous styles which can be applied to produce various results with the widgets can also be found in the property pane. Select the widget you wish to style and click on the cog-wheel icon at the top right to get to this style pane. The Style section is located at the bottom of the menu that pops up.

This panel may vary based on which widget is selected. The image above is the Style panel of the Table widget. Starting from the top,  we have the following options: 

- Cell Background, 

- Text Color, 

- Font Style, 

- Text Align and 

- Vertical Alignment.

We will go over these options in the course of this tutorial and discuss the effects of each of them.

In these style options, there is a JavaScript toggle button. Clicking on the JS toggle button changes the mode of input for the options and lets us enter strings of characters or JavaScript for the property we wish to apply. For instance, we can set visibility to none by toggling the JS toggle for the visible property and entering “false” in the field or entering {{false}}. The latter is Javascript enclosed in mustache syntax. We will talk more about what mustache syntax is and its usage later in this tutorial. 

Styling Tables: A Manual 

Below, I have a table widget with some data in it. If you select your table, you will get a popup with a gear icon you can use to edit your table.

Clicking on the gear icons opens up a property pane to edit the table. If you scroll down the menu, you will see a section to add styles to the table.

Cell Background and Text Color

In this section, we will learn about the different styles provided by Appsmith and how they can be applied to produce different results with tables. The first two options in the Styles section allow us to change the color of our table’s background and our text color.

Above, I have selected a black color for my cell’s background, and I’ve also set my text color to white. Alternatively, you can use a different color other than the ones provided here by entering the Hex code for the color in the property field. An example is a purple color with the Hex code: #ed18cd. If you are looking for a site where you can pick colors from a palette and get the Hex code, you can check out Coolors or get the extension for your browser. 

Changing Font Size

The next option gives us the ability to change the font size of the text in our table. There are different options to choose from, with “Heading 1” being the largest font size and “Paragraph 2” being the smallest font size. 

Here, I have increased the font size for my table by setting my “Text size” property to Heading 1.  

Font Style, Text Align and Vertical Alignment

We can customize the font style and justify our text horizontally and vertically with the remaining three options.

Note that it is possible to add both “bold” and “italics” font styles simultaneously. The text-align property provides you with options to position your text either at the left, center, or right of your cell. In other words, it lets us set our text on the horizontal axis. 

Vertical Alignment is used to make adjustments to the vertical position of our text in the table. The first option positions text at the top of their cell, the second positions the text at the center, and the last positions the text at the bottom of the cell.

Also, rather than applying these styles to the entire table, it is possible to target only a particular cell to apply these styles.

Adding Styles Based on Fulfillment of a Condition

Appsmith has a feature to create styles for certain table elements that meet a particular criterion. We can define this criterion using JavaScript and state what styles should be applied. To do this, open the property pane on the column you wish to apply this condition.

Above, I have selected the phone column. We will add a condition to set the text color for this column. We will check if the value of each row in the phone column is even or odd and assign it a particular color. We can add JavaScript to the property pane elements using mustache. This is primarily JavaScript code enclosed with two curly-braces {{ }}. We can add JavaScript data or even functions to our table with this syntax.

{{currentRow.phone %2 == 0? "red" : "blue"}}

Some examples of writing JavaScript functions can be found in Appsmith Documentation.

The command mentioned earlier checks if the row is even; if it is, it will be red; otherwise, it will be blue. We can add this to the Text Color option in your column. Enable the JS toggle to write Javascript in the field and add the snippet above.

Here, the fields divisible by two in the phone columns have a text color of red, and the others have a text color of blue. This way, you can apply different styles to your table if specific criteria are met.

Adding Gradient as Cell Background Color

Appsmith allows us to add gradients as background color as we would normally add in a CSS Stylesheet. 

Here is an example of a CSS gradient:

linear-gradient(90deg, hsla(217, 100%, 50%, 1) 0%, hsla(186, 100%, 69%, 1) 100%)

We can add this in our background property. The resulting color change will take place in the table widget.

I hope you found this article helpful and now have a better understanding of the Table Widget on Appsmith.

If you have any questions, please don’t hesitate to write to me at umavictor11@gmail.com. I will be happy to help you understand it better. 

Uma is a software developer based in Nigeria who is familiar with various web technologies and frameworks. He is also keen on finding ways to explain things in simple ways. This article was written as part of the Appsmith Writers Program.

Upload and Manage Files on Cloudinary with the Filepicker Widget

Upload and Manage Files on Cloudinary with the Filepicker Widget

Upload and Manage Files on Cloudinary with the Filepicker Widget
Olubisi Idris Ayinde
 minutes ↗

Many internal tools, especially administrative applications, often require file uploading and file management features. File pickers, and file selectors, therefore, are some of the most used components in internal tool development. Developers experience numerous challenges when it comes to implementing these features resulting in delayed operations. This can easily be mitigated by using Appsmith to build and deploy applications quickly. Appsmith has a dedicated filepicker widget that can be used to upload files to any of the developers' preferred cloud storage services, such as Cloudinary, S3, among others. 

In this short blog, we’re going to focus on one such widget, the filepicker. With this, you can upload files from your local machines to any cloud storage via API. You can upload files by implementing a POST API and reference the base64 or binary version in the post body.

Features of the Filepicker Widget

1. The Allowed File Types properties allow us to restrict the types of files that a user (of our application) can upload.

2. The Maximum File Size attribute allows us to specify the total file size that a user can upload.

3. When the user selects files to be uploaded, we can immediately use an API or utilize the S3 plugin to upload the file's base64 to our cloud storage.

4. The visibility property controls the widget's visibility on the page. When the widget is switched off, the widget will not be displayed when the app is published. 

5. There is a parameter that allows us to specify the maximum number of files that a user is allowed to upload.

How Does the Filepicker Widget Work?

In this section, we'll look at how the filepicker works. 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.

Now, we’re all set to explore how the filepicker widget works in Appsmith.

Drag and drop the filepicker widget (as shown in the image below). 

Now that we have our filepicker widget on the canvas, we can customize the properties as desired. 

After selecting our file(s), we get the following result:

How to manage files on Cloudinary using Appsmith

Filepicker configuration

We'll go over each of the configurations accessible in the Appsmith filepicker one by one.

Label: This is used to set the label of the Filepicker from the default “Select Files” to any label of our choice.

Maximum No. of files: This allows us to specify the maximum number of files that a user is authorized to upload. 

Maximum File Size: This property allows us to specify the maximum file size that a user can upload.

Data Type: This determines the data format of the files uploaded. 

Allowed File Types: Allows us to restrict the types of files that a user can upload. 

Accepts an array of wildcardsimage/*, exact mime types image/jpeg, or file extensions .jpg:['image/*', '.jpg', '.jpeg', '.png', '.gif']

Required: When turned on, it marks user input as a required field and disables form submission until the input is made.

Visible: Controls widget's visibility on the page. When turned off, the widget will not be visible when the app is published.

See the documentation to learn more.

Uploading single and multiple images to cloud storage via Filepicker using a Cloudinary API

Let's now explore how to upload single or multiple files using filepicker to cloud storage using the Cloudinary API.

Setting up a data source

We'll need to connect to our data source by clicking on the Plus icon next to the data sources link in the sidebar, then selecting "Create New" from the menu, as shown below:

After this, we should now choose the "Create New API" option. This will take us to the screen shown below:

We renamed the datasource from the default "Api1" to "Cloudinary API" in the image above to have a clear description. 

We will be making use of the Cloudinary API: `https://api.cloudinary.com/v1_1/{cloud_name}/image/upload` where {cloud_name} is our cloudinary username.

The API requires our Cloudinary cloud_name and upload_preset.

To get our cloud_name and upload_preset, we follow the steps listed in the following sections. 

The cloud name is obtained from our Cloudinary dashboard, as shown below.

An upload preset can be found in the “Upload” tab of our Cloudinary settings page, which we access by clicking on the gear icon in the top right corner of the dashboard page.

We then click on the Upload tab on the settings page:

We scroll down to the bottom of the page to the upload presets section, where we see our upload preset or the option to create one if we don't have any.

Adding the Cloudinary API URL and setting the header should look similar to what we have below:

Let's go to the "Body" tab and configure it, as shown below.

We specified the file(s) to be uploaded as well as our upload preset in the image above, and we configured our request body in a multipart structure.

Now that we've finished configuring the API, let's put it to the test before using it in our filepicker.

We will click on the FIlePicker Widget as shown below and select a file to be uploaded from our system.

Now let’s head over to the API section; the following is the test result:

Yay! That works! We’ve successfully tested our API and got a valid response.

Upload images using Filepicker

Let's upload a single image directly from our filepicker to cloud storage by connecting to the API Datasource we just created. We will head over to the filepicker configuration and update the "onFilesSelected" property.

As seen below, we can add a success alert to show when the image is successfully uploaded and when there is an issue after selecting our query to be conducted.

The response below shows a success alert after uploading our image to cloud storage utilizing the Cloudinary API directly from our filepicker widget.

We hope that you found this short guide helpful. If you want to know how to upload or download files from S3, you can look at this document and follow this discussion. To learn more about how to upload a file to a local server, take a look at this discussion on our community forum. 

Appsmith has more than 35 UI widgets, and these can cut your development time in half! To know more, head to our docs

Did you get stuck somewhere? We’re happy to help! Join us on Discord today! 

Olubisi Idris Ayinde is a software engineer, technical writer, and community builder. This article was written as part of the Appsmith Writers Program. If you’d like to write for Appsmith, send an email to writersprogram@appsmith.com expressing your interest.