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!
We’ll be using the HarperDB cloud instance free - tier. Click on Create New HarperDB Cloud Instance → Create AWS or Verizon Wavelength Instance
Select Choose HarperDB Cloud on AWS and then click on Instance Info
Fill in the details about your instance and click on Instance Details button
Keep the default settings in the Instance Specs modal and click on Confirm Instance Details
Click on the Add Instance button
This will begin creating your database cloud instance on HarperDB. Your instance will be up and running in no time.
Use the Upload CSV feature of HarperDB to populate data into the three tables. You can find sample data here.
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
rental_user will have all permissions on the Rental table and only the read permission on the Customer and Film tables
Under the users tab, create a user named assistant with the role of rental_user.
Similarly, create a user named manager with the role of admin_user
And just like that, the backend setup is complete.
Under Headers, ensure that the content-type is application/json
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.
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 this query to the onTextChanged action of the customerSearchInput box
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.
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.
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!
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.
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.
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:
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).
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.
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.
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:
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:
You can now connect MinIO instances on Appsmith using the S3 plugin. This can be done when:
You can find this connecting in a dropdown from the S3 datasource.
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 :)
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.
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.
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.
In this tutorial, you will learn how to set up a Redshift database and create and deploy an admin panel template built on Appsmith.
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.
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.
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.
Select the newly created cluster in the left panel to use a cluster.
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.
Click on the 'save' button to save this query, enter the name of your query and finally, click save to store it.
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.
After setting up the database, the next step is to create the panel on Appsmith.
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.
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.
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}}
Apart from reading the data to the table, you can use Appsmith to create and update functionalities.
To do this:
Drag the form widget onto the canvas from the widgets section and add the fields for the firstname, lastname, and total_quantity.
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.
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.
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.
We can add another button called Delete to our form to do this.
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.
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.
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.
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.
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.
We’ll [signup to Orbit] (app.orbit.love) and create our Orbit’s workspace:
Once we’ve created the workspace, we can now integrate our Slack community to orbit.
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.
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.”
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.
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:
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.
Now, we’ll go under QUERIES/JS dropdown on the left and create a new Datasource.
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.
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)
Let’s go back to our API datasource page and test it again
We now have everything functioning as it should, and the API provides the appropriate response. Look at the left and open a new page:
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.
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.
First, we’ll create a new page called Member Details
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.
Let’s go back to Member Details and display our data.
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.
There’s a sales report graph that helps us display our sales data.
In this case, we’re manually adding our data as an array.
Finally, we’ll hardcode other important data like churn rate, conversions, and our MRR.
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
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.
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!
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:
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.
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.
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.
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:
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:
Next, let’s create a new datasource, an API endpoint that’ll create a new Stripe payment link.
https://api.stripe.com/v1/checkout/sessions
Authorization - BEARER <token>
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:
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:
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.
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!
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.
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.
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:
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.
Not just that, you could also replace the close buttons on the modal with the Icon Button widget for more customization.
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 + ?.
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:
Following are the MongoDB types that can be handled:
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.
Last month was crazy for us; we’ve published a couple of new blog posts and have successfully hosted four live events!
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.
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:
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.
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.
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.
Some of the ways that we've seen our users use the JSON form are:
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.
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:
And here’s what we have in store for the immediate future:
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.
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.
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.
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!
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.
Now, let's create a table from the mock database already provided on Appsmith.
Now let's bind this on a Table widget and then create a workflow to export it into a PDF file.
Following is what the application looks like now:
Excellent, our data is now ready. Now let’s create a workflow on n8n to generate PDF using APIs from 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.
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:
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!
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:
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:
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:
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:
Now click on execute the workflow and RUN the API on Appsmith; we should see a response with a downloadable PDF URL:
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.
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!
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:
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:
Here’s a screenshot:
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:
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.
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.
Additionally, you can use these on input widgets as well:
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.
Last month was crazy for all of us; we’ve published seven new blog posts and have successfully hosted four live events!
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.