7
June
,
2022
Resources

Building an Inventory Management Tool Using HarperDB

Building an Inventory Management Tool Using HarperDB
Dancia Jos
0
 minutes ↗

This guide explains how to quickly build an Inventory Management tool to manage movie rentals by connecting a HarperDB backend to an Appsmith frontend. It also implements authentication using HarperDB’s role-based access control feature.

HarperDB is a distributed database that supports key-value, document store, and traditional SQL. As a flexible platform for distributed applications and data, HarperDB is read/write optimized and globally replicates data in under 100ms.

You will need a HarperDB account, which can be created by signing in here.

Appsmith is an open-source framework for building internal tools. It lets you drag-and-drop UI components to build pages, connect to any API, database, or GraphQL source and write logic with JavaScript objects

If you don't have an Appsmith account, create one here.

Let’s get started!

Step 1: Set up your Backend on HarperDB

We’ll be using the HarperDB cloud instance free - tier. Click on Create New HarperDB Cloud Instance → Create AWS or Verizon Wavelength Instance

Screenshot_2022-04-27_at_12.41.21_PM.png

Select Choose HarperDB Cloud on AWS and then click on Instance Info

Screenshot_2022-04-27_at_12.41.10_PM.png

Fill in the details about your instance and click on Instance Details button

Screenshot_2022-04-27_at_12.42.16_PM.png

Keep the default settings in the Instance Specs modal and click on Confirm Instance Details

Screenshot_2022-04-27_at_12.43.30_PM.png

Click on the Add Instance button

Screenshot_2022-04-27_at_12.43.58_PM.png

This will begin creating your database cloud instance on HarperDB. Your instance will be up and running in no time.

Screenshot_2022-04-27_at_12.49.01_PM.png

Step 2: Create the Database (Schema)

  • Create a schema called Movies
  • Next, create tables for Customer, Film and Rentals with id as the hash attr. The hash attr in HarperDB is equivalent to a primary key.
Screenshot_2022-04-27_at_1.32.02_PM.png

Use the Upload CSV feature of HarperDB to populate data into the three tables. You can find sample data here.

Screenshot_2022-04-27_at_1.34.49_PM.png

Step 3: Create Roles and Users on HarperDB

Click on the roles tab and create two users named admin_user and rental_user under Standard Roles. admin_user will have all privileges on the three tables so update all the permissions to true

Screenshot_2022-04-27_at_1.50.31_PM.png

rental_user will have all permissions on the Rental table and only the read permission on the Customer and Film tables

Screenshot_2022-04-27_at_2.13.52_PM.png

Under the users tab, create a user named assistant with the role of rental_user.

Screenshot_2022-04-27_at_2.19.01_PM.png

Similarly, create a user named manager with the role of admin_user

And just like that, the backend setup is complete.

Step 4: Build UI on Appsmith

  • On Appsmith, on the Entity Explorer pane, go to PAGES→ Page1 . Rename the page to Login. Drag and drop a Form widget onto the canvas. Add input widgets for Username and Password as shown below. For the Password input widget, choose Password as the Data Type so that the characters entered are masked.
Screenshot_2022-04-28_at_1.45.30_PM.png
  • Create a second page called Rental Inventory which will be the page that the user will be redirected to after login.
  • Drag and drop a Tab widget onto the canvas and add three tabs called Rental, Film, and Customer
Screenshot_2022-04-28_at_2.51.48_PM.png
  • On the Rental tab, add a Table widget and a Form widget to its right which will populate the details of the selected rental record that can be updated. On the Update Rental form, Customer and Movie are Text widgets, Status is a Select Widget, and Returned is a Datepicker Widget.
Screenshot_2022-05-02_at_3.36.53_PM.png
  • Add a modal widget onto the canvas to create a form for adding new rentals. Customer (rentalCustEmail) and Film (filmTitle) are select widgets
Screenshot_2022-05-02_at_4.59.02_PM.png
  • Set this modal to open on the onClick event of the New button
Screenshot_2022-05-02_at_5.31.02_PM.png
  • Create the same layout for the Film Tab. The title is Text widget, Rental Duration, Rental Rate, and Replacement Cost are all Input widgets of Number Datatype.
Screenshot_2022-05-02_at_3.37.52_PM.png
  • Drop a Modal widget on the canvas and create a form to add new movies to the collection. Title and Description are Input widgets of Data Type property set to Text and and the remaining are input widgets of Data Type property set to Number. Set this modal to open on the onClick event of the New button on the Film tab
Screenshot_2022-05-02_at_5.30.35_PM.png
  • Lastly, add widgets to the Customer tab as follows. Search is an input widget (Use the search icon under Icon Options and add “Type to search” under Placeholder in the property pane) and customerList is a List widget with two input widgets for Name and Email.
Screenshot_2022-05-02_at_3.38.41_PM.png
  • Drop a Modal widget on the canvas and create a form to add new customers to the database. All are input widgets. Set this modal to open on the onClick event of the New button on the Customer tab
Screenshot_2022-05-02_at_5.35.14_PM.png

Step 5: Configure the Login page

  • The next step is to create a query to retrieve the JWT tokens when the correct credentials are entered in the login form.
  • On the Login page, click on the + icon next to Queries/JS. Select New Blank API
Screenshot_2022-04-28_at_2.04.24_PM.png
  • On the API pane, rename Api1 to get_token and select the POST method. For the URL endpoint, enter the url of the HarperDB instance. You can copy paste this from your instance card on the HarperDB dashboard.
Screenshot_2022-04-28_at_2.20.06_PM.png

Under Headers, ensure that the content-type is application/json

Screenshot_2022-04-28_at_2.21.01_PM.png
  • Under Body tab of the API pane, enter the following in Raw format. Notice here you are passing the username and password entered in the two input widgets on the form.

{
    "operation": "create_authentication_tokens",
    "username": "{{Input1.text}}",
    "password": "{{Input2.text}}"
}


You can enter the username and password on the Login form and then test run the query to view the response. This query returns two tokens - The operation_token which is used to authenticate all HarperDB operations in the Bearer Token Authorization Header and the refresh_token which is used to generate a new operation_token upon expiry.

Screenshot_2022-05-09_at_7.53.55_PM.png
  • Next, we are going to create a JavaScript function that will redirect the user to the main page (Rental Inventory) of the app based on credentials and their roles.
  • Click on the + icon next to Queries/JS. Select New JS Object. Rename JSObject1 to utils and paste the code snippet below in the JavaScript Editor.


export default {
    login: async () => {
        return get_token.run()
        .then(res => storeValue('user', {username: Input1.text, token: res.operation_token}))
        .then(() => navigateTo('App'))
        .catch(e => showAlert(e.message, 'error'))
    }
}


Note: storeValue is an Appsmith function that is used to store data in key-value pairs that can be accessed later anywhere in the application.

  • Bind the JS Object to the onClick event of the Submit button on the login form.
Screenshot_2022-04-28_at_2.44.06_PM.png

Step 6: Write queries and bind data to widgets

  • Create query to fetch data from Rental table in HarperDB and display it in the Table widget on Appsmith (rentalTable)
  • On the Rental Inventory page, click on the + icon next to Queries/JS. Select New Blank API
  • On the API pane, rename Api1 to get_rental and select the POST method. For the URL endpoint, enter the url of the HarperDB instance as shown in Step 5.
  • Under Headers, add the following key-value pairs. We have to pass the Bearer token generated on successful login under Authorization.
  • Under the Body tab of the API pane, enter the following in Raw format. This is an SQL query to fetch the data from the rental table and we are using server-side pagination to display data in the table widget (rentalTable), hence the limit and offset are set in the query.

{
    "operation": "sql",
    "sql": "SELECT * FROM movies.Rental LIMIT {{rentalTable.pageSize}} OFFSET {{(rentalTable.pageNo - 1) * rentalTable.pageSize}}"
}


  • Bind the data from this query under Table Data property of the rentalTable table using the following snippet


{{get_rental.data}}


  • You will notice the table widget populates with results from the query.
  • Next, we will bind data to the widgets on the Update form to the right of the table. When a user click on the table row, the corresponding details should be displayed on the form.
  • For the Rental Update form, set the widgets in the following manner. Notice that we are manually adding the values in the Status select widget so that the status of the rental can be updated on the form.
CleanShot 2022-06-07 at 13.21.52@2x.png
  • Create a query to update the Rental status and Returned date on this form.
  • On the Rental Inventory page, click on the + icon next to Queries/JS. Select New Blank API
  • On the API pane, rename Api1 to update_rental and select the POST method. Repeat the same steps as above for the URL endpoint and the Headers
  • In the Body tab of the API pane, enter the following under Raw tab

{
    "operation": "update",
    "schema": "movies",
    "table": "Rental",
    "records": [
        {
            "id": {{rentalTable.selectedRow.id}},
            "status": {{status.selectedOptionValue}},
                        "return_date": {{returnedDate.selectedDate}}
        }
    ]
}


  • Hook this query on the onClick event of the Submit button on the Update Rental form. On success of this query also run the get_rental query to repopulate the table widget with updated data.
Screenshot_2022-05-02_at_3.26.36_PM.png
  • Create API query named search_customer with headers same as before with the following code snippet under Body tab of the API pane in Raw format


  {
      "operation": "search_by_value",
      "schema": "movies",
      "table": "Customer",
      "search_attribute": "email",
          "limit": 10,
      "search_value": {{`*${rentalCustEmail.filterText}*`}},
      "get_attributes": [
          "id", "email"
      ]
  }


  • Create another API query named search_film with the following code snippet under Body tab of the API pane in Raw format.

  {
      "operation": "search_by_value",
      "schema": "movies",
      "table": "Film",
      "search_attribute": "title",
          "limit": 10,
      "search_value": {{`*${filmTitle.filterText}*`}},
      "get_attributes": [
          "id", "title"
      ]
  }


  • Create a third query name new_rental to add new rental information with the following code snippet under Body tab of the API pane in Raw format.

  {
      "operation": "upsert",
      "schema": "movies",
      "table": "Rental",
      "records": [
          {
                          "film_title": {{filmTitle.selectedOptionValue}},
                          "rental_date": {{moment().utc()}},
                          "staff_id": {{appsmith.store.user.username == 'assistant'? 2: 1}},
                          "customer_email": {{rentalCustEmail.selectedOptionValue}},
                          "status": "borrowed"
          }
      ]
  }


  • Open the modal by clicking the New button on the Rental tab. On Customer select widget write the following code snippet to populate the customer email ids from the search_customer query.
  •  {{search_customer.data.map(c => ({label: c.email, value: c.email}))}}
Screenshot_2022-05-02_at_5.46.54_PM.png
  • Similarly, populate the Film select widget from the search_film with below code snippet.

{{search_film.data.map(m => ({label: m.title, value: m.title}))}}


  • Set the new_rental query to run on the onClick event of the Confirm button on the modal.
Screenshot_2022-05-02_at_6.01.56_PM.png
  • Repeat the above steps for the Film Tab.
  • The Update Form on the Film tab has the following data bindings
CleanShot 2022-06-07 at 13.26.37@2x.png
  • Create an API query named update_film with the following code snippet under Body tab of the API pane in Raw format. Bind this query to run on the onClick action of the onClick event of the Submit button on the Update Film form.


{
    "operation": "update",
    "schema": "movies",
    "table": "Film",
    "records": [
        {
                    "id": {{filmTable.selectedRow.id}},
                    "rental_duration": {{ufDuration.text}},
                    "rental_rate": {{ufRate.text}},
                    "replacement_cost": {{ufCost.text}}
        }
    ]
}



  • Let’s configure the queries to run to add new film data. Create API query named create_film with headers same as before. Add the following code snippet under Body tab of the API pane, enter the following in Raw


  • Open the modal by clicking the New button on the Film tab. Set the create_film query to run on the onClick event of the Confirm button on the modal. Close the modal and rerun the get_film query to refresh the Film table widget on success of the query.
Screenshot_2022-05-02_at_6.24.53_PM.png
  • Finally on the Customer page, write queries for the search input widget (customerSearchInput) and for displaying data in the list(customerList) below.
  • Create query called get_customers with the following under Body tab of the API pane.

{
    "operation": "search_by_value",
    "schema": "movies",
    "table": "Customer",
    "search_attribute": "email",
        "limit": 10,
    "search_value": "{{`*${customerSearchInput.text}*`}}",
    "get_attributes": [
        "id", "email", "first_name", "last_name"
    ]
}


Bind this query to the onTextChanged action of the customerSearchInput box


{{get_customers.run()}}


  • Bind the results of this query {{get_customers.data}} to the Items property of the customerList box
Screenshot_2022-05-02_at_4.41.35_PM.png
  • Let’s configure the queries to run to add new Customer data. Create API query named new_customer with headers same as before. Add the following code snippet under Body tab of the API pane, and enter the following in Raw

  {
      "operation": "upsert",
      "schema": "movie",
      "table": "customer",
      "records": [
          {
                          "first_name": {{ncFNameInput.text}},
                          "last_name": {{ncLNameInput.text}},
                          "email": {{ncEmailInput.text}}
          }
      ]
  }


  • Open the modal by clicking the New button on the Film tab. Set the new_customer query to run on the onClick event of the Confirm button on the modal. Close the modal on success.
Screenshot_2022-05-02_at_6.22.38_PM.png

Step 7: Control access to information based on user roles

  • On the Rental Inventory page, set the Visibility of the Tab widget to show only if the login process returns tokens on success. Toggle the JS button next to the Visible property to enter the following code snippet

{{!!appsmith.store.user.token}}


Screenshot_2022-05-02_at_2.44.29_PM.png
  • The Rental tab is visible to both the Manager and Assistant roles so we leave its visibility as is
  • The Film and Customer tab should only be visible to the Manager
  • The Visible property of the individual tabs can be accessed by clicking on the gear icon next to the tab name
Screenshot_2022-05-02_at_4.51.56_PM.png
  • Add the following snippet of code in the Visible property of both the tabs

{{appsmith.store.user.username !== 'assistant'}}

Step 8: Configure the Logout button

When the user clicks on the Logout button, we will clear the username and token information in the store variable and redirect the user to the Login page. Add the following snippet of code on the onClick event of the Logout button.


{{storeValue('user', {}); navigateTo('Login')}}


Screenshot_2022-05-02_at_4.46.03_PM.png

So far, we've done a great job. The last part of this project will deploy our application. On the dashboard's top right section, click on the 'Deploy' button. You can also deploy this application by connecting to a Git repository. Our application is now deployed!

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.

Build an Admin Panel with Redshift
26
May
2022
Tutorial

Build an Admin Panel with Redshift

Build an Admin Panel with Redshift
Victory Tuduo
0
 minutes ↗
#
analytics
#
applications
Tutorial

Different organizations rely on admin panels to manage, read and mutate data stored in their database. An admin panel is a console used to control features configurations of an application and manage content in that application. Admins in most organizations use these to help control and manage content and provide security for the application. Anyone looking to handle applications or site functions easily will need to use an admin panel.

Goals

In this tutorial, you will learn how to set up a Redshift database and create and deploy an admin panel template built on Appsmith.

Setting up our Redshift Database

To set up your Redshift database: Navigate your browser to Redshift. Click on the 'Get started with Amazon Redshift' button. Sign in if you already have an account; else, create a new user account.

Next, you need to set up a new role for RedshiftDB. Click on Services in the top navigation, then IAM. Choose Roles from the left navigation panel and click on Create role. In the AWS Service group, choose Redshift. Next, choose Redshift - Customizable, then select Next: Permissions. On the Attach permissions policies page, scroll down and select AmazonS3FullAccess. Enter the role name and description, then click on Create role.

1.png

Creating a Cluster

2.png

On the dashboard, click on ‘Create Cluster’ and enter your cluster name, cluster plan, admin username, and password in the form on the new page that opens up. Ensure to store your admin username and password as you will be using it to connect the database to the Appsmith app. You can finally click on the 'Create Cluster' button when you are done with that.

3.5.png

When the cluster is created, select the cluster and click on Actions; under the 'permissions' section, click on Manage IAM roles. When the management screen appears, select the IAM role you had created earlier, click on Associate IAM role, and click ‘Save Changes.’

With the newly created cluster, you can use a boiler template database. Click on the Query data button.

Testing the Database

Select the newly created cluster in the left panel to use a cluster.

4.png

By default, Redshift creates a dev database that we will use in this tutorial. You can create your table data using the following command and run it to view your output.

6.png

Click on the 'save' button to save this query, enter the name of your query and finally, click save to store it.

3.png

To access the database's credentials, click on 'security credentials' in the dropdown menu on your user name at the top navigation bar. Click on 'Create new access key,' then download the key file in the access key.

Creating the Appsmith Tool

After setting up the database, the next step is to create the panel on Appsmith.

  • First, create a new application to get started.
  • Next, click on the '+' icon on Datasources in the left navigation pane.
  • Click 'Create new' and select Redshift from the list of databases.
  • By default, our data source is named 'Untitled,' you can change the name to something of your choice.
  • You can get your host address and port information from your cluster's information.
11.png

The endpoint is your hostname, copy and paste it into the required field without the port number at the end. By default, the port number is 5429, but you can find this information in your endpoint.

  • Enter the name of your database. In this case, the name of my database is dev.
  • Add your username and password to the authentication section
  • Whitelist the IP instances in your Redshift database settings
  • Finally, click on test, then save.

Creating our Table

With the Redshift data source connected, the data from the database can be displayed using a table. Navigate to the page and add a Table Component from the widgets section by dragging and dropping it onto the canvas. Next, open the table's property pane by clicking on the cogwheel icon on the table.

8.png
a1.png

Before that, we need to set up a query for the data with the command:

COPY

COPY

SELECT firstname, lastname, total_quantity
FROM (SELECT buyerid, sum(qtysold) total_quantity
           FROM sales
           GROUP BY buyerid
     ORDER BY total_quantity desc limit 10) Q, users
WHERE Q.buyerid = userid
ORDER BY Q.total_quantity desc;

Then on our page, we can get this data. In Appsmith, we use the mustache syntax {{}} to add Javascript. To get our query, we use {{Query1.data}}

Setting up a Form with Update Functionality

Apart from reading the data to the table, you can use Appsmith to create and update functionalities.

To do this:

  • First, we will create a form that will contain the input parameters for our table.
  • This form will contain text fields for the firstname, lastname, and total_quantity.

Drag the form widget onto the canvas from the widgets section and add the fields for the firstname, lastname, and total_quantity.

creating a form

You will need to link the form to the database to add the new data with the form setup. You will need to write a query to collate the data from the form when the submit button is clicked and append it to the table. To do this, click on the cogwheel icon on the submit button. Then set the onClick to execute a database query and then click on create a query:

COPY

COPY

INSERT INTO users
 ('firstname', 'lastname', 'userid')
VALUES
('{{Input1.text}}', '{{Input2.text}}', '1');

       INSERT INTO sales
       ('qtysold', 'salesid', 'listid', 'sellerid', 'buyerid', 'eventid', 'dateid')
VALUES
('{{Input3.text}}', '1', '1', '1', '1', '1', '1')

Here we entered the values of the input fields into the firstname, lastname, and qtysold. Also, I've set the id's to '1' for every entry; usually, you may use default values for this. You can now add new entries through the form to the table.

Updating and Deleting Table Data

Apart from reading and creating table entries, we can also update and delete data from our table. You must first target a particular row and set it as the default value in the form's input fields to update the data.

update selected fields

Above, we set the Default Text for the input field to {{Table1.selectedRow.firstname}} to always get the data from the firstname column of the selected row in the input field. We repeat this step for lastname and total_quantity by entering {{Table1.selectedRow.lastname}} and {{Table1.selectedRow.total_quantity}} as their default text respectively. We need to add new functionality via a button to update the table. Add a button from the widgets pane and name the ‘Update’ button.

Next, create a new Javascript query for the on-click handler in the button option pane. For our new query to handle updates, we have the following:

COPY

COPY

update users
set firstname='{{Input1.text}}', lastname='{{Input2.text}}'
where firstname='{{Table1.selectedRow.firstname}}';

The query above checks for the row where the firstname corresponds to the selected row's firstname column value. It then replaces the firstname and lastname columns with the value of the input fields.

Delete Functionality

We can add another button called Delete to our form to do this.

delete button

Create a new query as follows:

COPY

COPY

delete from public.users where firstname = '{{Input1.text}}'

When executed at the click of the Delete button, this query checks the user's table and deletes the corresponding row, which has a firstname with its value corresponding to the selected data.

You can try out the query and observe that the selected row is removed when the 'Delete' button is clicked.

Deploying the Redshift Template

To deploy the Redshift panel template, click on the deploy button at the top right of the navigation bar. You can then make it publicly accessible or share it with specific individuals via email. The admin panel can be further modified with added functionalities such as user authentication for restricted access and email integrations to inform the admin when a change has occurred.

Build a Growth Dashboard Using Appsmith, Orbit, and Slack
28
April
2022
Tutorial

Build a Growth Dashboard Using Appsmith, Orbit, and Slack

Build a Growth Dashboard Using Appsmith, Orbit, and Slack
David Atanda
0
 minutes ↗
#
analytics
Tutorial

Proper feedback and community management is a significant part of building the organic reach of products, especially open source products. So, marketing teams might decide to build customized apps that contain valuable metrics. Products like Orbit allow us to get live data from our community forums to view them more concisely. In this tutorial, you will learn how to build an internal growth dashboard, where we’ll be able to display key metrics, including monitoring a Slack group and viewing existing members of the channel. The goal is to display specific growth metrics that enable better decision making in the marketing team.

as1.gif

First, we’ll be learning how to connect our Slack directly to Orbit, where we can view our information, activities, and members on their dashboard. Then, we’ll use Orbit’s REST API to view the data on our Appsmith dashboard.

as2.png

This is useful in cases where we want to view our Slack data in a custom Appsmith app outside something like Orbit, mainly when the dashboard includes other external community data, not data from just the Slack channel.

Getting Started with Orbit

We’ll [signup to Orbit] (app.orbit.love) and create our Orbit’s workspace:

as3.png

Once we’ve created the workspace, we can now integrate our Slack community to orbit.

as4.png

You can now open the Slack workspace you just connected with Orbit.

Go into your channel and open the Channel Details menu by clicking on the top-left channel name. Then, we’ll open the integration panel and click on “add apps.”

We’ll then see a bunch of apps where you’ll select Orbit.

as5.png

The Orbit integration is now added to our #general channel! This automatically imports all messages and profiles (up to one year). Plus, it will listen for any new activities, including messages, thread replies, etc.

A message will automatically appear in the channel you just added, saying, “Orbit was added to #channel by you.”

as6.png

To add the Orbit integration to more channels, we need to repeat the same steps or take advantage of the message shown above: Clicking on the name or icon of “Orbit” in that message will open a menu, from which you can add the integration to more channels with a click.

We’ve successfully connected Slack to orbit and can view all activities on our Orbit dashboard.

as7.png
as8.png

Setting Up Our Orbit API

Orbit offers RESTful APIs that we’ll use to pull our Slack data into our dashboard. The specific data pulling is the list of members from this Slack channel.

Here’s the endpoint:

app.orbit.love/api/v1{workspace_slug}/members

Note: You can can check the docs for more endpoints and use-cases.

You can find the workspace_slug under the workspace settings. It’s the text in bold below:

as9.png

Setting Up Appsmith

Let’s sign up to Appsmith and create our first app. On our first page we’ll add the container and text widgets to act as the header. Then, we’ll also add the list widget.

as10.png

Now, we’ll go under QUERIES/JS dropdown on the left and create a new Datasource.

as11.png

Set the API request to GET and add the endpoint. You’ll have to add your {workspace-slug} to the endpoint, as explained earlier. Once that’s done, we’ll click Edit Datasource, and it’ll take us to a page where we’ll add our header token.

as12.png

Scroll down to the Authentication section of the page, down to the Bearer Token input, and add your Orbit’s API token. You can find that on the settings page. Note that you won’t add Bearer as a prefix, just the token. (that’ll be done automatically)

as13.png

Let’s go back to our API datasource page and test it again

as14.png

We now have everything functioning as it should, and the API provides the appropriate response. Look at the left and open a new page:

as15.png

Once we select the list widget, we go to the left and see all related options. Under items, we’ll get the response preview by adding the name of the API: Orbit_Members.data.data.

{{Orbit_Members.data.data}}

Similarly, you’ll add an image widget inside the List item. On the right, we’ll use currentItem to refer to the current API in question. So it’ll be currentItem.attributes.avatar_url.

as16.png

In the same vein, we add the name and email to the List item with {{currentItem.attributes.name}} and {{currentItem.attributes.email}}. If we do this correctly, we should have a similar screen to the one we have above.

Displaying Member Details

First, we’ll create a new page called Member Details

as17.png
as18.png

We’re now going to add a button to each user that navigates us to a new page (Member Details). While navigating, we’ll save the user’s slug as a store value, and send it as a query param to the next page.

The aim is to use that slug to make another request on the new page. This request displays that particular user’s details. Under Member Details, we’ll name that request Member_Details and get our slug value from Appsmith.value.slug. This allows us pull the data for that single member that was selected on the Dashboard page.

as19.png

Let’s go back to Member Details and display our data.

as20.png

First, we add an image component to display the picture and use {{Member_Details.data.data.attributes.avatar_url}} to get our image URL from the Member_Details DataSource we created.

We also use {{Member_Details.data.data.attributes.location}} and {{Member_Details.data.data.attributes.avatar_email}} to display our location and email respectively.

Next, we’ll manually add other data to our dashboard. These include our Daily Active Users (DAU) and New Community Members.

as21.png

Sales Report

There’s a sales report graph that helps us display our sales data.

as22.png

In this case, we’re manually adding our data as an array.

as23.png

Finally, we’ll hardcode other important data like churn rate, conversions, and our MRR.

as24.png

Deployment

Now that our Appsmith app is complete, what’s next? Deploying our shiny new app for other team members to use. Here’s the link to our application.

There’s also a tutorial below that shows you how to deploy with digital ocean. youtube.com/watch?v=6fitHGX2G4E&; youtu.be/6fitHGX2G4E

Conclusion

In this article, we’ve covered how to create a growth dashboard with Appsmith and Orbit‘s REST APIs. This shows us how to use low-code tools to optimize time and valuable resources when building internal tools in your company.

Orbit and Appsmith complement each other when it comes to monitoring community platforms like Slack, Discord, Discourse, etc. With Orbit, you get access to direct feedback and necessary information without spending engineering time building infrastructure from scratch. While Appsmith lets you focus on creating a visual dashboard with metrics, using minimal effort to implement and maintain.

Beyond using Orbit as a datasource, we can make use of custom REST APIs, Airtable, Supabase, Backendless, etc. Also, you can add other third-party integrations like intercom, email, or even add Zapier into your application. Appsmith can be customized into any form to fit your technical use-case.

If you have blockers or issues using Appsmith, you can always jump into our community Discord server to ask questions. Plus, you can connect with other Appsmith users.

Also, feel free to check other Appsmith tutorials using similar services like Cube, SnowflakeDB, Hasura, etc.

Build a Payment Link Generator App with Stripe APIs
29
April
2022
Resources

Build a Payment Link Generator App with Stripe APIs

Build a Payment Link Generator App with Stripe APIs
Vihar Kurama
0
 minutes ↗
#
stripe
#
guide
#
dashboard
Resources

Stripe is one of the most prominent developer tools for integrating payments into your website or application. The service allows you to start accepting payments from users in 14 countries and 24 currencies, and all this is relatively easy to set up! However, not every business needs a full-fledged website for collecting payments from their customers. In this short tutorial, we'll be building an app on Appsmith that will generate Stripe payment links for you directly from your dashboard. You can create as many payment links as you like and make them available via email. Even if someone doesn't have an Internet connection or uses a computer without a browser installed, they can still take advantage of your services!

Appsmith is an open-source application builder that integrates with custom APIs and databases. It's perfect for building your team's internal tools, admin panels, and dashboards.

Let's dive in!

Setting up Stripe Account

The first step in building a payment link generator is to set up a Stripe account. You can either create a new account or log in if you're an existing user.

Please note that this application is a built-in test mode, which requires additional information about the business to generate payment links. To make it into a fully-functional application, you will need to add additional details regarding your bank and tax information.

Your dashboard will look like this:

CleanShot 2022-04-20 at 15.30.29@2x.png

Even in test mode, you will be able to access all the features of Stripe APIs, but this will not be able to make complete transactions from our generated links.

The next step is to make our API requests from Appsmith; we’ll need to copy the secret key that’s available on the main page of the dashboard.

CleanShot 2022-04-20 at 15.36.24@2x.png

This secret key lets us access our Stripe account via Bearer Token-based authentication.

In the next section, we'll build s simple UI that lets us generate payment links based on the given customer information and payment price.

Building UI on Appsmith

The first step is to create an account on Appsmith. In this guide, I'll be using the cloud version of Appsmith, but you can always choose to use Appsmith locally or self-host it on your server.

  • Navigate to appsmith.com and sign-up for a new account if you're a new user or login into the existing one.
  • Create a new application under your preferred organization. You'll see an editor with everything you need to build your internal application.
  • As soon as you create a new app, you'll see a canvas with all the details around widgets and data sources on the left sidebar.

Now, click on the widgets tab and drag and drop a container widget on the canvas; this will allow us to group all the widgets in a container. This can be completely customizable; you could add borders, background colours, shadows, and more by opening the property pane.

Inside the container widget, drag and drop a new form widget and add a few input widgets onto the container that lets us collect information for payment links:

  • Product Name
  • Price
  • Quantity
  • Success URL
  • Capture Method

We could also add some additional configuration based on the information that needs to be collected, referring to the Stripe Documentation.

Following is a screenshot of how the UI looks on Appsmith:

CleanShot 2022-04-20 at 16.39.52@2x.png

Next, let’s create a new datasource, an API endpoint that’ll create a new Stripe payment link.

  • Click on the + icon next to Datasources from the sidebar
  • Choose API Endpoint and paste the following URL:

https://api.stripe.com/v1/checkout/sessions

  • You can rename this URL by just double-clicking on the existing one; let’s call this stripe-session.
  • Stripe APIs use BEARER token-based authentication; hence, the API expects an Authorization header with a bearer token.
  • Copy the token from the Stripe dashboard and paste it into the header.

Authorization - BEARER <token>

  • Lastly, let’s send the data as a payload using the filling FORM_URLENCODED data since we are collecting all the inputs in a form widget. Alternatively, we could also add the payload in the JSON Body filed.
To bind the data on the API, we’ll need to use the moustache bindings and the input widgets names. Here’s how we can access the data from the price the amount widget:

{{amountInput.text*100}}


Similarly, we add all the required fields on the payload to create a new session. Here’s a screenshot of what the payload looks like:

CleanShot 2022-04-25 at 21.43.03@2x.png

Our API is now ready; let’s add one more input widget, generating a Stripe Session link (the payment link) for use with the data passed through our input widgets.

Here’s what we’ll need to bind the response from the API endpoint; we can do this by binding the following:

​​{{stripe_Session.data.url}}


The .data property on an API request will return the response from the API endpoint; here, we’ve accessed the URL field, which is essentially the payment link.

If you open this URL, you’ll see a new Stripe session with the amount and details you’ve entered on the form.

Here’s a recording of how this works:

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.

Introducing JSON Forms in Appsmith
21
April
2022
Announcement

Introducing JSON Forms in Appsmith

Introducing JSON Forms in Appsmith
Somangshu Goswami
0
 minutes ↗
#
announcement
#
app-development
#
applications
#
widgets
Announcement

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.

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.

Build a Tool to Generate PDF Files with APITemplate and n8n
23
March
2022
Tutorial

Build a Tool to Generate PDF Files with APITemplate and n8n

Build a Tool to Generate PDF Files with APITemplate and n8n
Vihar Kurama
0
 minutes ↗
#
automation
#
apis
#
dashboard
#
app-development
Tutorial

Information is the lifeline of any business, and to keep it alive and well, businesses have to transfer information to their various stakeholders like investors, bankers, suppliers, customers, government, etc. One of the simplest and the most effective ways of transferring information is using PDF files. These PDF files can be generated in different ways, but it involves lots of coding and configuration on your frontend and backend applications. To make this process easier on Appsmith (low-code framework to build internal tools), we created a workflow on n8n that uses APITemplate and simple webhooks.

This tutorial is a step-by-step guide on generating and exporting PDF files from data on your Appsmith application. Let's dive in!

Getting Started: Setting up Appsmith and the Data to Export

The first step is to create an account on Appsmith. In this tutorial, I'll be using the cloud version of Appsmith, but you can always choose to use Appsmith locally or self-host it on your server.

  • Navigate to appsmith.com and sign-up for a new account if you're a new user or login to the existing one.
  • Next, create a new application under your preferred organization. You'll see an editor with everything you need to build your internal application.

Now, let's create a table from the mock database already provided on Appsmith.

  • For this, click on the + icon next to the Datasources on the left sidebar under Page1.
  • Now choose the users database (Postgres) under-sample databases section.
CleanShot 2022-03-17 at 00.35.15@2x.png
  • With this, you should see users' databases under your data sources section on the left sidebar. Now create a new query by clicking on Create New button from the user's datasource.
  • This will create an empty query named Query1, rename this as getUsers and paste the following SQL query:

SELECT * FROM users ORDER BY id LIMIT 10;


  • Hit the Run button on the top right to execute this query; it will return details of the first ten users from the user's table on the database.

Now let's bind this on a Table widget and then create a workflow to export it into a PDF file.

  • To bind the query on a table widget, click on the + icon next to the widget and search for the table under the Widgets tab.
  • Drag and drop the table widget onto the canvas and open its property pane by selecting the table on the canvas. You should see all the table configurations on the side right bar.
  • Next, update the Table Data property to the following:
{{ getUsers.data  }}


  • Here, we use the moustache bindings to bind the data from the query onto the widget. You can write JavaScript anywhere across appsmith inside these bindings.

Following is what the application looks like now:

CleanShot 2022-03-17 at 00.54.43@2x.png

Excellent, our data is now ready. Now let’s create a workflow on n8n to generate PDF using APIs from APITemplate.io.

Setting up APITemplate.io

If you are new to these tools, the following is a quick intro to help you get started:

APITemplate.io: APITemplate helps auto-generate images and PDFs with Zapier, Integromat, N8n ow with a simple REST API.

Now let’s create a free account on APITemplate; you will be redirected to your dashboard after signing up. Navigate to the Manage Templates tab and create a new PDF template.

The template here is how you want your PDF to be organized this tutorial; I’ll be using the basic table template provided under the PDF template section.

Since our goal is to export the data on the Appsmith table, I’ve navigated to the HTML editor and removed all the unnecessary HTML content.

CleanShot 2022-03-17 at 01.06.53@2x.png
The idea is straightforward we send dynamic data from Appsmith onto the HTML template using a webhook, and APITemplate will generate a PDF file from the HTML.

Here’s how the HTML is added:

CleanShot 2022-03-17 at 01.08.52@2x.png

The item variable here holds all the data that will be updated from the webhook request on Appsmith.

We don't see any data here, as we did not have any workflow. So let's create on n8n!

Creating a Workflow on n8n

n8n: n8n helps you to interconnect every app with an API in the world with each other to share and manipulate its data without a single line of code. It is an easy-to-use, user-friendly, and highly customizable service, which uses an intuitive user interface for you to design your unique workflows very fast.

I'll be using the cloud version of n8n for this tutorial. Note that you can also self-host n8n on your server.

Now, let's create the workflow:

  • Drag and drop a webhook node and add the following configuration:
  • Set the authentication type to None.
  • The HTTP method to POST.
  • Set the Response method to Using 'Respond to Webhook' node

Now copy the TEST URL, and create a new API on the Appsmith app by clicking on the + icon next to Queries and pasting the TEST URL in the request URL. Rename the query to generatePDF for a better naming convention.

Now navigate to the Body tab in the API request and paste the following JSON:


{
    items:{{Table1.tableData}}
}


Here, we send the items data from the Table to the webhook using the moustache bindings.

Now, we can test this webhook by starting the workflow; here’s how it works:

Next, drag and drop a new APITemplate.io node and connect it to the webhook and use the following configuration:

  • First, copy the API key to the Credentials for APITemplate.io property.
  • Set resource to PDF and Operation to Creation
  • The template ID property can be found under the manage templates tab; this refers to the template created in the last section.
  • Toggle the JSON parameters and Download to ON
  • Copy the following in the Properties:
{    
    "items": {{(JSON.stringify($node["Webhook"].json["body"]["items"]))}}
}


This is where n8n sends data from Appsmith to APITemplate using a webhook.

Now, connect a new Respond to webhook node and set its respond with property to First incoming item property. This is how the complete workflow looks like:

CleanShot 2022-03-17 at 02.02.07@2x.png

Now click on execute the workflow and RUN the API on Appsmith; we should see a response with a downloadable PDF URL:

CleanShot 2022-03-17 at 02.13.55@2x.png

To improve the look and feel, we could create a new button and set its onClick property to run generatePDF query and bind the response to a text widget.

Here’s the complete workflow:

Alternatively, for PDF generation on Appsmith, we could also rely on other services like Zapier / Adobe.

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.

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.