17
December
2021
Tutorial

Build an Equipment Checkout App for the Admin Team at Your Company

0
 minutes

On average, a mid-sized company uses 75 apps to run its businesses! As teams grow and scale, internal apps, primarily administrative and departmental tools, help in sustaining growth. When manual processes get automated, it leaves more time for organizations to focus on their core growth-related work. Low code tools are an excellent way for businesses to solve their dilemma in allocating engineering resources. Low code platforms can help developers build custom internal applications at a fraction of the time traditional development takes. In this blog, we will build a web application using two low-code tools: Appsmith and Supabase. 

 Appsmith lets us drag-and-drop UI components into our application to develop the applications visually. It helps us connect the datasource to the UI components within a browser window. This speeds up the application building process. Supabase is a “Postgres database on the Cloud.” With Supabase, we only need to define table structure and SQL functions. Supabase takes care of generating REST APIs from the database schema. 

 As part of this tutorial, we will build an equipment management application. Creating such an application from scratch is laborious and time-consuming. We will use Appsmith and Supabase to rapidly iterate design and development and get feedback from our users early on. Both tools will significantly cut down development time, allowing us to deliver this solution in far less time.

 Let us first understand the application and its uses in more detail. 

The Use-case

 Consider a video production company. This company has an inventory containing video cameras, lenses, and tripods. Employees borrow the equipment for photoshoots and then bring it back after the photo shoot is completed. The company needs to keep track of the equipment. They also need to make sure that people are accountable for the equipment they take. The company would need to know which employee has the equipment and when it will get returned at any given time.

 Although we are using a video production company as an example in this blog, this scenario applies to other industries, for example, sports clubs that lend equipment to players and software companies that provide computers to their employees for remote work. An inventory system is needed for any organization where employees borrow the equipment to take it to a job site or work remotely. 

 We can implement this by using a simple spreadsheet or in paper form. But, spreadsheets or booklets are unmanageable once the equipment list or the number of employees grows. An equipment management system becomes a necessity.

 In this blog, we will learn the following:

  • Use Appsmith to build web pages and use Supabase as a data store.
  • Connect Supabase with Appsmith using REST APIs. This approach eliminates the need to use master database credentials in Appsmith.
  • Use Appsmith’s UI widgets to display data.
  • Build Forms in Appsmith.

You can see the finished application here.

We will switch back and forth between Supabase and Appsmith to complete this project. Keep Supabase and Appsmith open on different browser tabs to follow this tutorial. We have a lot to cover, so let’s get started! 

Appsmith and Supabase: Setting Up a Project

Get Started on Appsmith
  • Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  • In Appsmith, create a new application. You will see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources, Widgets, and JS Objects [This is a new feature, read more about it in this blog].
  • Visit Supabase.io and create an account in another browser tab if you don’t already have one.
  • Start a new project in Supabase and create a new organization name, project name, database password, and the region near your user’s location.

 

Define Database Table

The first step is to use Supabase to create database tables. Here are the steps needed to create tables.

  • Use the left-hand sidebar to visit Table Editor and create a table by clicking + New table. 
  • Create a Table ‘equipment’ and add varchar field’ name’ and varchar field ‘image’.
  • You can populate the database with sample data. Use ‘Import Data from SpreadSheet’ and this CSV file to follow this tutorial.

Create another table and name it the ‘employee’ table. This table contains three fields - id, name. 

Add another table and name it the ‘checkout’ table. This table stores checkout transactions; it contains which employee checked out which equipment.

 This table will have the following fields: 

- id, 

- created_at, 

- equipment_id, 

- employee_id, 

- due_by, 

- returned_on and notes. Fields’ equipment_id’ and ‘employee_id’ are foreign keys into table ‘equipment’ and ‘employee’, respectively.

 

We will be using this dataset

 

Connect Appsmith and Supabase

  • Go to the Appsmith window. [ See accompanied gif]
  • Click on Datasource, create a new datasource and find a new “Curl Import”.
  • Goto Supabase dashboard left sidebar, open menu ‘API’ and click on Table ‘Equipment’ and find corresponding Bash API and select a key as ‘anon key’.  
  • Copy this text into your clipboard.
  • And Paste the text into the Appsmith Curl text box.
  • Click ‘Import’.
  • Let us rename this API as ‘get_equipment’.
  • Save this as a DataSource - name it as ‘StoreRoom_DB’. From now on, we only need to modify the relative URL path (the part with /rest/v1/table_name?query_param) to read other tables, views and invoke functions. Now that is cool! 😎
  • Run the API get_equipment and see that we get a successful result.

 

Note: You can also use SQL from Supabase and write them as queries.

 

Appsmith: Display Table Containing Equipment
  • If you successfully followed the previous step, you will see that the API has successfully returned data. Now, we will display the equipment data in a table.
  • On the right-hand side menu under Pages, you will find the ‘Widgets’ option. 
  • Select a Table Widget and drag it to canvas.
  • Open its property pane by clicking on the cog icon on the top-right next to its name. Now to bind the data, use the moustache syntax {{ }} and enter the query name: {{ get_equipment.data }}. This will populate all the data from the query onto the table. The table widget has built-in search, pagination, and filters - without us coding a single line!
  • Column ‘image’ field is displayed as a text URL instead of an image. Update the column type for the image field to ‘image’. Now, you should see the image.
  • Now, let us add a Button for Checkout. Adding a column to the table widget.
  • Change the Column Type to ‘Button’ and change the label to ‘Checkout’.
  • We will code the checkout logic bit later.

 

 

Appsmith: Read Employee Table 

Follow these steps to read the employee table:

  • Duplicate the get_equipment API - and rename it to ‘get_employee’.
  • Change the relative endpoint to /rest/v1/employee?select=*
  • Run to make sure you can read all employees.

  

Appsmith: Build Equipment Checkout Form

We can now build the Checkout form. 

When the user clicks on the checkout button, we will open a modal containing a form. The form will allow users to select an employee and the date when equipment will be returned. 

Here is how we can do it!

  • Drag a Modal widget into the canvas.
  • Add a DatePicker to pick the date to return the equipment.

We want to set the default return date to a week from today’s date. We can calculate the default return date by adding 7 to today’s date. We can use external libraries such as moment.js inside our Appsmith application, which we will use in our application.

Replace default date with 

{{moment().add(7, 'd')}}

You can read about using external libraries in the Appsmith application here. Now, we need to Select an Employee who will check out the Equipment. For selecting an employee - drag a ‘select' Widget. 

Inside the options, we like to populate the list with employee names. We can derive the full name of an employee by concatenating last_name and first_name. 

{{get_employee.data.map(

(emp)=>{return {'label':emp.name, "value": emp.id }})}}

 

 

 

 

Appsmith Code Checkout Form Submit Button 

When user checks out, duplicate the get_equipment API - and rename it to ‘post_checkout’.

  • Change the relative endpoint to /rest/v1/checkout
  • And this code inside the body

{

"employee_id": {{SelectEmployee.selectedOptionValue}},

"equipment_id": {{TableEquipment.selectedRow.id}},

"due_by": {{DatePickerDueBy.selectedDate}}

}

This code essentially says: Construct a JSON with employee_id = Employee Id of the selected drop-down box, equipment_id = Current Row of Equipment Table, and Due_by = Value from the date picker. 

  • Connect this API when the user presses the ‘Confirm’ button.
  • Run to make sure you can successfully read the checkouts.

 

 

 

View Outstanding Equipment Checkouts

We must provide a way to view a list of outstanding equipment checkouts. Let us create a new page.  

First, let us build an API to read the checkout table. The process is similar to reading equipment or employee tables. 

The only twist is that our checkout table is normalized. That means we have chosen to store ids for equipment and employees' tables instead of duplicating the record. In our UI, we don’t want to show ids.

For people familiar with REST APIs, that means multiple REST API calls to retrieve complete information. To avoid multiple REST API, we would need to use GraphQL. However, we don’t have to use GraphQL.There are simpler alternatives available. 

Supabase’s REST API is based on PostgREST. PostgREST can detect foreign relationships and automatically returns embedded data. All we need to do is include the names of tables with fields. In our example, we like to retrieve all fields from the checkout table with corresponding records from employee and equipment tables.

Follow these steps to read the checkout data table:

  • Duplicate the get_equipment API - and rename it to ‘get_checkout’.
  • Change the relative endpoint to

/rest/v1/checkout?select=*,employee(*),equipment(*)

  • Run to make sure you can successfully read the checkouts. It would be best if you got nested JSON.

This will return values in JSON 

[

  {

   "employee": {

      "id": 1,

      "first_name": "Smita",

      "last_name": "Mehra",

        },

    "equipment": {

      "id": 1,

      "name": "Dell Laptop",

      "image": "url..."

    }

  }

]

  • Drag a Table widget onto the canvas.
  • Use ‘get_checkout’ as a data source for the table widget.
  • Because employee and equipment are nested fields, we need to adjust column values for ‘employee’ and ‘equipment’
  • Update the computed value for employee to {{_.get(currentRow.employee, 'name')}}
  • Update the computed value for equipment to {{_.get(currentRow.equipment, 'name')}}  

[See screenshot]

 

 

And you are done! We hope this was a great starting point for you to build the application. You can expand it further to include more features and make it as complex as you’d like. 

If you’re feeling stuck, feel free to reach out to me! Email me at meera.bavadekar@gmail.com. This article was written as part of the Appsmith Writers Program. If you wish to participate, send an email to writersprogram@appsmith.com expressing your interest. 


Meera Datey is a freelance web developer based in the San Francisco Bay Area. She specializes in helping small businesses design software solutions that deliver immediate value. This article was sent in as part of the Appsmith Writers Program.

Build an Equipment Checkout App for the Admin Team at Your Company

On average, a mid-sized company uses 75 apps to run its businesses! As teams grow and scale, internal apps, primarily administrative and departmental tools, help in sustaining growth. When manual processes get automated, it leaves more time for organizations to focus on their core growth-related work. Low code tools are an excellent way for businesses to solve their dilemma in allocating engineering resources. Low code platforms can help developers build custom internal applications at a fraction of the time traditional development takes. In this blog, we will build a web application using two low-code tools: Appsmith and Supabase. 

 Appsmith lets us drag-and-drop UI components into our application to develop the applications visually. It helps us connect the datasource to the UI components within a browser window. This speeds up the application building process. Supabase is a “Postgres database on the Cloud.” With Supabase, we only need to define table structure and SQL functions. Supabase takes care of generating REST APIs from the database schema. 

 As part of this tutorial, we will build an equipment management application. Creating such an application from scratch is laborious and time-consuming. We will use Appsmith and Supabase to rapidly iterate design and development and get feedback from our users early on. Both tools will significantly cut down development time, allowing us to deliver this solution in far less time.

 Let us first understand the application and its uses in more detail. 

The Use-case

 Consider a video production company. This company has an inventory containing video cameras, lenses, and tripods. Employees borrow the equipment for photoshoots and then bring it back after the photo shoot is completed. The company needs to keep track of the equipment. They also need to make sure that people are accountable for the equipment they take. The company would need to know which employee has the equipment and when it will get returned at any given time.

 Although we are using a video production company as an example in this blog, this scenario applies to other industries, for example, sports clubs that lend equipment to players and software companies that provide computers to their employees for remote work. An inventory system is needed for any organization where employees borrow the equipment to take it to a job site or work remotely. 

 We can implement this by using a simple spreadsheet or in paper form. But, spreadsheets or booklets are unmanageable once the equipment list or the number of employees grows. An equipment management system becomes a necessity.

 In this blog, we will learn the following:

  • Use Appsmith to build web pages and use Supabase as a data store.
  • Connect Supabase with Appsmith using REST APIs. This approach eliminates the need to use master database credentials in Appsmith.
  • Use Appsmith’s UI widgets to display data.
  • Build Forms in Appsmith.

You can see the finished application here.

We will switch back and forth between Supabase and Appsmith to complete this project. Keep Supabase and Appsmith open on different browser tabs to follow this tutorial. We have a lot to cover, so let’s get started! 

Appsmith and Supabase: Setting Up a Project

Get Started on Appsmith
  • Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  • In Appsmith, create a new application. You will see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources, Widgets, and JS Objects [This is a new feature, read more about it in this blog].
  • Visit Supabase.io and create an account in another browser tab if you don’t already have one.
  • Start a new project in Supabase and create a new organization name, project name, database password, and the region near your user’s location.

 

Define Database Table

The first step is to use Supabase to create database tables. Here are the steps needed to create tables.

  • Use the left-hand sidebar to visit Table Editor and create a table by clicking + New table. 
  • Create a Table ‘equipment’ and add varchar field’ name’ and varchar field ‘image’.
  • You can populate the database with sample data. Use ‘Import Data from SpreadSheet’ and this CSV file to follow this tutorial.

Create another table and name it the ‘employee’ table. This table contains three fields - id, name. 

Add another table and name it the ‘checkout’ table. This table stores checkout transactions; it contains which employee checked out which equipment.

 This table will have the following fields: 

- id, 

- created_at, 

- equipment_id, 

- employee_id, 

- due_by, 

- returned_on and notes. Fields’ equipment_id’ and ‘employee_id’ are foreign keys into table ‘equipment’ and ‘employee’, respectively.

 

We will be using this dataset

 

Connect Appsmith and Supabase

  • Go to the Appsmith window. [ See accompanied gif]
  • Click on Datasource, create a new datasource and find a new “Curl Import”.
  • Goto Supabase dashboard left sidebar, open menu ‘API’ and click on Table ‘Equipment’ and find corresponding Bash API and select a key as ‘anon key’.  
  • Copy this text into your clipboard.
  • And Paste the text into the Appsmith Curl text box.
  • Click ‘Import’.
  • Let us rename this API as ‘get_equipment’.
  • Save this as a DataSource - name it as ‘StoreRoom_DB’. From now on, we only need to modify the relative URL path (the part with /rest/v1/table_name?query_param) to read other tables, views and invoke functions. Now that is cool! 😎
  • Run the API get_equipment and see that we get a successful result.

 

Note: You can also use SQL from Supabase and write them as queries.

 

Appsmith: Display Table Containing Equipment
  • If you successfully followed the previous step, you will see that the API has successfully returned data. Now, we will display the equipment data in a table.
  • On the right-hand side menu under Pages, you will find the ‘Widgets’ option. 
  • Select a Table Widget and drag it to canvas.
  • Open its property pane by clicking on the cog icon on the top-right next to its name. Now to bind the data, use the moustache syntax {{ }} and enter the query name: {{ get_equipment.data }}. This will populate all the data from the query onto the table. The table widget has built-in search, pagination, and filters - without us coding a single line!
  • Column ‘image’ field is displayed as a text URL instead of an image. Update the column type for the image field to ‘image’. Now, you should see the image.
  • Now, let us add a Button for Checkout. Adding a column to the table widget.
  • Change the Column Type to ‘Button’ and change the label to ‘Checkout’.
  • We will code the checkout logic bit later.

 

 

Appsmith: Read Employee Table 

Follow these steps to read the employee table:

  • Duplicate the get_equipment API - and rename it to ‘get_employee’.
  • Change the relative endpoint to /rest/v1/employee?select=*
  • Run to make sure you can read all employees.

  

Appsmith: Build Equipment Checkout Form

We can now build the Checkout form. 

When the user clicks on the checkout button, we will open a modal containing a form. The form will allow users to select an employee and the date when equipment will be returned. 

Here is how we can do it!

  • Drag a Modal widget into the canvas.
  • Add a DatePicker to pick the date to return the equipment.

We want to set the default return date to a week from today’s date. We can calculate the default return date by adding 7 to today’s date. We can use external libraries such as moment.js inside our Appsmith application, which we will use in our application.

Replace default date with 

{{moment().add(7, 'd')}}

You can read about using external libraries in the Appsmith application here. Now, we need to Select an Employee who will check out the Equipment. For selecting an employee - drag a ‘select' Widget. 

Inside the options, we like to populate the list with employee names. We can derive the full name of an employee by concatenating last_name and first_name. 

{{get_employee.data.map(

(emp)=>{return {'label':emp.name, "value": emp.id }})}}

 

 

 

 

Appsmith Code Checkout Form Submit Button 

When user checks out, duplicate the get_equipment API - and rename it to ‘post_checkout’.

  • Change the relative endpoint to /rest/v1/checkout
  • And this code inside the body

{

"employee_id": {{SelectEmployee.selectedOptionValue}},

"equipment_id": {{TableEquipment.selectedRow.id}},

"due_by": {{DatePickerDueBy.selectedDate}}

}

This code essentially says: Construct a JSON with employee_id = Employee Id of the selected drop-down box, equipment_id = Current Row of Equipment Table, and Due_by = Value from the date picker. 

  • Connect this API when the user presses the ‘Confirm’ button.
  • Run to make sure you can successfully read the checkouts.

 

 

 

View Outstanding Equipment Checkouts

We must provide a way to view a list of outstanding equipment checkouts. Let us create a new page.  

First, let us build an API to read the checkout table. The process is similar to reading equipment or employee tables. 

The only twist is that our checkout table is normalized. That means we have chosen to store ids for equipment and employees' tables instead of duplicating the record. In our UI, we don’t want to show ids.

For people familiar with REST APIs, that means multiple REST API calls to retrieve complete information. To avoid multiple REST API, we would need to use GraphQL. However, we don’t have to use GraphQL.There are simpler alternatives available. 

Supabase’s REST API is based on PostgREST. PostgREST can detect foreign relationships and automatically returns embedded data. All we need to do is include the names of tables with fields. In our example, we like to retrieve all fields from the checkout table with corresponding records from employee and equipment tables.

Follow these steps to read the checkout data table:

  • Duplicate the get_equipment API - and rename it to ‘get_checkout’.
  • Change the relative endpoint to

/rest/v1/checkout?select=*,employee(*),equipment(*)

  • Run to make sure you can successfully read the checkouts. It would be best if you got nested JSON.

This will return values in JSON 

[

  {

   "employee": {

      "id": 1,

      "first_name": "Smita",

      "last_name": "Mehra",

        },

    "equipment": {

      "id": 1,

      "name": "Dell Laptop",

      "image": "url..."

    }

  }

]

  • Drag a Table widget onto the canvas.
  • Use ‘get_checkout’ as a data source for the table widget.
  • Because employee and equipment are nested fields, we need to adjust column values for ‘employee’ and ‘equipment’
  • Update the computed value for employee to {{_.get(currentRow.employee, 'name')}}
  • Update the computed value for equipment to {{_.get(currentRow.equipment, 'name')}}  

[See screenshot]

 

 

And you are done! We hope this was a great starting point for you to build the application. You can expand it further to include more features and make it as complex as you’d like. 

If you’re feeling stuck, feel free to reach out to me! Email me at meera.bavadekar@gmail.com. This article was written as part of the Appsmith Writers Program. If you wish to participate, send an email to writersprogram@appsmith.com expressing your interest. 


Meera Datey is a freelance web developer based in the San Francisco Bay Area. She specializes in helping small businesses design software solutions that deliver immediate value. This article was sent in as part of the Appsmith Writers Program.

Square
Try Appsmith
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 APITemplte.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.

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

The rich text element allows you to create and format

sadadasdasdas dsada sadas asd ad

Static and dynamic content editing

  1. vdfgdgd
  2. 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.

swzdswxzdsw