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.
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.
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.
Amazon Redshift is a fast, fully managed, petabyte-scale data warehouse service [A data warehouse is a type of data management system that is designed to enable and support business intelligence (BI) activities, especially analytics.]. It makes it easy to manage your data warehouse and automatically distributes your data across multiple nodes to eliminate hot spots and provide high availability. It’s also an excellent option for building a frontend. However, it does have a few specifics that might make you rethink your current strategy. However, with Appsmith, it’s possible to create a fully functional and custom frontend in minutes. A vast array of pre-built UI components that is widgets are available to help you build good-looking applications. Connecting data sources with Appsmith takes a few minutes, and you can quickly build tools on top of the database of your choice.
This blog will teach you how to build a frontend that can connect to Redshift as a datasource.
On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including Redshift. We need to make the connection to the endpoint, database name, and user credentials. With this in mind, let’s get started.
Note: I’m using a free Redshift account on Amazon Web Services (AWS) in this example.
Here’s what the configuration would look like:
The basic configuration is complete, so now, we will now use the seed data already loaded on the Redshift Data (TICKIT data).
Note: After the connection is established, we can see all the (tables) under the connected datasource.
Now, let’s use the Category table to build our CRUD APP!
First, let’s read our data from the database and display it on a beautiful table widget. Follow the below steps:
We now have our query; let's bind this onto the table widget; for this, follow the below steps:
With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane.
To add the create operation on Redshift, let’s make UI.
Here, we have three input widgets to add to our category. We can configure the default values, labels, and placeholders by selecting the respective property panes. Now, let’s write the query to create a new category on Redshift.
Follow the steps below:
The Update operation is quite similar to the create operation. First, let’s build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under the columns property.
Now, rename the column to Edit Category, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a Button type. A modal should open up with the necessary fields to update the item when clicked.
Now, copy-paste Modal1, rename it to Modal2 and set the onClick property of the Edit Category button to open Modal2. Here, in the form, we can set the default value to show existing information; to display this, use the selectedRow property from the table widget.
Let’s write the Edit query using SQL:
Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the mustache syntax to bind the data from the widgets onto the query body.
We’ll now need to configure the submit button; for this, go back to Modal2 and set the button’s onClick property to execute a query and choose **_editCategory_** under the events property:
The delete operation is pretty straightforward with the Table’s selectedRow property; before we dive into it, let’s create a new column on the table and set it to the button. For this:
Now, let’s write the Delete query using SQL:
Set the Delete Category button’s onClick property to run the deleteCategory query.
With these four operations configured, you will be able to read and analyze information from your database, edit the data, add or delete information and update records.
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.
Not every internal application is purely internal; sometimes, several organizations and teams need to have a way to automate their operations. For example, you might want to share your expense manager app with a financial advisor and other finance teams. Because there are multiple connections, having robust user authentication is crucial for such internal applications. But, adding an authentication layer to web applications is not straight forward task. The traditional approach is to have a form-based email-password authentication, then validating them with the backend using auth tokens and redirecting them onto the application. Sometimes users and developers prefer a faster way of using social authentication. This authentication allows users to log in to your app with their already set up credentials from their selected social sites.
Today, I’ll show you how you can add social authentication with Google to Appsmith applications without writing any piece of code. To do this, we will use Xano as the backend.
Before getting started, let me give you a quick introduction about Appsmith and Xano, in case you’re new here.
Appsmith is a low-code open-source framework to build internal applications, dashboards, crud apps, and many more. With Appsmith, it’s possible to create a fully functional and custom frontend in minutes. Connecting data sources with Appsmith takes a few minutes, and you can quickly build tools on top of the database of your choice.
Xano is one of the few no-code backend platforms that provide a comprehensive Database test environment, which allows you to easily switch between production and test data. Xano also provides API request history and easy ways to monitor CPU Usage and Database Record utilization.
Alright, now let’s get into it.
The first step is to create accounts on Xano and Appsmith. In this tutorial, I’ll use the cloud versions on both Appsmith and Xano.
Note: Since Appsmith is open-source, you can always use it locally or self-host it on your own servers using Docker.
After the Xano app is created, navigate to the API page in the dashboard, we’ll see two API groups; one is Default, and the other is google-oauth.
If you’re new to creating social auth keys on Google console, you can follow these steps from the documentation here.
Appsmith comes with a vast array of pre-built UI components: widgets. These can be fully customisable to help you build good-looking applications. For this application, I’ll keep the UI clean and simple, however, you can always add more to your applications based on your use-cases.
Now follow the below steps:
Here’s a screenshot of the form that’s built on Appsmith:
To initialize the authentication process, we’ll need to configure APIs on Appsmith from Xano, to do this follow the below steps:
There’s one last thing, we will need to set the button onClick action to JS and copy the following:
{{init.run(() => navigateTo(init.data.authUrl, {},'SAME_WINDOW'), () => {})}}
This code snippet will navigate to the redirectURI that’s requested from the init API call, which is obviously to the welcome page.
Note: The auth endpoint from Xano we used in this section is responsible for sending the user off to a Google webpage to authenticate. Once complete, the user will be redirected to where this request was initiated and then depending on your requirements, the user will go down the login, signup, or continue path.
Next, we’ll need to configure the continue flow to get details from the user and manage if the user is a first time user or an existing user.
To configure the continue workflow, navigate to the welcome page on Appsmith; this is where the user lands after the initialization is complete. First, let’s design the UI.
Next, create a new API by clicking on the + icon next to the datasource section and follow the below steps:
Now let’s test it out by clicking on the Login button from the login page, and we should successfully see the response on the continue API.
Here’s the GIF:
Awesome, we were now successfully able to finish the authentication process, now let’s bind the data onto the UI with JavaScript.
For this, set the text property on text widget to:
Welcome {{oauth_continue.data.name}}
This will show the username from the Google Account when the user is logged in.
To create a secure page on Appsmith with auth add a new page by clicking on the + icon next to the Pages. Next, drag and drop a TAB widget onto the canvas.
Now, open the property pane of the tab widget and rename the Tab names to logedin and notlogedin; under the Default Tab property, paste the following snippet:
This snippet will show logedin tab when the user has logged in and the notloggedin tab when there is no user. Here's how it works:
This is how we can achieve social authentication on the internal application! To see more details about other social providers, follow the Xano documentation here.
If you’re interested in using a database that is 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.
Wrapping your mind around how Redis handles data structures and associations like other non-relational database engines can sometimes be challenging. This is particularly true when Redis is compared to more traditional relational databases with quarantined tables containing multiple rows and columns to house data. However, building UI on top and managing multiple queries on the Redis database is also a complicated process.
With Appsmith, it’s possible to create a fully functional and custom frontend in minutes. A vast array of pre-built UI components, that is, widgets, are available to help you build good-looking applications. Connecting data sources with Appsmith takes a few minutes, and you can quickly build tools on top of the database of your choice.
This blog will teach you how to build a frontend that can connect to Redis as a datasource.
Redis is a NoSQL document database built for automatic scaling, high performance, and ease of application development. While the Redis interface has many of the same features as traditional databases, as a NoSQL database, it differs from them in describing relationships between data objects.
On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including Redis.
We need to make the connection to the Host Address, Port, and Database password. With this in mind, let’s get started.
Here’s what the configuration would look like:
We are done with the basic configuration. Now, let’s create some data on Redis and learn a few basic operations on Appsmith.
For the vast majority of data storage with Redis, data will be stored in a simple key/value pair. This can be done using GET and SET commands.
Using this command, we can fetch all the key-value pairs on the Redis datasource. To query this on Appsmith, follow the below steps:
This will fetch all the keys from the data source; the following is the screenshot:
You can use this information to bind it on any widget on Appsmith using the moustache operator; in this case, the data from this query can be accessed by the following snippet:
We may want to store some information from our application on Redis, for example, the title and author of a few of our favourite books.
To do this on Appsmith, you can use Input widgets, to collect the data dynamically or directly create it from the query pane. In the following screenshot, I’ve dragged and dropped two input widgets and a button widget to dynamically take inputs and create key-value pairs on Redis datasource.
Next, I've created a new query on the Redis datasource that will dynamically take inputs from the query, for this:
Here, we have an insert query that collects all the data from the input widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
With this, we can customize and build any kind of UI on top of the Redis datasource.
If you’re interested in using a database that is 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.
Low-code-based web applications are often discussed when talking about the future of software development. While some developers call it 'no-code,' others call it 'low code'; no matter what you want to call them, they are showing no signs of slowing down in growth among small to large businesses, especially when this technology is bringing about a great change even on the back-end side of things. One major technology that seems to have worked well in this market is Google's Firebase. It is a platform for app building created by Google. Firebase uses an open-source development framework making it very accessible for developers to swiftly prototype and integrate them into their apps.
With this, Firebase and its database Firestore, most back-end needs are fulfilled without writing code. But you can't build web-based internal applications/admin panels with front-end frameworks simultaneously because building UI from scratch is not easy.
This part, however, can be simplified with Appsmith, where you can create a fully functional and custom front-end in minutes. A vast array of pre-built UI components, that is, widgets, are available to help you build good-looking applications. Connecting data sources with Appsmith takes only a few minutes, and you can quickly build tools on top of the database of your choice.
This blog will teach you how to build a front-end that can connect to Firestore as a datasource.
Firestore is a NoSQL document database built for automatic scaling, high performance, and ease of application development. While the Firestore interface has many of the same features as traditional databases, as a NoSQL database, it differs from describing relationships between data objects.
On Appsmith, it's pretty straightforward to establish a connection with any datasource, including Firestore.
What we need to make the connection are the Database URL, Project Id, and Service Account Credentials. With this in mind, let's get started.
Here’s what the configuration would look like:
Note: For service account credentials, generate a new private key and copy its contents.
We are done with the basic configuration. Now, let's create a collection on Firestore to build a simple to-do list application and learn all the basic CRUD operations on top of Appsmith.
On Firestore it's super easy to do this from the console, just hit the create collection button on the dashboard, and define all the attributes in the model.
Followings are the attributes and data types we use:
Alrighty, our collection is not created; let's get into CRUD.
First, let's read our data from the database and display it on a beautiful table widget. Follow the below steps:
We now have our query; let's bind this onto the table widget; for this, follow the below steps:
With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane.
To add the create operation on Firestore, let's make UI.
Here, we have three input widgets to add to our tasks. We can configure the default values, labels, and placeholders by selecting the respective property panes. Now, let’s write the query that lets us create a new task on Firestore.
Note: The default value is set to the logged-in user name using Appsmith’s context object, you can do this by binding {{appsmith.user.name}} in the default text property.
Follow the steps below:
Here, we have an insert query that collects all the data from the form widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
Lastly, we’ll need to configure the submit button; for this, go back to the modal and set the button’s onClick property to execute a query and choose createTask under the events property:
The Update operation is quite similar to the create operation. First, let’s build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under the columns property.
Now, rename the column to Edit, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a Button type. When clicked, a modal should open up with the necessary fields to update the item.
Now, copy-paste Modal1 and rename it to Modal2, and set the onClick property of the Edit Task button to open Modal2. Here, in the form, we can also set the default value to show existing information, to display this, use the selectedRow property from the table widget.
Let’s write the Edit query:
Note: The {{ Table1.selectedRow._ref }} snippet evaluates to the selected row’s _ref which will be the row we want to edit to.
Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
We’ll now need to configure the submit button; for this, go back to Modal2 and set the button’s onClick property to execute a query and choose **_editTask_** under the events property.
The delete operation is pretty straightforward with the Table’s selectedRow property; before we dive into it, let’s create a new column on the table and set it to the button. For this:
Now, let’s write the Delete query:
With these four operations configured, you will be able to read and analyze information from your database, edit the data, add or delete information and update records.
If you’re interested in using a database that is 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.
There are many parts to building an app, and designing UI elements can take up most of a developer’s time when building from scratch. However, with Appsmith, it’s possible to create a fully functional and custom frontend in minutes. A vast array of pre-built UI components that is widgets are available to help you build good-looking applications. Connecting data sources with Appsmith takes a few minutes, and you can quickly build tools on top of the database of your choice. For example, you can create admin panels to manage product catalogues, read content data from your database and use that to populate your e-commerce website, and then write more data and update your existing orders in the database. There are so many possibilities!
In this blog, I will teach you how to build a frontend that can connect to MariaDB as a datasource.
MariaDB Server is one of the most popular open-source relational databases. It’s made by the original developers of MySQL and guaranteed to stay open source. It is part of most cloud offerings and the default in most Linux distributions. It is built upon the values of performance, stability, and openness.
On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including MariaDB; be it on cloud, self-hosted version or local environment.
What we need to make the connection are the endpoint, database name, and user credentials. With this in mind, let’s get started.
Here’s what the configuration would look like:
We are done with the basic configuration. Now, let’s create a new table and seed it to build a fully customisable CRUD app on MariaDB.
Note: After the connection is established, we can see all the (tables) under the connected datasource.
This is a simple SQL query that’ll create a projects table, the idea for us is to build a simple CRUD application, that’ll let us manage open-source projects.
Also, note that we’ve seeded the table with an insert statement where we added the appsmith project.
Alrighty, not that our table is created, let’s get into CRUD.
First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:
We now have our query; let's bind this onto the table widget; for this follow the below steps:
With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane.
To add the create operation on MariaDB, let’s make UI.
Here, we have two input widgets to add to our project. We can configure the default values, labels, and placeholders by selecting the respective property panes. Now, let’s write the query that lets us create a new project on MariaDB.
Follow the steps below:
Here, we have an insert query that collects all the data from the form widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
Lastly, we’ll need to configure the submit button; for this, go back to the modal and set the button’s onClick property to execute a query and choose createProject under the events property:
The Update operation is quite similar to the create operation. First, let’s build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under the columns property.
Now, rename the column to Edit Project, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a Button type. When clicked, a modal should open up with the necessary fields to update the item.
Now, copy-paste Modal1, and set the onClick property of the Edit Project button to open Modal2. Here, in the form, we can also set the default value to show existing information, to display this, use the selectedRow property from the table widget.
Let’s write the Edit query using SQL:
Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
We’ll now need to configure the submit button; for this, go back to Modal2 and set the button’s onClick property to execute a query and choose **_editProject_** under the events property:
The delete operation is pretty straightforward with the Table’s selectedRow property; before we dive into it, let’s create a new column on the table and set it to the button. For this:
Now, let’s write the Delete query using SQL:
Set the Delete Project button’s onClick property to run the deleteProject query.
With these four operations configured, you will be able to read and analyze information from your database, edit the data, add or delete information and update records.
If you’re interested in using a database that is 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.
We're now officially in 2022 because the first month of the year is done and dusted! Our engineers have been super busy building new features and improving the user experience. And, as always, I am here to give you the deets!
Without further delay, let me jump right in.
First up, one of the big features to go live in our new resizing experience for widgets on the Appsmith canvas!
If you've been using Appsmith for a while, you were likely frustrated with an experience while pulling a new widget onto the canvas with other UI components already placed. The new widget wouldn't get drawn in, and you'd have to scroll all the way down on the canvas, find an empty spot, and then drag the new widget. Then, you would have to go up, readjust the space between the existing widgets on the canvas, and then resize your new widget and place it in the space. That's a lot of work, we know! This issue has been high on our priority list, our engineers worked very hard on it, and we're happy to say that this issue has been fixed with the new and improved resizing experience.
With this new feature:
At the moment, this feature is still in Beta and does not work on grouped widgets. If you want to turn this feature off, you can do this with a single click from the docked property pane on the right.
If you want more information on this, you view this video, where Appsmith's co-founder and CEO, Abhishek Nayak, demos the feature and presents a walkthrough.
Progress Bar Widgets
Progress bars are an essential part of many user interfaces. They can help understand the progress of a task or a project in a visual way. It's the intuitiveness of these bars that makes them a popular choice! According to stats, they are used on over 38% of the top 1,000 websites on the planet. We've now added progress bars into a repertoire of widgets and guess what you can customize the labels and colours to your liking!
And another way, this has been further made cool is by fantastic community contribution! One of our contributors, Yaldram, inspired by React, created the circular progress component! I never cease to be amazed by our vibrant community! <3
With this new widget, you can add progress bars anywhere across the application and further customize them with JavaScript. To see how this works, watch the demo here.
Revamped Input Widget
What's in an input? Turns out, quite a lot! We wanted to improve the capacity of this widget by ensuring there are different kinds of details and types that can be added. Our Input widget now has three different types:
We've got a few more updates for you.
Using HTML on iFrame
The iFrame widgets on Appsmith will now support embedding the HTML code. Just copy your HTML onto the srcDoc property to see the magic.
Updates for OAuth2
We have updated the authentication workflows for OAuth2 and made it generic for all the datasources. The call-to-actions available in forms are now fully customisable depending on the authentication type.
Resolve Errors Faster while working on APIs
Now, while working with APIs you can now see the evaluated value of dynamic fields in the URL, this will help users faster and resolve errors.
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 that is 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.
Designing UI elements can take up a majority of a developer’s time when building from scratch. However, with Appsmith, it’s possible to create a fully functional and custom frontend in minutes. A vast array of pre-built UI components, that is widgets are available to help you build good looking applications. Connecting data sources with Appsmith takes a few minutes, and you can easily build tools on top of the database of your choice. For example, you can build admin panels to manage product catalogues, read content data from your database and use that to populate your e-commerce website, and then write more data and update your existing orders in the database. The possibilities are countless.
In this blog, I will teach you how to build a frontend that can connect to SnowflakeDB as a datasource.
Snowflake is a cloud-based data warehouse-as-a-cloud-service (SaaS for DB) that requires no hardware or software installation. Snowflake handles the maintenance and tuning of cloud infrastructure. It is based on a new SQL database engine with unique features and advantages over a more traditional data warehousing technology approach.
On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including SnowflakeDB; be it on cloud, self-hosted version or local environment.
What we need to make the connection are the endpoint, database name, and user credentials. With this in mind, let’s get started.
Here’s what the configuration would look like:
We are done with the basic configuration. Now, let’s use the default database from SnowflakeDB to build a fully customisable CRUD app.
Note: After the connection is established, we can see all the sample data (tables) under the connected datasource.
Now that we have the sample data, in the next section, let’s build a fully-fledged CRUD application (on the customer table) on top of our SnowflakeDB using Appsmith.
First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:
We now have our query; let's bind this onto the table widget; for this follow the below steps:
With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane.
To add the create operation on SnowflakeDB, let’s make UI.
Drag and drop a button widget onto the canvas. Open its property pane, set the onClick property to Open a New Modal, and choose Create New.
This will open up a new modal now; let’s drag and drop a few widgets to create a form that we can use to add new customers into our database.
Here, we have five input widgets to add our customers. We can configure the default values, labels, and placeholders by selecting the respective property panes. Now, let’s write the query that lets us create a new customer on SnowflakeDB.
Follow the steps below:
Here, we have an insert query that collects all the data from the form widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
Lastly, we’ll need to configure the submit button; for this, go back to the modal and set the button’s onClick property to execute a query and choose insertCustomer under the events property:
The Update operation is quite similar to the create operation. First, let’s build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under the columns property.
Now, rename the column to Edit Customer, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a Button type. When clicked, a modal should open up with the necessary fields to update the item.
Now, copy-paste Modal1, and set the onClick property of the Edit Customer button to open Modal2. Here, in the form, we can also set the default value to show existing information, to display this, use the selectedRow property from the table widget.
Let’s write the Edit query using SQL:
Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
We’ll now need to configure the submit button; for this, go back to Modal2 and set the button’s onClick property to execute a query and choose **_editCustomer_** under the events property.
The delete operation is pretty straightforward with the Table’s selectedRow property; before we dive into it, let’s create a new column on the table and set it to the button. For this:
Now, let’s write the Delete query using SQL:
Set the Delete Character button’s onClick property to run the deleteCharacter query.
With these four operations configured, you will be able to read and analyze information from your database, edit the data, add or delete information and update records.
We’ve got extensive documentation on the SnowflakeDB datasource integration!
If you’re interested in using a database that is 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.
A major pain point around building apps is designing the UI elements. Fortunately, with Appsmith, you create a custom frontend in minutes. Connecting datasources with Appsmith takes a few minutes, and you can easily build tools on top of the database of your choice. For example, you can build admin panels to manage product catalogs, read content data from your database and use that to populate your e-commerce website, and then write more data and update your existing orders in the database. The possibilities are countless.
In this blog, I will teach you how to build a frontend that can connect to ArangoDB as a datasource.
ArangoDB is a free and open-source native multi-model database system developed by ArangoDB GmbH. The database system supports three data models with one database core and a unified query language AQL. Being multi-model, ArangoDB allows you to run ad-hoc queries on data stored in different models.
On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including ArangoDB; be it on cloud, self-hosted version or local environment.
What we need to make the connection are the endpoint, database name, and user credentials. With this in mind, let’s get started.
Here’s how the configuration would look like:
We are done with basic configuration. Now, let’s create a collection on ArangoDb and push some data from Appsmith to the database. For this, you’ll need to open the ArangoDB endpoint and use the graphical user interface (GUI).
Let’s name the collection as ‘Characters’ and set the type as ‘Document’
Now let’s seed the collection with some data on Appsmith.
For this, follow the steps below:
Now that we have our seed data, in the next section, let’s build a fully-fledged CRUD application on top of our ArangoDB using Appsmith.
First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:
We now have our query; let's bind this onto the table widget; for this follow the below steps:
With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane.
To add the create operation on ArangoDB, let’s make UI.
Here, we have three input widgets, a checkbox, and a multi-select widget to add our characters. We can configure the default values, labels and placeholders by selecting the respective property panes. Now, let’s write the query that lets us create a new item on ArangoDB.
Follow the steps below:
Here, we have an insert query that collects all the data from the form widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
Lastly, we’ll need to configure the submit button, for this, go back to the modal and set the button’s onClick property to execute a query and choose insertCharacter under the events property:
The Update operation is quite similar to the create operation.
Let’s write the Edit query using AQL:
Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the moustache syntax to bind the data from the widgets onto the query body.
Next, configure the submit button, for this, go back to Modal2 and set the button’s onClick property to execute a query and choose editCharacter under the events property.
The delete operation is pretty straightforward with the Table’s selectedRow property, before we dive into it, let’s create a new column on the table and set it to the button. For this:
Now, let’s write the Delete query using AQL:
Set the Delete Character button’s onClick property to run the deleteCharacter query.
With these four operations configured, you will be able to read and analyze information from your database, edit the information, add or delete information and update records.
We’ve got extensive documentation on the ArangoDB datasource integration, along with a video explainer.
If you’re interested in using a database that is 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.
GraphQL is a query language for APIs and a server-side runtime for executing queries using the system you define for your data. It provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
Today, developers spend a lot of time building internal applications, dashboards, and admin panels with GraphQL APIs as backend. But guess what? It’s now possible for you to write customizable applications with the ability to quickly prototype and deploy in a few minutes. With Appsmith, a low code app builder, you can build entirely customizable internal tools without spending too much time or effort.
In this blog, I am going to be building an e-commerce order management dashboard.
To build this app, we will connect Appsmith with a GraphQL API and build an interface that will fetch information from a database. We will use Hasura to create, manage, and customize GraphQL APIs.
Hasura is an open-source service that gives you production-grade GraphQL & REST APIs on your data instantly. It allows you to develop and deploy GraphQL APIs in minutes. At the core, Hasura helps you build APIs with a simple to use GraphQL composer and a GraphQL server that is stateless and blazing fast.
By the end of the tutorial, we will have a fully customizable e-commerce order management dashboard! Typically, such dashboards enable the app users to:
Note: We will be using data from Hasura Super App, which can be found here. You can directly migrate the data here to your Hasura instance in just a few steps listed here: Moving from local development to staging and going production with Hasura.
Alternatively, you can connect to the instance we created for you to test and play with GraphQL APIs on Appsmith. These details of the instance are disclosed in the next section :)
All right, let's dive in!
We will be connecting to the Hasura instance via the REST API datasource on Appsmith. For this, we will need the GraphQL API end-point and Admin Secret key from Hasura Dashboard. If you're using your instance, this is how your dashboard looks like, where you can copy the mentioned details.
If you want to know more about the data schema and customize the relations between tables, you can always use Hasura cloud explorer.
Now, let's quickly take a look at all the tables that are available on Hasura Super App Dashboard in brief:
Awesome, now that we had a glance at our tables, let's build the app! First up, we'll need an account on Appsmith Cloud. You can create it here for free if you don't have one. After we log in, we will be redirected to our dashboard to make a new Appsmith; this can be under any organization of your choice.
Now, to connect Hasura APIs, follow the below steps:
https://subtle-platypus-36.hasura.app/v1/graphql
content-type: application/jso
x-hasura-admin-secret: <YOUR_SECRET_KEY>
Now, we can test this GraphQL query by clicking on the RUN button to the top-right of the application; with this, we should see all the products list from the backend in the response body.
Following is the screenshot:
Here, inside the body pane, we write the GraphQL query to fetch all the products; this is similar to how we do it on a regular GraphiQL playground.
Now let's bind this data onto the table widget.
{{ getproducts.data.data.product }}
Doing a simple READ operation using Hasura's GraphQL API is easy now; let's look at how we can do a WRITE operation by building a form on Appsmith. Follow the below steps:
Following is a screenshot of how the form should look like:
Now, update the form names to the following to access them in the query:
You can update the widget names from the property pane by double-clicking on the existing one.
Now, add a new button, update its label to Add Product, and set its onClick property to "Run a query" and choose Create a new API. This will create a new API datasource under the datasources section. Now, follow the below steps to create a new query that lets us post new data onto PostgresDB on Hasura.
https://subtle-platypus-36.hasura.app/v1/graphql
Here, we have an object consisting of a query key that holds the GraphQL query and a variables key with all the variables that need to be posted to the database.
In the query, we have a mutation that lets us modify the server-side data. We'll send the object that references the data querying inside the mutation. The insert_product_one allows us to post one object to the database. Inside this query, we can add the attributes we need to post. Next, we've associated the variables to the object from the created UI input widgets. The .text on the input widget name helps us get the text written inside the input.
That's all, and our query is now ready! We can test this out by opening the form and creating a new product on our e-commerce store.
In this section, we will be showing some statistics on our dashboard; for this, let's drag and drop three stat box widgets onto the canvas. Following is a screenshot of how it looks like:
As we can see, these stat box widgets compute the total products, total categories, and unique brands. The data here is computed directly from the Hasura instance, using JavaScript. Following is how it works:
On the first stat box widget, select the text-widget and paste the following in the Text property:
This small JS code will return the array's length from the getproducts query, displaying the total products.
Similarly, update the other two stat box widgets with the following JS code:
To compute Total Categories, we use an IIFE function and filter the getproducts query using its category_display_name attribute :
To compute Unique Brands, we use an IIFE function and filter the getproducts query using its brand attribute :
There we go; we now have our dashboard up and running! Not just that, Appsmith allows us to create charts on top of Hasura data. Let's learn more about it in the next section.
To get started, let's rename the page as Recent Orders; the idea is to create a chart that shows daily sales. Drag and drop a new chart widget onto the page from the widgets section.
This will show you a column chart with some pre-defined data; let's update this by creating our new query that fetches all the sales data:
This query will return a bit complex JSON; we will see something like:
{ "data": { "order": [ { "order_products": [ { "product": { "order_products": [ { "quantity": 2 } ] }, "created_at": "2021-02-22T18:16:17.776779+00:00" } ] }, … }
Here, order_products are nested in an array; hence, to process this and put it on a chart widget, we create a new JS object, allowing us to write full code on Appsmith and utilize its widgets. Confused? Follow the below steps:
Here, we do a simple ordering using the _.compact method from lodash to aggregate the total number of sales done on a particular date. We return these in a special {x: value, y: value} format, which is accepted by the chart widget.
Now, let's head back to the chart widget and use this JS Object:
Update the series data property with the following:
{{JSObject1.myFun1()}}
Boom! There you go, we have all our sales aggregated based on the date on a beautiful chart widget. Following is how it looks like:
We also extended this app to show all the sales and orders on stat boxes and list widgets. Here's the link to the complete application!
If you liked this tutorial, and are planning to build this, let me know. I’d love to help you make it as complex as you’d like.
Write to me at vihar@appsmith.com.
I recently started investing and came across a product called Smallcase. The way it works is — experts create a diversified long-term portfolio of stocks & ETFs and manage it on a timely basis for you. I really love the idea of how stocks can be added into portfolios or baskets to reduce market volatility. Unfortunately, at the moment, this product is only available for Indian investors and that led me to create an app, where I could create a portfolio, and also create a custom index on top of it, with features to compare benchmarked indices like Dow Jones / S and P.
Building this kind of application from scratch would have taken me a lot of time; I would have had to choose a front-end framework, configure a database, and work on different visualizing frameworks to build time-series charts. With Appsmith, I was able to build this app in just a few hours. If you don’t already know, Appsmith is an open-source low code framework to build internal apps. In this blog, I will take you through the steps I followed to create the app.
First, let me share the specs of the app in a little more detail.
With this application, you can do the following:
In this blog, I will also dive into building some nifty time-series charts and build our stock index tracker that can compare with S&P 500, Dow Jones, and NASDAQ.
Here are a few screenshots of the application:
Now, let’s get started!
TLDR; I’ve used Appsmith, Fusion Charts on Appsmith, APIs from MarketStack, Alphavantage, and Google Sheets as the backend to build this application.
This application primarily uses Appsmith, an open-source low-code tool that can connect to any database, API, or GraphQL to build admin panels, dashboards, and internal tools. Appsmith also supports charting options; it has an in-built extension that uses Fusion Charts to create data visualizations; this made it much easier to build my own time-series charts. To pull all the stock data and prices in real-time, I’ve utilized free APIs from MarketStack and Alphavantage.
(Please remember to generate your own API keys if you’re following this tutorial to build a similar app! To know more about generating your own API keys, read this blog)
I’ve used Google Sheets as my backend to watchlist stocks and store customized stock portfolios and baskets.
The first step to creating portfolios, or as I like to call them, “baskets,” is to build a user interface. Through this, a form can take in our portfolio name, time created, and a logo for easy viewing… and some vanity! 😎
It took me less than 5 minutes to create this with Appsmith and Google Sheets; here’s how I did it:
Note: I’ve used the Cloud Version (Community Edition, which is free) of Appsmith; you can build this either on a local version using Docker or a self-hosted version of Appsmith.
Basket Name
Basket Image URL
Basket Create On
With this, our query is ready. Next, to build UI on Appsmith, you can just drag and drop widgets from the library on the right side of the screen. Appsmith’s canvas is quite responsive, and you can even drag widgets between two other widgets, and it will auto-resize, saving you valuable time! I added a container widget so that our app looks unified; we even have an option to add colors to this if we want to stylize the background a little more. I then dropped a text widget to set the app’s name and a button widget.
Here’s how it looks:
Neat, yeah?
Next, since we want there to be a form to create new baskets, we should get the button to open a modal. To do this, click the settings icon on the button widget to see the property pane.
Property pane is where we can configure all the properties of the widgets. You can open this, by simply clicking on the widget, and you’ll see it docked on the right sidebar, just as shown in the above screenshot.
We need to update the onClick property of the button and set it to open a new modal. You can create it there or drag and drop a modal widget onto the canvas. Both options work. You do you.
Next, we need three types of inputs for the form, so I added three input widgets to this modal. You can set the labels as follows:
Basket Name
Basket Image URL
Basket Create On
Here’s a Loom on how it looks like:
Things look in great shape so far, in order to be able to track the index of the portfolios based on created time, I thought it was best to use a pre-installed library on Appsmith since it’s not possible to track this manually. I used moment.js to do this.
We can set the Basket Created On default value to:
This will save time when the portfolio is created.
On Appmsith, we can write JS anywhere across the platform to add customization using the moustache {{ }} bindings. It also comes with the moment.js library; hence, calling the function will save time when these portfolios are created.
Lastly, I opened the buttons property-pane and set the onClick property to run a query and choose addBasket query.
With this, my UI is all set; lastly, I went back to addBasket query and set the Row Object to the following:
Note that we will be collecting the values from the Input widgets and passing them to the Google Sheets via the addBasket query.
Next, to display all our baskets on this page, we need to create a new API. I created another one called getBasket, from the Google Sheets datasource. I updated the query method to Fetch sheet row list everything from the excel sheet. Here’s a screenshot:
Next, we have to bind our queries to the UI widgets. This part can be done like this:
This is how it looks now:
Here’s what we’ve been able to do till now:
Now, we will work on adding stocks inside these portfolios. For this, it would be best to create a new page to search for stocks and add them to baskets.
Let’s create a new page; you can choose the option on the left sidebar and name it as ‘Basket Page’. The idea is to redirect to this page from Page1 and filter all the stocks present in the basket.
But how do we filter stocks? Usually, we do on a regular backed to consider an id and filter based on it. Similarly, on Appsmith, while navigating to Basket Page, I stored the value of the basket page to filter and display data on the Basket page.
I can use the code snippet I mentioned below on a new button widget placed on the list widget. So, when clicked, it should save the selected item on the list, redirect to the basket page, and filter accordingly.
We need to the button’s onClick property to:
Here, we need to use the storeValue from Appsmith to store the basket name in a variable named selectedBasket, the List1.selectedItem copies the data from the selected list item.
Next, we need to use the navigateTo function to redirect to a new page.
Before we add any stocks into our portfolios, we’ll have to ensure that this page filters my stocks according to the selected basked from page one. So let’s add a container and a text widget to display the Basket name.
Note that this value comes from the global store, so on the Text property from Text widget’s property pane, we will have to bind value from the Appsmith store, and this can be done with a simple line:
{{appsmith.store.selectedBasket}}
Alright, the next cool feature for us to add is a search function. This way, we can easily search for stocks and add them to baskets; for this, we need to add another button and modal with the following fields:
The table widget definitely deserves high praise. It allows us to add filters and sort results. We can add relevant stocks based on where they are listed on. For example, I could simply search NASDAQ, which filters stocks listed there. If you want to know everything that you can do with a table widget, you’ve got to check out this detailed blog.
Before I tell you how I built this, here is how it looks like:
The search feature works with a simple API from Stockdata, to integrate this, I followed the following steps:
https://api.stockdata.org/v1/entity/search?search={{stockcode.text}}&api_token=YOUR_API_HERE
To get this working, make sure you add API token from Stockcode here. Please note that I use moustache bindings here. This adds the values I’m searching for from the input widget dynamically. Now, let’s head back to the modal and update the names of the widgets.
I renamed the widget names to the following, to make it easy while pushing data onto sheets:
Input Widget: stockcode
Table Widget: stockSearchTable
Now, the search API takes the value from the input widget, and on the table widget, we can bind the results from the API for the following functionalities:
Next, we want to select which basket we want to add the searched stock to; for this, I just copied my API (getBaskets) from Page1, and bound it onto the selected widget with the following code:
Last, we need to save all this information onto a Google Sheet, so let’s create a new spreadsheet under the same Google Sheet and create a new API from the connected data source. I named this sheet Watchlisted Stocks and named the query addtoBasket.
These are the columns I have on my Google Sheet:
symbol
name
type
exchange
exchange_long
mic_code
country
watch_listed_on
basket
Now, on the query to collect all this information, we have to update the Row Object to the following:
With this last step, our watchlist will be ready. However, in order to show it on the page, we have to add a new table widget. Wait, I still had to pull all the watchlisted stocks from the google sheets. This is pretty straightforward, I create a new query from the GSheets datasource, set the method to Fetch Sheets Row, copy my GSheets URL, and update my Sheet Name to Watchlisted Stocks.
Now, we have to bind it on the new table widget, but here, it should only filter stocks that are added to this basket or portfolio, I do this by using a simple transforming when binding using the following code snippet:
As you can see, we’re now filtering our stocks based on the selectedBasket value from the Appsmith store that we saved while redirecting!
We now have all the portfolios and stocks ready.
Now it’s time for data visualization!
As mentioned, Appsmith’s chart widget comes with the Fusion Chart configuration, which makes it much easier to build time-series charts. The other thing I love about this is, I can even create candlestick charts for the stocks I watchlisted inside the application. These charts are used by traders to determine possible price movement based on past patterns.
First, let me show you how to fetch details of all the stock prices, using the MarketStack API:
http://api.marketstack.com/v1/eod?access_key=YOUR_API_KEY&symbols={{appsmith.store.current}}&date_from=2021-11-01&date_to=2021-12-12
Note: I’m filtering the data from 2020–11–01 to 2021–12–12, you can update this API accordingly based on your requirements.
In the API, as you can see, I have added an Appsmith store variable named current; this is to dynamically fetch the stock prices of the symbol or stock we wanted to analyze or add to our tracker.
Now, we need to write a code snippet under JS Objects, that stores all the data for all the stocks that are there inside my portfolio.
This is what I’ve used:
Here is what this code snippet does:
To create a time series chart, we need to drag and drop a new chart widget onto the canvas, below the table widget.
This is how it looks like:
It comes with a default configuration, so we will have to change the type to a Custom Chart to configure our data onto this. We will need to follow a particular format in order to do this. Here’s the basic config for Fusion Charts:
Here, we need to pass in three parameters, the chart configuration, data, and the categories that need to be displayed on the x-axis. Here’s the updated code:
Finally, this is how our graph will look like with the aforementioned configurations:
Additionally, I also created a list, that tells us the index value with simple math:
Imagine having your own custom app terminal to track all your stock indexes in one place. If you’re into crypto, you can extend this app to even have a crypto tracker.
I hope that you had success following this tutorial and building your own app. If you got stuck somewhere, I’d be happy to help you out :)
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
Happy New Year! I am back again with a quick roundup of all the things we did in the last month of 2021! We shipped many features, fixed bugs, and hosted some fun events with our community.
The Property Pane in Appsmith is a crucial part of the developer application building experience. It allows us to configure widgets’ data, actions, and events. Previously, this property pane would float around the application, next to the widget in use. We felt that this interface was rather cumbersome, especially when the number of widgets increased on the canvas. We re-invented the entire developer experience and came up with the new docked property pane. With this, users will have a clear view of what’s happening on the canvas while dropping widgets and will have complete control over customizing them on the docked property pane, which is fixed on the right side of the application.
You asked for this, and we shipped it as soon as we could! 😎 Appsmith now has an in-built SMTP plugin to send emails from the applications without using third-party applications. The email service provider of choice can be selected from DropBox, Google, Outlook, etc. An email template can also be customized for the developers’ branding needs.
The SMTP datasource expects the Email configuration to add the Host Address and Port and the authentication details. In the example above (refer to the screenshot), I used my Gmail credentials. After this, you can create different queries to send emails from the plugin based on your requirements and use cases! Cool right? Here’s a screenshot of how the query can be customized:
Tip: To make all the data dynamic, you can use dynamic bindings {{ }} anywhere across these fields. Thank me later :)
We are kicked about shipping widgets every month! It’s kind of like an unsaid rule to ship new widgets every month! Hah! In December, we added two new ones: a new document viewer widget and a switch group widget to our list.
Document Viewer Widget: The document viewer widget on Appsmith allows you to add PDFs inside the application. All you need to do is populate the URL of the document link property. These can be added from any datasource in which the incoming data points to a URL.
The widget currently supports the following extensions:
Switch Group Widget: The new switch group widget captures user inputs from a set of binary choices. These options can be populated from a data source like an API / Query by transforming the incoming data to an array of (label, value).
If you’re working with maps and geo-location, we got some good news! With our new in-built geolocation APIs, you can request current user locations, and associated information This API is stored as an object containing functions to request the current user location and the coordination received from the Mozilla Geo Location API request.
To use this in action, you can simply run {{appsmith.geolocation.getCurrentPosition()}} on a button click on any action call. As soon as the API is called, the location and the timestamp will be updated on the appsmith local store variable:
{{appsmith.geolocation.currentPosition}}
Upgrades to AWS AMI: We refactored the first-time install script of AWS AMI deployment to fetch a new docker-compose.yml that uses a new Docker image. With this, self-hosting Appsmith with AWS-AMI is faster and smoother than ever.
Read more about this in our documentation here, and also on the AWS AMI marketplace.
Upgrades to DigitalOcean Droplet: We published a brand new DigitalOcean machine image that is easier to maintain. This image supports the new build snapshot on DigitalOcean to use the fat container deployment.
Find documentation here, and on Digitalocean marketplace here.
We also shipped a new admin settings page, where you can configure all the settings on self-hosted instances/local environments when running with Docker.
You can access these by clicking on the profile icon and then selecting the Admin Settings. You’ll see the following options:
We've got a host of other bug fixes and updates too, be sure to check out our consolidated release notes here.
See you next month with more updates! Do join us on Discord, follow us on Twitter, Youtube, and Linkedin to stay up to date.
PostgresDB is an open-source database that uses and extends the SQL language. It’s used widely across many organizations to build a variety of apps. Developers tend to love and prefer PostgresDB for its simplicity and extensibility. Postgres Admin (PgAdmin) has a neat interface for accessing any Postgres instance from any device with a web browser. It allows administrators to carry out tasks like managing user accounts, databases, clusters, and more.
However, PgAdmin has a few biting downsides; here are a few:
I think these are problems that can be dealt with if there was just a better user experience. I set out to build a new version of the PgAdmin! And I did this in under a few minutes. In this blog, I will tell you how I did this.
But, I have to say, cloning the PgAdmin app is not an easy task; there are multiple challenges here, as we have to implement several functionalities. With a fully functional PgAdmin app, we should be able to:
Doing all this in under minutes is an impossible task if we have to code things from scratch, so we will be using a low code platform like Appsmith. Using Appsmith to build internal applications is super fun; we can connect to any data source, write queries, and build UI 10x faster than usual. This is entirely web-based; depending on the preference, we either self-host this on any server or simple use the community cloud edition.
It took us less than an hour to build this, as Appsmith comes with a Postgres data source integration. With this, we can run any PG query and use it anywhere across the application using dynamic JS bindings. We will talk more about the features of the application in the following sections; before that, here is a sneak peek of how the application looks:
The application has two pages, one for managing tables (Table Manager) and another for testing and running queries (Query Executor). Now, let’s deep dive into each of these tables, and talk a bit more about their functionalities.
On the table manager, you can find all the tables from the connected PG data source. It offers all the functionalities that a PgAdmin does; you can create, read, update and delete these tables on this admin panel. Performing these CRUD operations on tables is pretty straightforward on Appsmith. Additionally, you can filter the tables based on the schema and update them whenever needed.
When you click any table name (select a row) from the table widget, you’ll see a new container on the right, where we display the three essentials:
Using these three features, we can manage the column properties and add different relations between them. We’ll talk a bit more about this in the next sections.
This is the second feature of our Appsmith PGAdmin. Here, we can execute any queries.
Our auto-complete and slash commands feature will make it much easier to test queries in real-time. For building this, we’ve used the RichText Editor widget on Appsmith; whenever we execute the query, we display all the responses on the table widget. However, this can be customized within minutes based on different use-cases.
In this section, we’ll talk about the different functionalities provided by the Appsmith PgAdmin with a few examples. We’ll also deep dive into some of the queries that were used on Appsmith to implement the functionality.
To see this in action, you will need to switch data sources on Appsmith. For this, you can connect your PG database by clicking on the + icon next to the Datasources section. Next, on every query we will see the data source it’s connected to. Here, we can switch the data source by selecting it in the data source dropdown.
Managing Tables: When working with databases, we often need to configure names, schemas, on Appsmith PgAdmin. Doing this is super easy on Appsmith! As soon as you open the PgAdmin, you will see the list of all the tables on the table widget. To see their configuration, we can simply select any row, as soon as it’s selected, we’ll see a new container on the right, where we can configure the entire table details. Here’s a screenshot:
As we can see, on the right, when a table is selected, we can see all the details under the general tab. We can also delete a particular table by clicking on the delete button inside the table. This is done by adding a custom column on the table widget and setting the column type to a button. If you prefer modals, then you can configure tables to show modals where we can update the necessary details.
Configuring Columns in Table: To manage columns inside the table, select the table and navigate to the Columns tab inside the container on the right.
Here, we will see a list widget, which has all the details from the selected table. We can edit the data type and also the column names, using the interface that we’ve created on the list widget. In case, you want to delete a particular column you can use the delete button that’s present on the list item. Additionally, you can toggle the not-null option to set the ‘accept null values’ for individual attributes.
Here’s a GIF:
In the list above, we only see the data types from the table columns; to add constraints such as foreign keys, we can simply navigate to the constraints tab and add or configure the attributes.
With this, our custom PgAdmin is ready for use. We use this application for internal processes like managing our Postgres instances. We definitely find it faster than the native PgAdmin app, and it’s definitely nicer to look at!
If you want to build any admin panel, you can do it with Appsmith. We’ve got all the popular database integrations, and this list is growing! Do join our growing community on Discord for more tips, and tricks on how to make the most out of Appsmith.
It's time for a quick look back on all the stuff that we did in the last 30 days! You know we like to work hard! 😎 We shipped many features, fixed bugs, and hosted some fun events with our community.
We've always strived to be a developer first product, so this is an emotional moment for us on our journey to becoming bigger and better. While it's possible to write JS on Appsmith in the small input boxes on the property pane, as fellow developers building a developer-first product, we know all too well the challenges that come with such an experience. Especially when writing vast chunks of code for transformations, logic, and action-based workflows. So we shipped out a full-fledged JS editor on Appsmith. Here's a quick sneak peek of our all-new JS Editor:
Users can now write full-fledged JS objects to create functions and variables across Appsmith and re-use them. Building this new module was challenging and involved multiple iterations, designs, and vigorous testing. The JS Editor is currently a beta feature, and we can't wait for everyone to use it soon!
Read this blog if you'd like to know more about this feature and why we built it.
New Button Groups Widget: Button Groups is the latest addition to the Appsmith widget family! The buttons are no longer alone on Appsmith. With this new widget, you can create simple buttons or menu buttons with drop-down items. This widget can come in handy when you require a header or perform specific actions on various button clicks. Of course, this widget is also heavily customizable; you can add different styles, add icons, and provide other options under a menu. To find out more about all the things you can do with it, check out the documentation!
Make All Apps Beautiful Again: At Appsmith, we work very hard to provide the best developer experience while building their internal applications with our platform. This month, we had spent a lot of time making things look much better and consistent; these could be minor changes like updating font sizes, increasing paddings, having consistent background colours, etc. But for us, everything matters, and every widget is treated with equal importance; these are consistent, feature-rich, and are tested thoroughly.
SPELING mistakes? We'll Check It! : Even the mighty have fallen with just one spelling error! Our input widget is now loaded with a new superpower! Now it can detect spelling mistakes while in Editor Mode and Preview Mode. This is all thanks to Mozilla's HTML API! To use this, be sure to toggle the Spellcheck property on the input widget.
Fixed Issue on selectedRow property while a: First up, we had fixed a small glitch for the selectedRow property on the Table Widget while using the multi-select row option. Now, the selectedRow property considers the last selected row to be its selection while selecting multiple rows on your Table Widget.
More accurate and faster pagination on Table Widget: While binding significant responses on table widgets, our new performance upgrades will make the pagination experience smoother and faster. Not just that, we fixed all bugs that led to displaying the wrong page numbers.
No More Additional Region Configuration on S3: Currently, we have a region selector in S3 data sources, and the bucket is selected in S3 queries. This is very confusing since our query fails if we selected region-A in the datasource and it turns out our bucket is in region-B. The mental model breaks here because S3 buckets can ever belong to one and only one region. We have shipped a new feature that automatically detects the region from our service provider to avoid this!
Better Embedding Experience: While embedding Appsmith applications on the web, you can use the embed=true parameter to remove the Appsmith header. However, while navigating through pages inside the embed, the navbar comes back again! The embed=true parameter has now been retained with our latest upgrade. With this, hiding the Appsmith header on embeds can be done in a matter of seconds!
Generate Page Feature for S3: The one-click generate page feature is an awesome feature on Appsmith! With this feature, you can build a CRUD application within a single click by selecting a particular table on the datasource. Now, we have extended support for the S3 datasource to generate CRUD pages on Appsmith. You can now view and select buckets you'd like to create a CRUD page with this.
Dynamic Inputs in the URL field: Managing an entire fleet of Google Sheets? Don't worry; we got you covered. While working with Google Sheets integrations on Appsmith, you can dynamically pass the Sheet ID on the URL property. You can manage multiple Google sheets and perform operations like read/update at runtime with this. Super cool, right? Do check it out and let us know your thoughts!
By the way, I wasn't kidding when I said we were working hard. This blog isn't finished yet. Next up, I'll talk about cool new educational resources and collaborations!
We've published some cool tutorials and videos and hosted a few fun events!
One last thing, we were able to pull off an incredible event with our friends at Appwrite! Appsmith and Appwrite make an amazing open-source duo for business applications. We built an excellent authenticated dashboard to manage a database with Appsmith as frontend and Appwrite as backend.
Thanks to Matej from Appwrite and Confidence from our team, who successfully built everything live. We thank the entire community for all the positive responses and feedback!
We've got a host of other bug fixes and updates too, be sure to check out our release notes here.
See you next month with more updates! Do join us on Discord, follow us on Twitter, Youtube, and Linkedin to stay up to date.
What’s better than some space? More space. We’ve cleared out the clutter and developed a brand new full-fledged code editor to make the coding experience on Appsmith smooth like butter. Our Github repository is home to many feature requests, and whenever we ship out a new feature, it’s cause for a mini celebration 🎉.
JS editor is one such feature that was in the making for a while. This new feature enables users to write reusable JavaScript variables and functions as JS Objects. These JS Objects can be used anywhere across the Appsmith platform using the moustache bindings.
In this blog post, we will discuss our efforts to ship this much-needed feature and how you can get the most out of it.
Appsmith is one of the most loved open-source internal tool builders for developers. Today Appsmith sits with ~9000 stars on GitHub. We are proud of the love we receive from the community. One of the main reasons for Appsmith's success is the simplicity and customization it provides while building internal tools. We can use JavaScript anywhere on the platform to handle bindings, transformations, actions, workflows, and many more using the moustache syntax. However, all this had to be done in the small input boxes on Appsmith's property pane. This was somewhat cumbersome, especially when writing larger blocks of code. Here’s a screenshot to show you how things used to be:
It’s hard for any developer to write code on this small property pane, and code reusability was also not possible. However, the input editor on the property pane still served its purpose well, with its excellent auto-complete, slash commands, linting, and debugging features. However, we take developer experience seriously and constantly work towards improving it.
Our primary goal was to create a full-fledged code editor to help developers write JavaScript with access to all the supported libraries without any distractions. To achieve this goal, we broke down this problem into three ideas:
We began the shipping process for the JS Editor around mid-July 2021. As strong proponents of building in public, we posted all the design previews, issues, ideas on our community channels and took community feedback into account while making this feature.
Appsmith has a highly modular code-base, so adding new widgets, integrations, and custom styles are easy. But, for a new feature like the JS editor, things needed to be stitched from scratch. Our engineers and product folk brainstormed multiple times before getting started on it to ship a scalable solution around this.
Here are a few thinking points that we started with:
This would enable us to create a robust feature that everyone would love and give the same freedom as any standard coding framework.
Appsmith's JS editor is quick and easy to use, and it lets you create objects with a single click. Just open the application, search for JS Objects from the entity explorer (left sidebar), and click on the + icon. We will be navigated to a new file, as shown in the screenshot here:
Here, myVar1, myVar2 are two variables, and myFun1, myFun2 are two functions defined in the JS Object which are exposed in default export. Currently, we don’t support exposing functions using named exports. Now, let’s define a new random variable and try to access it onto a widget, for this, update the Code contents of JSObject1 to the following:
To test this function, use the run icon from the appsmith console below:
And voila! Just like that, we should see our output; in case of errors, the console will return all the instructions options that will help you debug the issue.
Now, click on the + icon next to widgets and drop a new text widget onto the canvas. Open the property pane of the text widget by clicking on the widget name, and update the text property to the following:
Now click the + icon next to widgets and add a new text widget onto the canvas. Open up the property pane of that new text widget by clicking on its name and updating the Text property to:
With this, we should be able to see a new random number bound onto the text widget:
The next question that comes to mind is, what if there's an error in the JS object's code? Does it work the same as a JS compiler does? The answer is yes! If you make a mistake in JavaScript syntax while writing your code, the JavaScript Editor will highlight the error using a red-colored lint below the possible position of the error. Here’s a screenshot for reference:
Not just that, we can see all the logs; we can also see the history of each update and execution of your function under the Logs tab.
Following are a few features, we will be extending to the JS Editor, keep an eye our, or join us on Discord to stay up to date :)
We hope you’re as excited about the JS editor as we are. If you’d like to give feedback on this feature or have a say in the roadmap, join the Betasmith program today.
Thanks to Apeksha, Hetu, Ajinkya, Nidhi, Parth, Aakash, Saptami, Prappula, Nikhil, who worked hard on shipping this feature out!
Automation has become the ‘it’ thing in the world of business. The need for organizations to cut costs has forced them to improve internal processes to provide improved service while also conserving time. Unfortunately, it's not always easy for teams to streamline everything internally because they often seem like complicated processes - but there are ways around this. Using Appsmith, developing internal tools can cut costs, time and even improve your workflow by connecting services across specialized platforms with Zapier.
Zapier has thousands of apps and services that can meet almost all your business automation needs. Integrating Appsmith into the mix opens up a whole new dimension. In this way, you'll have a more efficient system in which you can connect anything from, say, a MailChimp email campaign to a Google form with data from your ERP or CRM systems delivered within the app!
In this blog, we will be looking at adding automation to Appsmith applications using Zapier.
Let’s get started!
Appsmith is a powerful platform to build admin panels, dashboards, crud apps, and internal tools. It allows us to create these applications with little to no coding required. We can build apps that integrate with just about any service you can think of. Today, Appsmith has more than 15+ data source integrations; a few popular ones include Postgres, MongoDB, Google Sheets. That's one of the best things about Appsmith -- it's completely customizable. But if you want to build apps with Appsmith, you will likely be doing some coding in JavaScript. Yes, we can use JS anywhere across the Appsmith applications to bind, transform and create actions to the data. In terms of UI, Appsmith provides more than 25 widgets with a wide range of styling options. While it's not hard to use Appsmith to build apps, you will need to start building them to get to the next level with Appsmith.
Now, let’s build a simple newsletter application that can help collect contacts from Appsmith and send Emails using Sendinblue via Zapier.
The idea of our newsletter is to collect emails from users and to maintain campaigns on Appsmith. Let’s get started by following the below steps:
Excellent, our UI is now ready; let’s create a new Zapier workflow to connect to SendInBlue and manage our newsletter.
Excellent, our UI is now ready; let’s create a new Zapier workflow that can connect to SendInBlue and manage our newsletter.
Webhooks are essentially a way to create a communication channel. It allows you to listen to an event and run a command or take any action you want. Here, the event will be triggered by an API call from Appsmith.
With this, whenever a new user subscribes to the Newsletter, he receives a confirmation Email and will be added to the contact list on Sendinblue.
And just like that, we could configure and build an entire Newsletter manager without writing code. This application can be extended in multiple ways, such as creating new email campaigns, filtering contacts, blocking users, and many more! The entire demo app of this tutorial can be found here. This is just one example of how you can automate your apps on Appsmith!
We hope that you will have a better idea of how to leverage automation in your Appsmith applications. For more information on automating your Appsmith applications, please contact me anytime at vihar@appsmith.com.
Developers spend quite a bit of time building internal tools, admin panels, and applications for back-office tasks that help automate everyday essential business processes. These involve multiple efforts, from maintaining a special database to writing lots of frontend and backend code. But, what if we told you that you could utilize a modern stack to build such applications that can help with your backend, frontend and automation tasks? Sounds good right? It is!
We’re happy to introduce a great new stack to build applications: The Supabase, Appsmith and n8n stack (SAN Stack) for developers to build and maintain modern custom internal tools.
SAN stands for Supabase, Appsmith and n8n, after the three emerging and notable software that makes up the stack.
Supabase: The open-source firebase alternative to creating a backend in minutes. Start your project with a Postgres database, authentication, instant APIs, real-time subscriptions and storage.
Appsmith: An open-source framework to build custom business software with pre-built UI widgets that connect to any data source, and can be controlled extensively using JavaScript.
n8n: An extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your custom functions, logic and apps.
This stack lets you build any application within minutes. You can use Supabase for the database and backend, Appsmith for UI and adding functionality, and n8n for automating background tasks.
One of Appsmith’s co-founders and head of product, Nikhil Nandagopal broke down the basics of app building into three steps.
This has gained quite some traction among developers, especially those looking to build internal tools or applications.
There are so many tools and applications that can be built across the SAN stack. Here are a couple of examples: An Employee Survey Dashboard and a Ticket Management Admin panel.
Using the SAN stack, you can build any dashboard in just minutes.
As an example, I will show you how to create a support dashboard manager application.
Using this application:
Let's get started!
The first step is to set up the backend for the application; for this, we will be using a Postgres database on Supabase.
The DB is now set up; let's use Appsmith to connect this PostgresDB and build UI for the application. For this, we might need to note down the connection info from project settings on Supabase. Following is how it looks like:
Our backend is ready; now, let's connect it to Appsmith to build UI and add functionalities. Follow the below steps:
Awesome, we now have established a connection to our data source. Next, let’s build UI using widgets on Appsmith.
On Appsmith, we can use moustache bindings anywhere across the app to bind data or write javascript code to customize and add functionalities to your widgets.
Fantastic, we should be able to see all the tickets assigned to the specific user! It’s that’s simple to write custom JS to configure our internal applications on Appsmith. Now let’s use a webhook and build automation that sends Emails from the ticket using n8n!
If you want to build an internal tool that requires sending emails, then n8n is the way to go. n8n is a tool that can be used to automate workflows between your favorite web apps (such as Slack, Google Drive, Dropbox, etc.). However, n8n can be used to connect almost any two web apps that you use. Now, let's create a workflow and use a webhook to send requests to n8n from Appsmith.
Awesome, now that we have the Webhook, let’s connect it with Appsmith by adding it as a data source.
And just like that, we should be able to send Emails using n8n without writing any piece of code.
Building this app from scratch, including writing snippets of code, is likely to take 30 minutes! Isn’t that fast?
If you're looking for a modern approach to building internal applications, check out Supabase, Appsmith, and n8n! These tools are straightforward, powerful, and can help you build apps faster than ever. So what are you waiting for? Start building your next internal app today.
We’re back again this month with updates from the last 30 days. We like to work hard! We’ve shipped many features, fixed bugs, and launched Hacktoberfest with a series of fun events. You can check them out here.
#1 Menu Buttons on Table Widget
Tables on Appsmith are one of the most loved widgets, and yes, we’ve upgraded them again! We can use menu buttons inside the table widget on any particular column to create menus and customize them. Open the column settings from the table’s property pane and set the column type to the menu button to see them in action! And just like that, we should be able to see a menu button on our table. Additionally, you can add more items to this by configuring the Menu Items property. That’s not all, and you can further customize the items to have icons, border radius, box shadows, and more!
#2 A New Sparkling White UI
Notice anything new? Yes, we have improved our whole design system to help developers focus more on their application editing on Appsmith. Right from searching through apps on the dashboard to building them using queries and widgets, everything is white!
#3 Option to Hide/Unhide Properties from Property Pane
At Appsmith, we consistently focus on adding new properties and features to widgets, and sometimes it can get a bit overwhelming to see all of these at the same time! To make it less cumbersome, we’ve added an option to hide and unhide a few properties. Developers can concentrate on what’s important. To use this feature, toggle the dropdown arrow inside the property pane. You will see an option to collapse the various options within the pane. For example, in the picture below, only the header option has been made visible.
You can bid goodbye to refresh buttons! Developers had to use refresh buttons on Appsmith Appsmith to be able tore-run the queries. We recognized this pain point. Now there’s a cool new feature to periodically run APIs and DB queries. You can configure these by using the setInterval and clearInterval functions!
The setInterval function executes a trigger callback at a given interval. Here’s how you can use it while dynamically binding queries onto widgets:
The clearInterval function stops executing the trigger callback started with the setInterval method.
#1 Helm Chart Support
Helm charts are now added for Appsmith deployments on Kubernetes deployments. These include application deployments with basic default support. Additionally, developers can add custom configuration for persistent volume data, custom ingress controller and secure with TLS certificate
#2 Support for Deploying Appsmith on ARM Architecture
Previously, many developers had reported issues regarding docker-based installation of Appsmith on ARM architectures. Now, we had rectified them and had added extensive support for M1 MacBook users. Following are the changes that we made to the scripts for docker installation:
We have improved the debugging experience by adding hint and errors messages for different cases when working on queries and binding them onto widgets. To make these messages more efficient, we added a new attribute named readableError to the ActionExecutionResult object, returned to the client post after actions are executed. With this, we should be able to understand and solve complex errors quickly. Not just that, we have seen many APIs failing because of using duplicate headers or query parameters, so we have added a few hint messages to help you debug faster.
We’ve got a host of other bug fixes and updates too, be sure to check out our release notes here.
See you next month with more updates! Do follow us on Twitter, Youtube, and Linkedin to stay up to date.
Every job has a set of critical and essential tasks that can feel mundane to execute. As a developer advocate, I love talking to developers and new users and helping them out on their journey with Appsmith. While I am busy doing this work, some tasks often slip into the basket of “I’ll get to it soon.” These tasks often include pushing out information about our new content in specific channels on Discord. This is crucial work and helps us, but it gets deprioritized when there are many other things to do. For social media, a tool like Hootsuite has been a game-changer for us. We also built our custom social media scheduler with Appsmith and automated it using n8n. We also wanted to solve this for our community on Discord. And that’s when we came up with our comprehensive push messaging system, which automatically pulls up content from various channels like our blogs, Twitter handle, and Luma events. We can just share it with users on our Discord server in just one click!
The Discord Message Pusher has been an excellent internal tool for us; the entire content and marketing team uses it, and guess what? No more pending tasks on our to-do lists! In this blog, I am going to discuss the steps involved in building this application on Appsmith. And hopefully, like me, you can make a customizable internal tool for your content team.
Let’s start!
In the first step, we will be creating a new application on Appsmith and integrating it with different data sources like Twitter, Youtube (YT), and Webflow. We’ll be using APIs to fetch all the information and render them on the Appsmith widgets. First, let’s set up a new application to get started!
Fantastic, the app is now set up, now let’s fetch all the information from a particular YT channel and render them onto a list widget.
In this step, we’ll be connecting to YouTube using APIs. Appsmith provides an easy-to-use IDE-based environment to connect to APIs and configure them. Now follow the below steps to fetch all the Youtube video links and their information.
We now have all the videos on Appsmith Youtube Channel (Appsmith YT ID: UCMYwzPG2txS8nR5ZbNY6T5g). Now, let’s use this query to render all the information on the application by following the below steps:
> The tabs widget allows us to create different navigation tabs. We’re using this as it’s more suitable for adding navigation between social platforms.
Listing all the Youtube Information to List Widget
We have our tabs ready. We’ll display all the videos from the Appsmith channel to the List Widget under the Youtube tab. Follow the below steps:
Image Widget Value : {{currentItem.snippet.thumbnails.high.url}}
Text Widget 1 Value: {{currentItem.snippet.title}}
Text Widget 2 Value: {{moment(currentItem.snippet.publishedAt).format("LL")}}
Text Widget 3 Value:
Here, we’re accessing the currentItem, which evaluates the element in the list values. On the first text widget, we’re displaying the Title of the Youtube Video; the second widget corresponds to the time it was published. On Appsmith, we can use moment to display the DateTime field in the necessary format. Cool right? Lastly, we display the YT video URL and add the id to the end of the URL.
Here's how the list widget looks like:
Excellent, next. Let’s learn how to push messages from Appsmith to Discord. Follow these steps:
Here, in the code snippet, we have a default message; this will help us push it directly to Discord. Also, we’re accessing the title and youtube video id from the list widget. Therefore whenever a new list item is clicked; the message automatically gets an update for you.
Let’s now use a Webhook to push these messages on a discord channel. For this, you’ll need a discord server and a dedicated channel.
Now follow these steps:
Awesome! When you choose or select a video from the list widget, the message automatically updates from the default value and will be pushed to the discord channel.
This part is almost similar to how we’ve listed all the videos from Youtube and drafted a custom message; the only thing that changes is the data source. Instead of YouTube, we’ll be using the Twitter API.
Now, let’s copy-paste all the widgets from the YouTube tab to the Twitter tab; for this, select the YouTube tab, hit CTRL/CMD + A, CTRL/CMD + C, open the Twitter tab, and hit CTRL/CMD + V. This will copy the list widget, the buttons, and the inputs.
Just like that, all our widgets will be copied to the tab. Now, let’s add the functionality to fetch all the tweets and push them to the Discord channel by following the below steps:
Following is the screenshot:
Now let’s update the widget properties.
To show all the tweets on a list widget, open the property pane and set the Items value to {{getTwitterData.data.data}}. Next, add two text widgets to the list widget and set the Text Value to the following:
Text Widget One: Tweet ID {{currentItem.id}}
Text Widget Two: {{currentItem.text}}
On the right, in the Discord Push Message Input placeholder to following:
This is how the application looks like now:
With this, we should be able to schedule/push our social posts from Appsmith to Discord. In case if you’re using other services like Webflow, you can utilize APIs to fetch objects from CMS and use the same template. Building this app from scratch, including writing snippets of code, is likely to take 30 minutes! Isn’t that fast?
If you liked this tutorial, and are planning to build this, let me know. I’d love to help you make it as complex as you’d like.
Write to me at vihar@appsmith.com.
Building an app on Appsmith is great fun. Why? Because it takes minutes to build a clean and consistent UI, and less than a few hours to make data connections. We might be tooting our own horn, but what we love about Appsmith (ask our in house devs!) is that we can use JavaScript anywhere on the platform to add additional transformations, functionalities, and actions using the moustache syntax. We’re aware that not everyone is a JavaScript enthusiast, everyone prefers a language of their choice! So we’ve come up with our new feature: “JS Snippets.” With this, you can get some help with writing JavaScript inside Appsmith. In this blog, I will tell you how we made this feature and how you can use it!
We often see many questions in our community forums and discord channels seeking help with binding nested APIs, write data transformations, configure chained actions. Hence, we thought of building a library of snippets inside Appsmith applications that you can use directly and customize based on your data source.
Initially, we thought of the issue in a straightforward way, but at Appsmith, we always like to go the extra mile. So, we brainstormed this idea multiple times and decided to extend it to customize and add snippets particular to widgets and data sources. But, in order to do this kind of customization, we need a database application that validates and filters these snippets. So we built an internal Appsmith app that manages all the JS Snippets. This is how the application looks like:
Here, as we can see, on the left, we see a list of all the available snippets today. When these are clicked, we will see the details of the snippet and have options to verify it and publish it live directly to the JS Snippets library.
To customise these snippets, we define three formats for each of them.
Here’s an example of how we ideated customizable JS snippet using these three forms for merging two queries in a table:
Snippet:
Args:
Here’s a screenshot of how the snippet is rendered on Appsmith:
Users can now directly copy this snippet onto the widget, or customize the arguments, test it out, and use it in the widget.
We can find JS snippets inside the Appsmith applications from Omnibar. Click on the Search/Omnibar from the top navigation and choose the `Use snippets` option. Here, you can filter snippets based on data sources and UI widgets.
The other easy way is to access snippets from the slash commands. Just type in / inside the bindings, and choose the insert snippet option.
Special credits to Arun Vijayan, Sumit Kumar, Ajinkya, and Nikhil Nandagopal who had worked so hard on this feature!
Hope you’ll build some super cool applications using the JS Snippets on Appsmith! If you do, don’t forget to tell us about it, we would love to feature your work! Your contributions and feedback help us make Appsmith better and we really appreciate it.
Join the community! Come chat with us on Discord, or jump in on Github directly!
The quality and value spec is incredibly high when you have a like-minded yet diverse community working together to solve a problem. It is the spirit of collaboration to solve problems that drive open source projects. With open-source, failures can be seen as important milestones to improve as they become moments of learning from the community. Help, resources, perspectives that are beneficial for the community are all available in the open-source world. This is why Appsmith will remain forever free and open-source.
Every year, we look forward to Hacktoberfest because we find it an excellent way to get to know our growing community, and we hope that you find a few issues that you would like to fix, and get to know our product and society better.
Of course, participating in the Appsmith Hacktoberfest can also help you win some swag! In this blog, I am going to help you get started!
Hacktobefest is an annual month-long celebration of open source. It is an excellent opportunity for everyone, from seasoned developers to students, code newbies, technical writers to UX designers, to contribute to open source communities. At the same time, they can develop skills and stand a chance to win limited edition swag.
Before participating in Hacktoberfest, make sure to register on the official DigitalOcean Hacktoberfest site here.
Appsmith is a low code, open-source framework to build internal applications. With its Javascript-based visual development platform, you can build CRUD apps, Dashboards, Admin Panels, and many more 10x faster. You can use pre-built UI widgets, connect them to your APIs and databases to build dynamic apps and complex workflows. And the best part? Deploy these apps on the technology you prefer! (self-host for free!).
One of our community members wrote an in-depth review about Appsmith; check it out here to better understand the framework.
You are welcome to contribute to the issues on Appsmith’s repository on Github. Before raising a PR, please read our contribution guidelines, review, and merge policies.
To participate in Appsmith Hacktoberfest, make sure you register before raising a PR to Appsmith; this will allow us to track your PRs and ship the swag to your location! Before working on any issue, please ask maintainers to get it assigned to you. Start working on it only after the issue has been assigned.
If you are new to this process and don’t know how to raise a PR, here’s a list of resources to help you get started:
Below, we put together a brief on the various issues of different specialties (engineering, code, content, templates, etc.). However, you are free to wander around the Appsmith Project and take on any current issue or open a new issue that you think is important.
We have a bunch of good-first-issues for Hacktoberfest that are labeled frontend, bug, and many more. You can pick from these based on your interest or expertise and can start working on them. If you need help understanding the issue or have any other code-related questions, chat with us on the Discord channel.
For setting up Appsmith and understanding git workflow, refer to this guide.
> Before raising a pull request, ensure you have submitted a related issue and discussed a plausible solution with a maintainer. This gives your pull request the highest chance of getting merged quickly.
Swag Details
Help improve our documentation and how-to guides! We’re always looking for developer experience for Appsmith, and we believe documentation is one of the core assets. If you are a newbie contributor, this is a great place to get your feet wet with Appsmith. We’ve prepared a list of newbie-friendly Hacktoberfest issues ready to be tackled.
You can find these in our DOCs section here. Feel free to share more content ideas as a comment on the mentioned issue.
I urge you to go through documentation guidelines and get the maintainers to assign it to you before you take up any issue.
Here are some of the examples for good contributions:
Swag Details
There are endless tutorial and blog ideas for creating internal applications, admin panels using Appsmith! From simple store catalog manager to complex Postgres admin panel, everything is possible. So far, we’ve made more than 20+ dashboards and admin panels to help developers build internal applications.
We believe the Appsmith community is more than just code! For Hacktoberfest, we are considering tutorials and blogs as valid contributions.
These need not be assigned to you; all you need is to join our discord channel and post your idea in the #hacktobest channel.
You can either publish them on your blog or submit it for publication to the Appsmith blog. Lastly, do not forget to raise a PR on the awesome-appsmith repository, so this contribution is valid towards the contribution amount for both Appsmith and DigitalOcean events 😊.
Take a look at these Tutorials and Blogs to get an idea about what we’re looking for:
Swag Details
Create video tutorials to help our new community members get started with Appsmith!
It can be anything! How to deploy Appsmith on Linode, use the Google Sheet integration,o work with GraphQl APIs, build a Shopify/Ebay backend on Appsmith... The sky is your limit. Also, it can be in any form! Your recorded video can be uploaded to Youtube, Twitch, or other streaming services. As long as there is a record, we will accept your submission.
Take a look at these video tutorials on our Youtube channel to get inspired!
Raise a PR on awesome-appsmith repository, so your contribution is valid towards the contribution amount for both Appsmith and DigitalOcean events 😊.
Swag Details
Help us build excellent forkable admin panels, dashboards, CRUD apps with Appsmith for Hacktoberfest! On Appsmith, it’s super easy to fork any application based on the user permissions. We’re creating an incredible library of templates that will benefit our community.
Here are some of the templates we’ve built:
Raise a PR on awesome-appsmith repository, so your contribution is valid towards the contribution amount for both Appsmith and DigitalOcean events 😊.
If you’ve got any questions, ping me on Discord or send me an email (hacktoberfest@appsmith.com). We’ve also listed some more FAQs on this page; please do go through them.
We’re back again this month with updates from the last 30 days. We like to work hard! We’ve shipped many features, fixed bugs, and launched Hacktoberfest with a series of fun events. You can check them out here.
From grouping widgets to copy-pasting them to undoing or redoing them on the canvas, we’ve got everything covered for you to customize your applications on Appsmith. This makes your app-building experience much more accessible, smoother, and of course, fun!
To use the widget grouping feature, you have to select all required widgets on the canvas with your pointer. This will create a widget group highlighted in a rectangular dotted box; next, you can drag the rectangular box anywhere across the canvas to move them all in one go. Additionally, widget groups can also be duplicated and copied, or deleted. You can find all these options on the top-right corner of widget groups.
There’s no such thing as error-free creation; it’s common to make mistakes while building apps. Often, we accidentally delete widgets while building the UI and have to redo everything. With the new undo-redo feature, you can make changes in the canvas using simple keyboard shortcuts.
Undo - Command / Control + Z
Reo - Command / Control + Shift + Z
We also resolved some critical issues for copy-pasting widgets. Now, the widget won’t overlap, and all the functionalities such as deleting them, customizing them would be working as expected!
We got four more new widgets last month! A stat box widget to display all the metrics on your dashboards, a checkbox widget to configure multiple checkbox inputs, a beautiful audio recorder widget to record audio on your applications, and finally, a tree select widget for selecting options in a nested tree-like structure. Cool right? Here are the quick previews of these new widgets.
Additionally, we’ve upgraded all the widgets styling options to give developers more control over customization. Now, you can add background color, shadows, borders, border radius to almost all the widgets where there is a chance of customization. Of course, we’ve tried them. We have a new product designer who joined us recently who had built this beautiful dashboard on Appsmith.
Don’t forget to chat with us on our discord channel if you want to see more such internal tools and designs!
We’ve added a new option to configure all your pages in the application in one place. Using this, you can rename, reorder, duplicate, and delete pages within few simple clicks. To access it, click on the application name and select the page option from the dropdown to configure pages under the application. Below is a screenshot that shows how easy it is to manage your application pages on Appsmith!
JavaScript is like fuel at Appsmith. We can use JS anywhere across the application, from binding data to writing functions to implement complex JS transformations using the moustache bindings. But not everyone is a JS expert; even we sometimes google to get stuff done. Hence to make it handier we’ve introduced a super cool feature, the JS Snippets. Some common use-cases can help you with fundamental transformations, functions, binding, and many more.
Here’s how you can access this:
Before you use them, you can also test them out with your connected data.
We’ve got a host of other bug fixes and updates too, be sure to check out our release notes here.
See you next month with more updates! Do follow us on Twitter, Youtube, and Linkedin to stay up to date.
Catalogue management is hard. But building a catalogue management app for your company is harder. Not only does the application have to connect to multiple tables/API, and pull data on inventory, price and even offers, but the application also needs a robust UI that lets the user manage this catalogue easily.
Not only does this take a lot of time to build and maintain, but direct access to the database or an API endpoint that could return private information could also prove to be a problem. GraphQL helps solve these problems inherently in the way it returns only what it is queried for.
Because of these benefits, GraphQL is a great interface to develop an internal application on and to make development and maintenance easier, a low-code tool like appsmith can be very useful and will help speed up the process of development.
In this tutorial, we'll learn to create an application to manage a games store's catalogue running a GraphQL backend. We'll be using appsmith to build the application and implement CRUD operations on the database. Here's the link to the final application.
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets including charts, tables and forms for building a UI really fast.
To build this application, first, we’ve collected a dataset from Kaggle that has a list of games, their prices, rating, average playtime and genre they’ve belonged to. We’ve created a mock database out of this, hosted it on Hasura and exported them as GraphQL APIs. Below is an image showing some of the attributes of the dataset.
Here, as we can see, the response consists of data of games in a JSON format. Next, we’ll use Appsmith to utilise this database and build a Store Manager by writing different GraphQL queries.
To begin, we'll need to sign up for Appsmith (it's free!), if we don't already have an account. We can also deploy a Docker image on a server. For this tutorial, we're going to create an application on Appsmith cloud.
Below is a screenshot of the application:
To work with Appsmith, you need a database. This can be in the form of an API or a database. Appsmith supports MongoDB, MySQL, and PostgreSQL, among others. In this case, we’ll be connecting to Hasura, as it'll be our GraphQL backend server. To establish a new connection, follow these steps:
Here, we have the query stringified with moustache syntax to ignore all the line breaks. Inside the query, we have the table name we want to query steam_games with a limit parameter set to 100 and an ordey_by parameter to order all the games by the appid ascending order using the asc keyword. Inside the query, we’ll have to use the fields we want to fetch. Now hit Run to run the query. You should see a list of games in a JSON field in the response tab.
Awesome! You now have your store catalogue with all the games and their prices. Let’s now build a UI to display all these games on a beautiful table.
This will pull data from the FetchGames API we’ve set up in the previous section.
Beautiful! We now have our catalogue displayed on a table. Next, we’ll create a form where we can add new games to the database.
In this section, let’s look at how we can add new values to the database by building a simple UI. For this, let’s create a new Form on Appsmith that takes in all necessary fields to post in our game store database.
Name : nameInput
AppId : appIdInput
Average Play Time : avgPlayTimeInput
Genres : genresInput
Price : priceInput
You can simply do this by going to the input widget’s property pane and double-clicking on the existing widget name.
Below is a screenshot how the form should look like,
Perfect, we now have our UI ready; let’s create a GraphQl API to post data into the Database.
Here, we have an object consisting of a query key that holds the GraphQL query and a variables key with all the variables that need to be posted to the database.
Now, in the query, we have a mutation that lets us modify the server-side data. Inside the mutation, we’ll send the object that references the data we will be querying. The insert_steam_games_one allows us to post one object to the database. Inside this query, we can add the attributes we need to post. Next, we’ve associated the variables to the object from the created UI input widgets. The .text on the input widget name helps us get the text written inside the input.
One last thing now that you’re API is ready, we’ll have to call the API when we submit values from the Form. Now go back to the form, open the property pane of the submit button and set the onclick action to call an API. You’ll now find the list of APIs we’ve created, select the InsertGame API. Below is the GIF explaining the same.
Awesome, now that we have our POST request ready, we can try adding a new game to the store using the form we’ve created.
In this section, let’s look at how we can update the database’s values by building a simple Modal. For this, let’s create a new column consisting of a button in the table; once the button is clicked, we should see the modal with existing values and modify it after submitting it.
Name Input: nameEditInput
Default Text: {{Table1.selectedRow.name}}
Average Playtime Input : avgPlayTimeEditInput
Default Text: {{Table1.selectedRow.average_playtime}}
Genre Input : genresEditInput
Default Text: {{Table1.selectedRow.genres}}
Price Input: priceEditInput
Default Text: {{Table1.selectedRow.price}}
The default text will allow us to display the selected row data on the table.
Now, let’s create an API that performs update operations on the data.
Here, we have an object consisting of a query key that holds the GraphQL query and a variables key with all the variables that need to be posted to the database.
Now, in the query, we have a mutation that lets us modify the server-side data. Inside the mutation, we’ll send the object that references the data we will be querying. The steam_games_set_input allows us to update an object in the database. Next, we’ve associated the variables to the object from the created UI input widgets from the Edit Modal. The .text on the input widget name helps us get the text written inside the input.
Now we’ll have to call the EditGame API after the modal is submitted, hence open the button’s property pane and add the following code snippet under the onclick action:
This will update the item on the store and refresh the table, by re-running the FetchGames query.
This section looks at how we can delete the database’s values by building a simple button on the table. For this, let’s create a new column consisting of a button in the table; if clicked, the selected item should be deleted.
Open the Table Property Pane, and click on the Add New Column option. Now set the column type to Button and the label to Delete.
Now let’s write a Delete API and link it to the created button.
Now, in the query, we have a mutation that lets us modify the server-side data. The delete_steam_games allows us to delete an object in the database based on the selected appid. The appid from the table is referenced using this.params.appid.
Lastly, let’s call this API, after we click the delete button, go to the delete button property pane and select the Call an API action in the actions and select the DeleteGame API.
To refresh the table, after deleting an object, you can add custom JS in the button's onclick property:
This code snippet will first, delete the Game and then fetches the data again and updated it on the table.
You've seen how easy it is to build an application on Appsmith, specifically a catalogue dashboard. This guide covered how to create an application and connect it to a GraphQL, as well as how to create, read, update and delete data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.
Building a dashboard with Appsmith is a fast way to build admin tools. Check it out if you’d like to save your developers time and get internal tools launched faster.
Cover Image: Photo by Charisse Kenion on Unsplash
Most founders talk to 10s, if not 100s of investors. Keeping track of the conversations, files shared, and specifics of each investor is hard. Most of the time, we find ourselves rummaging through our inbox for that last email received, the previous file sent or the following action steps.
Many founders rely on spreadsheets (Google Sheets, usually) to list down the bare minimum of next steps, notion or google docs for the notes, and everything else on email to “streamline” the fundraising process. We know that’s not efficient from our experience, and we thought why not take a leaf out of our sales team and use a CRM to track our investor conversations.
So we went ahead and built an investor CRM that we’ve been using for our fundraising. We used Appsmith and the Google Sheets Integration to build this. Feel free to develop or fork this application and extend it to however you want.
In this tutorial, we’ll build an essential Investor CRM, which will let you:
Here's a screenshot of how the app looks like:
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI really fast.
Let’s dive right in!
To build this application, we’ll be using Appsmith’s Google Sheet Plugin. This will allow us to use our Google Sheet as a data source and help us build a custom CRM with a beautiful UI on Appsmith. Follow the below steps to integrate Google Sheets with Appsmith:
Awesome! Now that our Google Sheets Plugin is set up, let’s create a new Google Sheet and add the necessary fields required for Investor CRM.
Let’s divide our Google Sheet into two sheets; in the first Sheet named “Investor Details”, let’s add all the information regarding the inventors and their specifics. Following are the fields we’ll be considering:
In the second Sheet, “Notes”, let’s add all the notes/conversations related to these investors; we’ll use an identifier named id to filter our discussions based on the Investors. Additionally, we will also save the links to media/pitch decks that need to be shared with the Investors. Following are the columns we would need in the second Sheet.
To make this more precise, we’ve made a sample Google Sheet with some mock data here. We’ll be using the same Sheet throughout this tutorial, and you can either follow with this or create your own based on our requirements.
In the next section, let’s fetch all the investor information and display it on a beautiful table.
Now that we are connected to our Google Sheets data source, let’s connect to our Google Sheet and query all the data onto a table widget in Appsmith. To do this, navigate to the created data source under the APIs section and click on the New API button on the top right. Next, follow the below steps:
https://docs.google.com/spreadsheets/d/19ewbxuiNwfD5etHpb__jMzFYjVdYaeLSviC951htlsI/edit#gid=333192
Awesome, now that we have our data from the Google Sheet, let’s put this in a table; follow the below steps:
Perfect! We now binded our Investor Data into a table widget; you could play with it by opening the table’s property pane and displaying only required values or adding custom columns. Next, let’s add a feature to add new Investor Details to the Google Sheet from Appsmith.
In this section, let’s learn to add a new row from Appsmith UI to Google Sheet. With this, we should be able to add new investor details for our Investor CRM. Let’s start by adding a button and showing a modal that has a form to add all the details of the new investors. Follow the below steps:
Name the input widgets to follow to easily use them for other operations for our CRM.
Below is a screenshot of how our form should look like:
Now that we have our form ready, let's write the logic to push the values from the form to the Google Sheet whenever submitted. Follow the below steps:
Here, the key's are the column names in the Google Sheet, and the values associated with them are the names of the input widgets. The .text method is used to pick the text that's written in the input widgets.
Lastly, in the form below for the submit button, set the on click property to Call an API and call the addNewInvestor API from the options.
Our query is now complete, go ahead and try adding a new Investor Detail from the created UI. We should be able to see the updates on the Google Sheet automatically. Magical, isn't it? In this way, we could add new data using the Insert Sheet Row query. In the next section, let's see how we can edit existing row data from Appsmith.
Displaying on the table is cumbersome, hence let’s shrink our table and show all the details in a different container. Additionally, let’s give the functionality to edit the details when displaying them. With Appsmith, all these are pretty straightforward. Now, first, let’s reduce the width of the table and only show the Investor Name and Company, we can do this by opening the property pane and clicking on the eye icon to make the other fields invisible. Next, follow the below steps:
Drag and drop a container and add necessary input widgets to display the Investor Details. In this case, we’ll be adding the following:
Below is a screenshot of how our app should look like:
As we see in the image we have the Investor Table on the left, and the details on the right. Notice an Update Details button at the end? This button should help us the investor details wherever updated. Now in each of these inputs widgets, let’s use the selectedRow property from the table and display data.
Set the following to the Default text of input widgets in the investor details container:
Similarly, add the default text to the other widgets. Now, when a row is selected in the table you should have all the details of the selected investor in the investor detail container. Below is a screenshot of how it should look like:
Awesome! Our CRM is almost ready, but we missed one more thing in here; whenever we made changes in the input widgets and hit update details, the associated investor details should be updated in the Google Sheet. For this, let’s write a new update API that’ll help us update the values in the selected row of the Google Sheet. Follow the below steps:
Lastly, for the Update Details button, set the onclick property to Call an API and call the editInvestorDetail API. We should now be able to update the investor details by editing the necessary input widgets and clicking on the update button.
Awesome, now we have a fully functional app that allows us to manage all our investor contacts. Now let’s extend this application by adding a new page to save all the conversations, media files related to each investor.
A fully functioning CRM should also have all the details of conversations, files with the associated investor. For this, let’s create a new page where we display all the notes and conversations from the Investors. Follow the below steps:
Below is the screenshot showing the same.
Awesome, let’s add some details regarding the investor to the conversation page before we list down the conversations.
Next, drag and drop a table on the Canvas and in the table property pane under the Table Data, paste the following JS code snippet:
Here, we’re filtering the notes only based on the query parameter that’s passed in the URL. Remember, we set the id to 1. Hence, we should see the conversations only from the first investor.
Now on our conversation page, we’ve hardcoded the id parameter; that’s why we were able to see only notes from the first investor. Now let’s add a new column in the table that’ll redirect to the conversation page of the selected investor. We should pass the ID dynamically based on the rowIndex. Follow the below steps:
Awesome, this will send the id variable as the query parameter when navigated to the Conversation page, thereby filtering the notes based on the investor.
Now let’s add a new API that will add new conversations to the investor's details.
Awesome, this will add new notes to the Notes sheet in the Google Sheet. Also, make sure you call the addNote API when the “Add Notes” button is clicked.
Deploy your application on the cloud and share it with others, and that's it. We're done!
You've seen how easy it is to build an application on Appsmith, specifically a CRM with Google Sheets as a backend. This guide covered how to create an Investor CRM and connect it to a Google Sheets, as well as how to create, read, update and delete data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.
We have made a slightly more robust application public here; try it out and let us know what you think. You can also check the live demo of our app here.
Cover Image Credits: Photo by Daria Nepriakhina on Unsplash
At Appsmith, we use Notion to manage our content calendar. We also work with a few external agencies and freelancers for some of our content. It is impossible to create granular access control and develop a workflow on Notion to run the process smoothly and thus, as soon as Notion released their API, we decided to build an application that helps us manage our entire content management in one place while giving our collaborators the necessary access only.
Our application uses our Notion (mock) Table as a data source and lets you plant, submit and edit articles on the application, while at the same time has a provision for integrating with an email service of your choice (we use SendGrid here) to send reminder emails or updates to people in the project.
In this tutorial, we’ll build an essential Content Management System, which will let you:
Check out the live demo here. Here's a screenshot of how the app looks like:
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.
Let’s dive right in!
Notion API lets us connect to Notion Pages and Databases. Now, let's look at how we can set up the API, gather all the required keys and connect to Appsmith.
In Notion, integration has a secret key; when added to a workspace, we could perform all the actions (create, read, update). We'll use the secret key of the integration to connect with third-party applications.
To work with the Notion API, firstly, let’s create a database for our content calendar.
You can also use this Notion page of ours, which can be used as a mock database. You can click on this link duplicate to one of your workspaces. Also, make sure to add the integration to this page to use the Notion API.
Now that we have our page and integration-ready, we’ll start building an App on Appsmith.
In this section, we’ll be querying data from Notion API. Follow the below steps:
Below is a screenshot of how the configuration looks like:
Awesome, we now have the response from the Notion API; let’s bind this onto a List Widget.
Now that we have an API containing data from the Notion Table let’s bind this onto a list widget to display all the details. Follow the below steps:
In Appsmith, you can access the API’s anywhere inside the moustache syntax using the API name.
Here, we’re using the query_data_from_database and mapping it to return item properties. This how the response looks like:
Awesome, now let’s add some widgets onto the list widget and show the details from the Notion API. Drag and drop six text widgets and set its Text property to the following:
Add six more text widgets next to them, where we’ll be binding their corresponding values from the Notion API.
Now in the text widget next to the Title text widget, set the Text property to the following:
Here the currentItem corresponds to a unique item in the list widget, and next, we access the Title property from the Items on our list and parse the JSON. Below is the screenshot of how the response looks like:
Great, we can now see our Titles from the Notion API on items of our list widget; similarly, let’s set the Text property of other text widgets to show the contents from the API:
The code for parsing through items changes based on the API response from the Notion API.
We’ve added some additional styles and added a button widget at the end so that admins can send Emails to the authors directly from Appsmith. Below is how the App looks like after we parse all the data from the Notion Table onto the Appsmith List widget:
We can also add a refresh button to the query_data_from_database query. For this, drag and drop the Button widget onto the canvas, set the Label property to Refresh. Next, open the onClick property, click the Call an API option, and select the query_data_from_database API. Now, whenever we click the refresh button, we should see all the new data updated on the Notion page.
For our content calendar, we can list all the details from the Notion Table. Now let’s add a feature to add new items on the table from Appsmith. Follow the below steps.
Following are the fields we’ve created for reference:
Now, let’s name these widgets (so that we can use them to refer in the POST API method) to the following:
Let’s create a new API that’ll add a new value to the Notion page when making submissions from the Appsmith form. Follow the below steps:
This is how Notion API allows us to add new items to a database. Here we'll also have to add the database id in the place of <db-id>. If we observe the body inside each property's content field, we added a moustache operation from which we'll take the input from the Appsmith input forms.
Now open the Submit button’s property pane, update the onClick property to Call an API, and choose add_an_item_to_database API. With this, we should add new data to the Notion table using the Appsmith form!
Our content manager now shows all the data and also has a feature to add new content ideas. Now let’s add an email integration to communicate with Authors via Appsmith. We’ll be using Sendgrid to achieve this.
Creating a Modal for sending emails:
Below is a screenshot of how the Modal should look like:
Configuring the SendGrid API:
https://api.sendgrid.com/v3/mail/send
This is the default configuration from SendGrid that lets us send Emails, but here we are dynamically passing the to-email, from-email, subject and content field from the widget’s we’ve created on the Modal. Now, set the onClick property of the form to Call an API and choose the send_email query. With this, we should be able to send Emails from Appsmith successfully!
Deploy your application on the cloud and share it with others, and that's it. We're done!
We've seen how easy it is to build an application on Appsmith, specifically a CMS with Notion as a backend. This guide covered how to create a CRM and connect it to a Notion API and how to create and read data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.
We have made a slightly more robust application public here; try it out and let us know what you think. You can also check the live demo of our app here.
By: Veronica Stork
Tables are an important component of HTML that allows us to display data in rows and columns. There are several different ways to create tables.
If you don’t have many values to display, you can create your table using pure HTML. This is fairly straightforward but quite cumbersome if you have many values or if your data may change.
Alternatively, a table can be used to display information from a database programmatically or an API. Just fetch your data, then use JavaScript to append table rows for each datapoint retrieved.
If you need more interactivity, you can write JavaScript functions that implement more advanced features such as search and filter. This adds more functionality to your app but also more code and complexity.
When you build your table using these methods, you will also need to style and structure it in a readable way for the user. This is not difficult, but it can be tedious. Ultimately, the minutiae of correctly structuring and displaying your data will eat up time that could be better spent on the underlying logic of your app.
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.
Using Appsmith allows you to focus on the logic behind your tables instead of fiddling around creating the UI, connecting to the API, and reinventing the wheel in the form of filter and search functions. You can also see your table working in real-time as you build, a feature that is super handy when you’re trying to develop something quickly.
Your data should be an array of objects, with each object representing a row in the table. The object keys represent column names. You can populate your table with data in a few different ways: by typing the data directly into the property pane manually, by importing it from a data source using queries, or by connecting to an API.
To connect to an API, hover over the table data field of the property pane, and click on the lightning bolt icon. You will be presented with several options. Choose Use data from an API, then create new API. This will bring up a screen where you can paste the API URL in if you want to know more about creating a new API check out the docs.
Below is a screenshot showing the Table Data property and how we can connect to APIs:
Appsmith tables include features relevant to some of the most common use cases, including pagination, filters, downloading, searching, actions, and drilling into individual rows of data. You can use JavaScript to customise these features based on different use-cases.
Pagination is often required to display large amounts of data. If you have more data than rows in your table, you will need some way of splitting the data into separate pages. This can be accomplished using either offset-based or key-based pagination.
Offset pagination is based on the table’s page number and page size. For example, if you have a table with ten rows, your app will use ten and the current page number to determine which data to retrieve next. Let’s walk through how to set up offset pagination.
Enable server-side pagination in the property pane of your table. Make a query or API call that utilizes the pageSize and pageNo variables.
Run that query or API call from the table onPageChange.
Key-based pagination uses a value returned by the API to make the next page’s API call. If the API’s response includes URLs for the next and previous pages, you can enter those on the API settings.
Client-side filtering is included in Appsmith out of the box, but implementing server-side filtering requires a few steps. First, create a dropdown widget and fill it with filter values. Then call that API or Query onOptionChange from the dropdown.
In the above example, we are filtering based on the user status.
As with filtering, client-side searching is included in Appsmith out of the box. To implement server-side searching, you must call the API or query onSearchTextChange from the table and pass in the search box contents, represented by the searchText property.
Downloading also works with no additional setup: users can click the included download button on a table to download all of its data. You can also bind the download function to an action of your choice and set it to download whatever portion of the data you want.
In the above example, you choose the option to download the currently selected row’s data, but you can specify which portion of the data you want and give the file whatever name you want.
Actions in Appsmith represent ways in which your users can interact with the app and describe what you want to happen when they do. You can set the app to download data (as you saw above), call an API, open a modal, and more. All of the available options are listed when you modify action in the property pane.
Actions include the following:
A table is set to display Modal1 when onRowSelected is triggered in the example below.
Drilling into a single row of data is as simple as referencing the currently selected row using the selectedRow property. For example, {{Table1.selectedRow}} targets the currently selected row of our table. You can add a column name to narrow down the targeted data further. In the following example, {{Table1.selectedRow.name}} targets the name of the user represented by the currently selected row.
Making tables can be time-consuming and finicky, but with Appsmith’s rich table creation tool, you can focus on bigger structural and logical issues while letting it take care of all the nuts and bolts. Writing less code might seem strange at first, but you’ll quickly realize the benefits of working smarter, not harder.
I hope you enjoyed this introduction to Appsmith’s table features, which is just a taste of the whole suite of tools and features Appsmith can provide.
You can check some of the example app's that use the Table widget here. If you found this tutorial helpful, please consider giving us a star on Github.
A content management system (CMS) is software used to manage the creation and editing of content, usually formatted articles containing images and videos. A very popular example of a CMS is the WordPress CMS. CMSs are very important tools for managing content because they make it easy to create, update, and delete data without any coding knowledge.
Appsmith is an open-source framework that helps developers build dashboards, workflows, pages, and CRUD apps very quickly. Appsmith allows you to build tools with little or no code, with the ability to connect to APIs or databases such as MongoDB, PostGreSQL, or MYSQL, as the case may be. You also get access to charts, widgets, and other customization tools for building a UI. Appsmith has more flexibility than off-the-shelf options, and it’s fast to build and easy to maintain.
In this article, you will learn how to set up Appsmith locally, create a new application, connect an API to it, and build a content management system using widgets and pages.
This section will focus on how to create a CMS as an Appsmith application, as well as how to set up and connect a SQL database for use in Appsmith.
For the purpose of this tutorial, you’re going to create a local instance of Appsmith using Docker. Read Appsmith’s documentation to set this up for your operating system.
After going through those steps, visit http://localhost/ in your browser to see the local version of Appsmith. Create a local account to log in. Next, click the Create New button to create a new application and name it CMS. This takes you to an empty workspace with a sidebar. On the sidebar, you should see items such as Pages, API, and DB Queries.
To work with Appsmith, you need a data source. This can be in the form of an API or a database. Appsmith supports MongoDB, MySQL, and PostgreSQL among others.
In this tutorial, you’ll connect to a local PostgreSQL database. To create the data models required for the CMS, go into the PostgreSQL command line, and create the database:
Connect to the database and create a DB table called Author:
Create a table, Article:
Create a table, Tag:
Create a table, Article_Tag:
By now, you should have a standard database with the tables Author, Article, Tag, and Article_Tag on it. Next, insert some data into the database tables by running the following queries, so you can view it when you build your user interface:
To connect to the appsmith_cms database from within Appsmith, go to the application sidebar. Click the plus icon near DB Queries, then click New Datasource, select PostgreSQL, and enter the connection details for your database.
Since you are on localhost, set the host address as host.docker.internal and the database name as appsmith_cms. Add your PostgreSQL username and password to the Authentication section and click Connect. Once connected, rename the new datasource as CMS.
In this section, you’ll create the first UI view of your CMS application. It will be a form with several fields, for title, content, cover image, and a URL. These form fields will take in all the necessary data for creating an article.
On the sidebar, under Pages, a new page called Page1 already exists. Rename it as create_article_page.
Before building the form, prepare the queries necessary for creating an article.
Click the plus icon near DB Queries and click the New Query button near the CMS Datasource to create a new query. Rename it fetch_authors from the default name Query1. This will be useful in displaying all the available authors in your database. Paste the following code in the query box and run it:
Create a new query called fetch_tags. This will be useful for displaying all available tags in your database. Paste the following code in the box and run it:
Create a new query called submit_article. This will be used to create a new article entry in the database.
Create a new query called create_article_tag. This will be used to create a new article_tag entry that associates a tag with an article.
Go to create_article_page > Widgets, and add a form to the page by clicking the plus icon. Drag and drop a Form widget to the page’s workspace. Click the settings gear to configure the form. Change the form name from form1 to create_article_form.
Next, let’s add a few fields along with labels.
To begin, add a Text widget and label it Title:, then drag the Input widget in front of it and change its name from input1 to title.
Below that, add a Text widget and label it Subtitle:, then drag the Input widget in front of it and change its name from input1 to subtitle.
Add a Text widget and label it Content:, then drag the Rich Text Editor widget in front of it and change its name from RichTextEditor1 to content. Delete the default text.
Add a Text widget and label it Cover Image:, then drag the Input widget in front of it and change its name from input1 to cover_image.
Add a Text widget and label it Author, then drag the Dropdown widget in front of it and change its name from Dropdown1 to author. In the options settings for this dropdown, add the following code:
Add a Text widget and label it Tags:, then drag the Dropdown widget in front of it and change its name from Dropdown1 to tags. In the options settings for this dropdown, add the following code:
Go to the onClick section of the Submit button’s settings, and select Execute a DB Query, choose the submit_article query, then in the onSuccess section, select Execute a DB Query > create_article_tag query. This creates an article entry in the database, and then creates the article_tag entry that links the tag and article together.
To test that it works, fill in the form with some test data and submit it. In the Article table in your database, you should see the new article row with data you just filled in.
Create a new page called all_articles_page. This page will be used to display all the articles available in the database.
Add a new query called fetch_articles and run it. This query will fetch all the articles in the database, as well the authors who wrote them.
On the all_articles_page, drag a table widget to the page and rename it articles_table. In the Table Data section of the table settings, set the value to {{fetch_articles.data}}. This will use data from the fetch_articles query defined above. By now, the table should be populated with a list of all the articles. The table automatically comes with search, pagination, and filter features.
Next, add a new column to the table and call it View. In the settings for View, set the Column Type as a button, label it View, and set the value for onClick as {{navigateTo('view_article_page', {"key": currentRow.article_id})}} after setting it to JS mode.
This means that when View is clicked, a user will go to the view_article_page.
Create a new page and name it view_article_page. Create a new query, get_article, and fill it as:
Go back to the view_article_page and add the following widgets and settings:
On the all_articles_page, add a new column to the table. Then add a button called Edit to the column. In the settings for Edit, set the onClick section to JS and add {{navigateTo('edit_article_page',{"key": currentRow.article_id})}} as its value.
Create a new page and name it edit_article_page. On this page, you’ll add a form to edit existing articles. You'll also make sure that the form is prefilled with the details of the article you want to edit.
Go to view_article_page > DB Queries > get_article and copy the get_article query to edit_article_page.
Go to the queries under the create_articles_page, click the three dots near fetch_authors, and select Copy to Page and then edit_article_page. Copy the query fetch_tags to the edit_article_page as well. Under the edit_article_page, you should see all the copied queries. Make sure that the getArticlesCopy ends with { appsmith.URL.queryParams.key }}; instead of {{ }};.
Create a new query edit_article_query and add:
Create a new query, new_article_tag_query, and add:
Create a new query, delete_old_article_tags, and add:
To build the edit_article_page page, add a Form widget to the page, click the settings gear, and rename the form edit_article_form. Change the form label to Edit an Article.
Add six text widgets to the form and label them Title, Subtitle, Content, Cover Image, Author, and Tag respectively, just like you did on the create_article_page.
Drag the Input widget in front of Title and Subtitle and change their names from input1 to title and subtitle respectively. Open the title widget and set default text as {{get_articleCopy.data[0].title}}. Also set default text for Subtitle as {{get_articleCopy.data[0].subtitle}}.
Drag the Rich Text Editor widget in front of the Content label and change its name from input1 to content. Set the widget's default text as {{get_articleCopy.data[0].content}}.
Drag the Input widget in front of the Cover Image label. Rename the widget cover_image. Set the default text as {{get_articleCopy.data[0].image}}.
Drag a dropdown widget in front of both the Author and Tag labels. For Author, change its name from Dropdown1 to author and set the default text as the following:
And the Default Option as {{get_articleCopy.data[0].author_id}}.
For the Tag field, change its name from Dropdown2 to tag and set the options as:
And the Default Option as {{get_articleCopy.data[0].tag_id}}.
In the Submit button's settings, go to the onClick section and click JS. Set the value as:
To test that the configuration works, go to the all_articles_page and click the Edit button on one of the rows. This should bring you to the edit_article_page, with the form prefilled with the selected row's data.
From here you can edit the article and then submit. Confirm that the article got edited successfully from the all_articles_page by looking up the row to see if the data changed.
Create a new page called authors_and_tags_page. On this page, you'll be able to view all the Authors and Tags. You'll also add the ability to remove and add tags.
Go to the create_article_page > DB Queries and copy fetch_authors and fetch_tag to authors_and_tags_page.
Create a new query, create_tag_query, and paste in the following:
Create a new query, delete_article_tag_query, and paste in the following:
Create another query, delete_tag, and add the following code:
To start building the page UI, add a text widget and name it Authors. Underneath, add a table widget and rename it author_table. Set the Table Data as {{fetch_authorsCopy.data}}. Reload the page.
Add a new column called Action. Go to Action's settings, set its column type as Button, and label the button as View. In the onClick section, set it as JS, and the value as {{showModal('view_author_modal')}}.
You just created a button on the table called View. When this button is clicked, you want it to open a modal called view_author_modal.
To create view_author_modal, drag a Modal widget to the page and rename it view_author_modal. Change the Modal Title text to View Author, set the Modal Type as a Form Modal, and delete the buttons in the modal. Dismiss the modal and click one of the View buttons on the Authors table. This should open up the modal.
Now add a Text widget and set the Text value to {{author_table.selectedRow.name}} in the settings.
Add an Image widget and give it an Image value of {{author_table.selectedRow.profile_picture}}.
Add a Text widget and label it LinkedIn:. In front of it, add another Text widget and give it a Text value of {{author_table.selectedRow.linkedin}}.
Add a Text widget and label it GitHub:. In front of it, add another Text widget and give it a Text value of {{author_table.selectedRow.github}}.
At this point, you should see all of the Author's information rendered on the modal.
Next, you need to create a table to display all the tags. Start by adding a Text widget and labeling it Tags. Underneath, add a Table widget and rename it tags_table. Set the Table Data as {{fetch_tagsCopy.data}} and reload the page.
Add a new column called Action. Go to Action's settings, set its column type as Button, and label it as remove. Set the button to Red as well. In the onClick section, enable JS and paste the value as {{delete_article_tag_query.run(() => delete_tag.run(), () => {})}}.
You can test deleting a tag by clicking one of the remove buttons on the Tags table.
Add a Button widget in the bottom right corner underneath the Tags table and label it Add Tag. Next, in the button's onClick settings, click JS and paste the value {{navigateTo('create_tag_page','SAME_WINDOW')}}. Here you’ve configured the Add Tag button to open a new page called create_tag_page.
Create a new page called create_tag_page. When the Add Tag button is clicked, it should go to this new page.
Go to DB Queries and create a new query called create_tag_query. Paste in the following:
Go back to the create_tag_page, and drag a Form widget into the workspace. Rename it create_tag_form. Then inside the form, add a Text widget and label it Add Tag.
Underneath, add a Text widget and label it Name:. In front of it add an input widget and rename it tag_name.
Go to the onClick section of the Submit button settings and select Execute a DB Query. Choose the create_tag_query. In the onSuccess section, select Navigate to, and for Page Name enter authors_and_tags_page. This means you want to navigate to the Tags page once a new tag has been created.
Test creating a new tag and checking that it is present on the Tags table.
You've seen how easy and fast it is to build a content management system on Appsmith. You’ve connected to a database and built pages and made them interactive. You’ve experimented with how Appsmith’s widgets work, and you’ve learned to customize them for your purposes.
If you’re looking for a fast way to create a CMS or some other internal tool with minimal need for developer hours, consider building it with Appsmith.
Like most companies, we use analytics and marketing automation software to run our daily operations and engage with different segments of users. We use Mixpanel, ActiveCampaign and Reply.io for analytics, managing lists and automation, and email engagement.
To determine which users we need to reach out to, we have a report we run on Mixpanel. Sometimes we need to send them a simple email, and sometimes we need to send them an engaging sequence of emails. This decision is again based on the report from Mixpanel. ActiveCampaign helps us with the one-off emails, but we use reply.io for engaging and personalised sequences.
This is what the process looks like:
We’re still young, and we look at most users we want to engage with personally, and doing this manually every day would take a lot of time and workforce. So we ended up building a dashboard on which, with a single click of a button, we can customise and send out emails to our users.
This is what our process looks like now:
It saves us a LOT of time and helps us keep our core focus on our users.
In this tutorial, we’ll be walking through different steps to build such workflows with various APIs and extend them based on our use cases using Appsmith.
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.
Mixpanel is a product analytics tool that’ll give reports based on defined queries. It also provides API, which we’ll consume on Appsmith to pull out all the reports of users who have invited others. Now, let’s follow the below steps to set Mixpanel API as a data source on Appsmith:
The API's and ids used in these tutorials are examples created for demo purposes. These do not depict the original data. Feel free to work with your APIs or follow along with these tutorials with the given examples.
Fantastic, we should now see the response from API having a set of users for whom we want to build customised email engagements.
In the next section, let’s show the users on a List widget and customise it based on our UI preferences.
Let’s use the List widget to show all the invited users from the get_users API endpoint. Follow the below steps:
Above, we have used the moustache syntax and consumed the get_users API, which was defined previously. In Appsmith, we can use the moustache syntax anywhere, anytime and write JS to manipulations. In this case, we are returning the important variables like email, last name, location of user, company to the list.
Following is a screenshot of how the evaluated value looks like after we add in the JS:
Now let’s drag and drop a few text widget’s on the first list item and bind the values from the list Items property.
For the first two widgets, set the values like Name and Email. Next, set the following text Values to {{currentItem.email}} and {{currentItem.first_name + ' ' + currentItem.last_name}} for the other two widgets. Now add one more text widget and customise it with a background colour such that it looks like a button; this is because whenever we click this, we can use the list’s selected item property and show the details of the selected user from the list.
Below is a screenshot of how our list widget looks now:
Now, let’s add a Map widget and bind the latitude and longitude to locate the user visually. Let’s follow the below steps:
Here, we’re setting the initial tag to the latitude, longitude and title from the list widget based on the selected item using the selectedItem property.
This is usually an array that takes details of markers we mark on the map. We need only one marker hence adding only a single object from the selected list item. With this, we should see our map, and when an item is selected, we can see the users' location. Simple right!
Below is a screenshot of the Map widget:
In this section, we’ll add one more workflow where when clicked on a button, we should be redirected to the list-item selected user’s smart look recordings. These smart look recordings are added in a different mix panel API which is protected. Hence we’ll be using an authorization mode to access this API. Follow the below steps to follow:
Authorization : Basic YmZkNDhhYjk1NzcxNTg4NjI0M2VhZDYyNzNhNDhlMTk6
content-type: application/x-www-form-urlencoded
Awesome, this is a custom configuration for our Mixpanel Report to fetch the Smartlook recordings, you can customise this based on your report or use this as an example. Now let’s add a button below the Map widget.
Now, whenever this button is clicked, we should be redirected to the Smartlook URL of that particular users. Hence, we have to use JS to solve this. Now drag and drop a button widget beneath the map widget and set the onClick property to the following:
Here, when the button is clicked, we navigate to a new page, and the target link is the link that’s returned from the get_recording. We’ve done some additional parsing to fetch the smartlookPlayUrl property.
If the API’s are slow, we can always increase the Timeout.
In this section, we'll be using the APIs of reply.io to send emails to the users shown on the list.
First, let’s make a simple UI, we’ll have a button labelled, send Email when clicked these email campaign should start.
For this, we'll be needing to create two APIs; follow the steps below:
1. Fetch the Emails from Appsmith API
In this step, we'll have to fetch the profiles from the Appsmith account. Hence, we need to consume one of our Appsmit APIs and pass in the Email that's selected on the list widget.
2. Send Email
Now, let's create one more API with reply.io to send customised Emails by clicking a button widget.
Now set the button onClick property to the following JS:
Here, we’re fetching the users and sending them the Emails using a reply.io campaign that's already created!
Deploy your application on the cloud and share it with others, and that's it. We're done!
You've seen how easy it is to build a customised workflow on Appsmith. Similarly, we can integrate the number of APIs and data sources and build customised dashboards.
If you like this tutorial, drop us a star on our GitHub repository here
Managing leaves is hard. But sudden issues can arise with anyone, anytime, and organisations must keep a clear record of all the employees leaves to maintain proper working with constant efficiency month-by-month. But there's no time to really set a system in place for accountability, and they were forced to use Google Sheets to maintain these.
But not everyone are comfortable using Google Sheets, anyone can make edit’s to it once given access, and the process of approving and rejecting leaves by founders or managers is out of context. Hence, we at Appsmith came up with an internal app for leave management. It’s minimal and super easy to use.
Here’s a quick sneak peek of what the app looks like. This is forkable, customisable and can be shared across organisations and teams. This tutorial will walk you through building this application with Appsmith and its Google Sheet Integration.
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.
Following are the table of contents:
Let's dive in!
In this tutorial, we’ll be using the community edition of Appsmith Cloud to build the application. However, if you want to build this on a local instance and deploy it on your server, you could set up Appsmith’s on-prem version by following through with this documentation here.
Now let’s follow the below steps to setup Appsmith Cloud and GSheets:
The Google Sheets integration on Appsmith helps us use Google Sheets as a backend or data source and perform multiple operations without writing any piece of code.
Awesome, we now have access to all your google sheets from your Google account. Now let’s create a new Google Sheet and add the necessary fields to build our leave management dashboard.
Here’s a mock Google Sheet that we used to build the application. Feel free to copy the same google sheet to your account and try it out, or you could create a new one instead.
Following are the Sheets and fields that we used to build the application:
Sheet One: Users
This Sheet has all the information about the company’s employees and their roles. Following are the fields:
NameEmailAvailable LeavesLeaves AppliedTotal Leaves
Sheet Two: Leave Requests
This Sheet has information about leave requests requested by the employees and their status if they are approved. Following are the fields:
NameStart DateEnd DateTotal DaysReasonOther ContactStatus
We’ll connect to this particular Google Sheet and build a UI to create and list our leave requests in the next section.
Firstly, let’s build a Google Sheet API using the GSheet integration Appsmith. To do this, click on the Leave Management Data Source you’ve created in the previous section and hit NEW API. We should see the following screenshot:
Follow the below steps to list down all our leave requests:
3.Lastly, hit the Run button on the top right. We should see the data that's inside the Leave Requests sheet. Now let's create a new table and display the data.
4. Click the + icon next to Widget's, drag and drop a new Table widget onto the canvas. We can configure the Table Widget by opening its property pane by clicking on the cog icon on the top right of the table widget.
5.Now, copy-paste the following JS code snippet into the Table Data property inside the table's property pane:
Awesome! Here, we call the getLeavesRequested API and use the filter method to filter the object's based on the user_name and the leave status. In my case, the name inside the GSheet is Iron Man, and I'm matching the same with my username on Appsmith. We can do that by using Appsmit's internal store. Here, appsmith.user.name returns the user name Iron Man in my case. Similarly, say your profile name is Bat Man. Then, you should filter all the leaves that are named after Bat Man in the Google Sheet.
Now let's add an option to create a new leave request and post it to the GSheets. Follow the below steps:
Now drag and drop the following Widget's on the modal to create a form:
{{moment(DatePicker2.selectedDate).diff(DatePicker1.selectedDate, "days") +1}}
Our form is now ready; let's create a new API from the Gsheets data source that lets us post values from this form to the Leave Requests Sheet:
Follow the below steps to list down all our leave requests:
4.Add the following snippet in the Row Object property:
As you can see, we're setting the Status of requested leave as REQUESTED. We'll be changing this to APPROVED or REJECTED based on the actions from the leave manager admin page in the following sections.
Fantastic, now, when we add details on the form and submit it, we should see a new entry on the Gsheet. But we have one problem here, and the leaves on the table are not updated. So, for this, let's create a workflow that submits the data and refreshes the table data when the leave is requested.
Now open the modal and set the onClick property of the submit button to the following:
Here, we create a workflow that does the following:
We'll also create a new API from the Sheets data source getUserDetails that fetches the names in the Users sheet. For this, just copy the getLeavesRequested API to the same page and change the Sheet Name to Users. This will get all the User's that are there in our org.
In the previous section, we created a table and form to create and display all the leave requests. Now let’s build an admin dashboard where we could look at all the leaves requested by the team and accept or reject them. Let’s follow the below steps:
With this, we should be filtering all the row’s from the Leave Requests sheet that has leave status set to REQUESTED. Now let’s add two buttons that will allow us to update the status to Approved or rejected. Follow the below steps:
Similarly, create one more API named rejectLeaveStatus and set the Row Object as following to reject the leave:
Let’s set the Approve to button onClick property to call the approveLeaveStatus API and the reject button to call the approveLeaveStatus. Additionally, onSubmit, you can call the getLeavesRequested API to refresh the Table data. Below is the GIF showing the same:
This section will notify the user if the leave he applied for is accepted or rejected. For this, we’ll be using the List Widget and display all the leaves that are approved and rejected. Follow the below steps:
Next, drag and drop a few text widget’s and bind the list widget data using the currentItem property.
Finally, this is how the List widget should look like:
Finally, we've added some container's and added some additional information to make the app UI more beautiful. This is how the final look's like:
Deploy your application on the cloud and share it with others, and that's it. We're done!
You've seen how easy it is to build CRUD Apps and Workflows on Appsmith. Similarly, we can integrate the number of APIs and data sources and build customised dashboards.
If you like this tutorial, drop us a star on our GitHub repository here.
You have been asking for it, and we have developed it! The import-export feature is now out in the latest version (>v1.5.4) of Appsmith. With this, you can easily migrate apps from your self-hosted environment to Appsmith cloud or vice-versa.
At Appsmith, our users develop internal applications on the cloud, self-hosted installations, or even on local environments on their laptops, and it’s a pleasant experience in all cases. However, when looking to move the app from one environment to another, the only option was to rebuild applications… until now!
We’ve been asked multiple times on our community platforms for a quick way to migrate applications.
And then, we’ve created a feature request on GitHub!
Today we proudly ship the import-export feature to our community. With this feature, you can export the application as a JSON file and import it to any development environment in just a few steps.
We limit this functionality to only the organisation’s administrators to ensure that your database credentials, etc., do not get exposed to all the developers.
Want to try this out? Let’s see how mind-bogglingly easy this is!
On your dashboard, open the overflow menu of the application you want to export from the source environment. Select the export option from the menu. This will download a JSON file with all the information about your application.
Choose the organisation you want to import the application from the dashboard to the destination environment. Open the overflow menu by selecting the organisation name and select import. Upload the exported application JSON file.
Awesome, in just two simple steps, you should be able to migrate your Appsmith application!
Special credits to @abhvsn, who had worked hard on getting this feature out!
We appreciate each contribution and piece of feedback that you share. Join the community! Come chat with us on Discord, or jump in on Github directly.
Today, we are super proud to announce Snowflake DB integrations on Appsmith in our latest release (>v1.5.5). It was one of the highly requested integrations by our community, and we've shipped this right on time. This blog is an attempt to share with you our motivation and experience in building this integration.
We first received a request for this SnowflakeDB integration on our GitHub Issues. This was posted by one of our community members in the last week of April. We then researched SnowflakeDB's architecture and data sharing capabilities and decided to supercharge it with Appsmith for querying and building applications.
On Appsmith, it's super fast and easy to build new Integrations. This is because we've architectured each integration as an individual module; with this, it's super handy for us and contributors to build, customise and organise any new integration.
To learn more about Appsmith's backend architecture, we recommend you watch the session about integrations by our co-founders here.
Considering the amount of interest this integration had gathered within our community, we decided to fast-track the work on Snowflake DB Integration. It barely took us two weeks to build, test and ship it to production. Super C❄️❄️L, right?
Our existing integrations helped us organise most of the code, and with Snowflake DB's JDBC driver support, we were able to establish a connection with our backend quickly. We've made a few easy-to-get-started decisions on the UX front, but we'll enhance these based on feedback from our community.
It is super easy to connect databases with our integrations on Appsmith. Now, let’s look at how we can connect SnowflakeDB on Appsmith to build applications.
Step #1 Find Snowflake DB Integration under Datasources
Step #2 Add connection details for SnowflakeDB and save a data source
Step #3 Create Queries and Build UI
Awesome, in just three steps, we're able to connect to SnowflakeDB on Appsmith! Now we can power UI widgets with queries from the created data source.
Credits to Nidhi Nair, who had worked hard on getting this integration out!
We appreciate each contribution and piece of feedback that you share. Join the community! Come chat with us on Discord, or jump in on Github directly.
We’re excited to announce the new iFrame widget on Appsmith’s latest release (v1.6). With this, we can now embed content from other sources, such as web pages, videos, and scores of other content formats on Appsmith applications within no time!
At Appsmith, as an open-source organisation, we believe in the power of community and take member requests seriously. It’s also a part of our commitment to building in public. This iFrame feature was highly requested by our community members, prompting us to create an issue on our Github repository.
Today, we want to talk a little bit about how we got to prototyping and then delivering this widget.
First, we listed the basic requirements for an iFrame widget and the other specific functionalities we wanted to include. And yes, all the ideation and prototyping are open to the public; you can check out the Figma files! One of our contributors, Paul Li, volunteered to build the widget. Li’s submissions were then thoroughly tested on our deploy previews and then pushed into production. A working example of the collaborative engineering practices we follow here at Appsmith! 🙌
In case you’re wondering about how to set up Appsmith in the local environment and start contributing, this detailed guide will help you!
You can add the find the iFrame under the widget sections from the entity explorer inside the application. Drag and drop it onto the canvas to use it. By default, you’ll see a Wikipedia webpage, and you can change this by opening the property pane and adding a new link to the ‘Source’ property. You can also update the ‘label’ property to assign a name (title) to the content page that you wish to embed.
The iFrame widget will allow you to trigger a value when a message event is received. This can be handled by configuring the onMessageRecieved property.
Here’s how it works:
In the future, Appsmith will also provide an API that will let you access the message received from the iFrame embed.
Here is another example with a similar use case. When the developer provides auto-login to another website that they have embedded inside their new website.
Note that the control of the embedded website is paramount here and also this approach is insecure. We have allowed this assuming that the developer understands the security issues and deals with them appropriately.
You can handle certain actions when the Widget’s URL is changed using the onURLChanged property.
Here’s an example:
Let’s say you have loaded user data in the table and want to display details from there onto the website. When you click on a particular row on the table, you can change the iFrame URL to show the rest of the details on your own website using the onURLchanged property. We can also bound a trigger to execute an action whenever the URL is changed.
Hope you’ll build some super cool applications using the iFrame widget and Appsmith! If you do, don’t forget to tell us about it, we would love to feature your work! Your contributions and feedback help us make Appsmith better and we really appreciate it.
Join the community! Come chat with us on Discord, or jump in on Github directly!
For a content management team in any organization, things can get chaotic between ideating, strategizing, content creation, and distribution. Looking after multiple social media platforms can be overwhelming; this is where social media schedulers come in handy. However, for an early-stage organization, subscribing to these tools can be an expensive affair, and they do not solve the organization’s specific requirements. For example, at Appsmith, we focus our distribution through Twitter, Discord, Slack, and Linkedin, and we wanted a customizable solution more suited to our needs. Our cross-platform scheduler can send a message across four channels with just one click, and we made this using Appsmith and automated the workflow with n8n.
And building this is not that difficult!
This blog will take you through the different steps involved in building a workflow like this. You can extend this and customize it further to address specific requirements.
In this tutorial, we’ll be using the local environment of Appsmith to build the application. However, we can always export and then import Appsmith apps to different environments (cloud, self-hosted, local).
The recommended way to use Appsmith locally is to use Docker; for detailed instructions, follow the documentation here.
Next, create a new account or sign in with an existing account and redirect it to our dashboard. Now, let’s create a new application and build a minimalistic UI for our social broadcaster by following the steps listed below:
Awesome! We will build a simple UI with Appsmith widgets to broadcast messages onto different social platforms in the next section.
Appsmith has a great set of widget (UI Components) collections for us to build internal applications. We'll be using a few of these widgets to create a form that enables us to write messages and select options to broadcast to social platforms of choice.
We now have the basic UI for our broadcaster. Now, let’s create an n8n workflow and integrate it with Appsmith!
In this tutorial, we will be setting up n8n in our local environment using npm (node package manager). Here’s the command to install n8n globally on your machine:
n8n helps you create powerful workflows by syncing data across 200+ apps. No coding is required.
Post-installation, type in n8n on your terminal or command prompt; it will open n8n editor on [http://localhost:5678/](http://localhost:5678/). Here we can create workflows and save them on local env. However, you can always import-export n8n apps in different environments.
Here’s a screenshot of the n8n editor:
Now, let’s create a workflow that’ll broadcast messages onto different social platforms. Follow these steps:
Following is a screenshot of how the workflow looks like:
We now have a clear picture of how our workflow looks like; let’s pass the data into n8n from Appsmith using the webhook.
Appsmith and n8n will be communicating through a webhook.
A webhook (also called a web callback or HTTP push API) is a way for an app to provide other applications with real-time information. A webhook delivers data to other applications as it happens, meaning you get data immediately.
Follow the below steps to configure this:
Update the TEST URL from your n8n environment.
Here, we’re sending all the required information from Appsmith to n8n using webhook through the request body.
The {{ }} moustache operator in Appsmith helps write JS anywhere and access widget properties.
If the nodes are throwing any errors, you can click on the pause icon on top of them to ignore them from execution.
Awesome, this should send the data to the webhook. Let’s add validations to the workflow with the data sent from Appsmith.
Appsmith <> n8n Workflow Configurations
Now, add the necessary API keys to the social nodes. If you’re using the n8n.cloud account, you can directly authorize each application by logging into your social media account.
After authorization, we’ll need to configure the if-nodes; here, we’ll add the expression from the Webhook, and based on the condition, we’ll be accessing the social nodes. For this, let’s use the contains operation on every node.
The value1 is set to {{$node["Webhook"].json["body"]["medium"]}}
The value2 is set to discord, linkedin, twitter, slack based on the condition from the node.
Lastly, we’ll need to execute the workflow and use Appsmith UI to cross-post content across selected social apps.
In this tutorial, we learnt how to automate content across social media by using Appsmith and n8n. In short, we used Appsmith to build UI and n8n to create automated workflows. With this combination, you could make scores of other similar internal applications that can connect to multiple services and data sources. For example, you could quickly build a CRM that can integrate with numerous email services, or you could automate code reviews and CI/CD pipelines.
We hope you found this tutorial helpful! Let us know if you made an app using Appsmith, and we would love to feature you.
Join the community! Come chat with us on Discord, or jump in on Github directly!
Appsmith is a low-code open-source framework that’ll help build your internal applications, admin panels, CRUD apps, and many more 10x faster. In this tutorial, we’ll learn how to deploy Appsmith on DigitalOcean by using the Appsmith droplet from Digital Ocean’s 1-Click Apps Marketplace and host it on your custom domain.
To get started, you’ll need an account on DigitalOcean; don’t worry, if you don’t currently have an account, use this link and get $25 credit on DigitalOcean!
If you’re already an existing user, use your account and follow the steps listed below:
For a base configuration, use the following settings.
Here’s how it should look like:
Great! It will take a few minutes (approximately 3-4 minutes) to install Appsmith on the DigitalOcean droplet. After this, you’ll find the deployed droplet on your dashboard with all the details of the selected configuration.
Now, to use Appsmith, you’ll need to copy the IPv4 address from the settings and open it in a new tab. This will take you to Appsmith’s login page. You’ll have to sign up for a new account on Appsmith since it’s the first time you’ll be using it.
Follow the steps shown in this GIF:
To host the Appsmith DigitalOcean droplet on a custom domain, you’ll need to select the Add a domain option from the dashboard.
This will redirect you to a new page, where you’ll need to add your domain name. Once that’s done, it’ll give you records of the name servers. Copy the NS (name servers) details and use the custom name server’s configuration on your domain provider. Sometimes, it might take up to 24-48 hours for this to go live! Be patient 🙃
In this tutorial, we discussed how to deploy Appsmith on DigitalOcean. However, this is not the only way to use Appsmith; you can always self-host it on different cloud platforms. You can learn more about setting up Appsmith in different environments using these setup guides. Additionally, you can always migrate your applications from one environment to another using the import-export feature. To learn more about this, read the blog post here.
We hope you found this guide helpful! Your contributions and feedback help us make Appsmith better, and we really appreciate it.
Join the community! Come chat with us on Discord, or jump in on Github directly!
One of the key beliefs here at Appsmith is to make our framework better each and every day. Our engineering and design teams are constantly aiming to expand possibilities for all users on Appsmith. Our speed of shipping is something we’re proud of, and we hope to keep this momentum going for the days to come.
July and early August were busy months at Appsmith as we shipped so many new features — especially widgets, and an improved navigation experience. In this round-up, we will take you through some of the significant changes and improvements that we brought in over the last 30 days!
One of the primary goals of our design and engineering is to ship new widgets as early as possible. Widgets help our users put together UI components quickly, and speed up the overall app-making process. Now, we’ve added three new widgets! The Rating, Divider and Menu widgets. Here’s what each widget does:
Rating-Widget: With this widget, users can perform a quick rating operation on anything! For example, in a support dashboard, you can use the Rating widget to rate conversations with your customers. Not just that, at Appsmith, we’re quite serious about this customization. This widget goes beyond appearances; extended features of this widget include colours, calling APIs, viewing alerts etc.
Drag and drop the widget onto the canvas, and use the property pane to assign actions.
Divider Widget: The divider widget on Appsmith can help visually separate or compartmentalize different parts of an application. This can be added anywhere around the canvas, either in a horizontal or vertical orientation. You can always customize the divider type and change accents based on the application's aesthetics.
Menu Widget: This widget was highly requested by the community. With this widget, users can create and customize menus on Appsmith. Additionally, users can also add different functions such as filtering data based on the selected item on the menu or navigating between any pages.
We also made some much-needed improvements to the existing widgets! Here are some of the notable changes:
When using filters on the Table widget, users can now drag the filter pane with ease anywhere across the canvas. This helps users look at other widgets on the canvas easily.
We’ve seen many people adding data related to expenses, hence to make it easier we’ve added a currency data type on the input widget to help with money calculations. Users can also set the currency type and the decimal correction for more accuracy.
The table widget is a user favourite and with good reason. There are many things a Table widget does best. So, we are thinking up ways to improve its functionalities. Now, users only view a few headers on the table widget or remove them to show the data. They can export the entire table data into an excel file or CSV file with just one click. To make it more powerful, we’ve added a feature where users can select multiple rows on a table. To enable this, choose the multi-select property from the table widget property pane.
Last month, we spent a lot of time upgrading our user experience for creating and connecting data sources to applications. This was one of the crucial design decisions we've taken so far! With this new upgrade, users can now create and manage their data sources much faster. To learn more about our design and engineering approach, read the detailed blog post here.
Simply put, our overarching goal with this update was to get people to connect their data to the UI.
Widget ➡️ Datasources ➡️ Querying Data ➡️ Connecting Widget
With this flow in mind, we made several changes to the navigation experience.
Users can now:
Slash Commands
We introduced another big feature. Appsmith now has slash commands. Slash Commands are a quicker and simpler way to bind widgets to a data source. Now users can trigger commands by typing "/," which can be utilized anywhere inside a dynamic binding.
New Context Menu
We focused on making the widget grouping experience much better. We know how valuable this feature is for our users, especially in terms of the overall experience of Appsmith. Users can now drag over particular widgets and group them together, a context menu will help in performing different actions like duplicating/copying/deleting within a single click.
It’s now pretty well documented that Appsmith is all about integrations. We have included yet another database integration to Appsmith. We’ve made it super easy to build new integrations on Appsmith. This is because we've architectured each integration as an individual module. It's super handy for us and contributors to build, customize and organize any new integration. Now users can integrate with ArangoDB! ArangoDB is an open-source multi-model database system where you can natively store data for graph, document and search needs. And the best part? It’s free!
This integration feature was developed by mingfang, one of our users and top contributors on Github!
That’s all we have for this month’s round-up. Follow us on Twitter and Linkedin to stay up to date with more news and announcements!
We love feedback, and we want to know your thoughts. Write to us with your ideas, opinions, or even send us brickbats on marketing@appsmith.com.
If you want to write a blog for us, send me an email and I’ll make it happen: vihar@appsmtih.com.
Most apps on the internet are actually CRUD applications. What this means is that any basic app does the following functions: Create, Read, Update, and Delete (CRUD). In fact, if you look at Twitter, it’s a simple CRUD app where users can create tweets, read tweets, update tweets (like re-tweets) and delete tweets! CRUD apps are used on a daily basis by several businesses and organizations to maintain their day-to-day workflows. For example, in an enterprise organization, HR departments would be using a CRUD application to manage staff and keep track of existing employees.
Well, at Appsmith, we know how important CRUD applications are for internal operations. Why should something so critical to an organization's success be difficult to make? Well, we took matters into our hands and we made it super easy to make one. What if we said that you can now make the entire CRUD application with all the UI, logic, and complete control in just one click? Yes. You read that right!
We’re super excited to announce our new feature called the “Generate New Page from Database” With this, you can build CRUD applications within no time. We’ll discuss a bit more about our approach in shipping this feature in this blog, and also talk about how you can use this feature on the Appsmith framework.
The idea of the “Generate New Page” feature is rather simple, we wanted to ship a feature that would help developers save time in building UI and writing queries for basic CRUD applications. Now, all that users have to do is just open the canvas for a new application, connect a data source and then click on the “Generate New Page” option. And here’s what this will do:
First, it will create four new queries for you from the selected data source that will do the following:
These straightforward CRUD operations will be automatically generated for users!
As for the UI, this feature will automatically create a new table and fill all the data in the table using the read query. However, users can customize the rows based on specific use-cases after the application is generated.
Next, when users click on the ‘Create Row’ button, it will open a modal to insert new rows into the table. This option will use the ‘Create’ query.
To update the data in a particular row, users can use the Update Row container on the right, where they will be able to update any row data by selecting from the table and using the form. This will be using the ‘Update’ query.
Finally, inside the table, the last column will be populated with buttons which when clicked will delete the entire selected row by using the ‘Delete’ query.
What a breeze! Not just that, the table comes with powerful features where users can search, filter or sort contents of the table by configuring it.
Following is the screenshot of the entire generated UI.
Now, we’ll talk about how to use this feature!
In order to be able to use this feature, the first step is to connect a new data source on the Appsmith application.
If you’re new to Appsmith follow the steps below:
You’ll see the following options:
Now, you can select the table and add a searchable column. As soon you click on the Generate Page, you’ll see the UI where all the CRUD operations can be performed.
Hola, and with just one click the entire application is generated. Hope you love this new feature.
We love feedback, and we want to know your thoughts. Write to us with your ideas, opinions, or even send us brickbats on marketing@appsmith.com.
If you want to write a blog for us, send me an email and I’ll make it happen: vihar@appsmtih.com.
From startups to large multinational corporations, every organization needs a tool or an application to keep a track of expenses. These apps usually help different departments, for example, the CEO’s office or finance teams to keep track of salaries, reimbursements and other company expenses.
There are several tools that one can find to manage expenses, however, these are either expensive or lack some crucial features that do not serve a large number of use-cases and finance goals.
We think that building expense managers shouldn’t be too complicated. So, we built an expense management dashboard using Appsmith and Google Sheets, which can be used by an organisation to manage reimbursements expenses based on their monthly budget limitations. Additionally, admins of the app can also either approve or reject it based on the reimbursement request that is raised by an employee.
Here’s a sneak peek of what the app looks like.
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.
Following are the table of contents:
Follow the steps below to use Google Sheets with Appsmith:
Awesome! Now that our Google Sheets Plugin is set up, let’s create a new Google Sheet and add the necessary fields required for managing expenses.
Following are the fields we’ll be considering:
To make this more precise, we’ve made a sample Google Sheet with some mock data here. We’ll be using the same Sheet throughout this guide, and you can either follow with this or create your own based on our requirements.
docs.google.com/spreadsheets/d/1b7BuwDx0He4..
Now that we are connected to our Google Sheets data source, let’s connect to our Google Sheet and query all the data onto a list widget in Appsmith. To do this, navigate to the created data source under the APIs section and click on the New API button on the top right. Next, follow the below steps:
https://docs.google.com/spreadsheets/d/1b7BuwDx0He41wtKYazxX3uJyIgQDHDRWyfyycL6mLMk/edit#gid=0
Awesome, now that we have our data from the Google Sheet, let’s put this in a list; drag and drop a new table widget and paste the following in the Table Data property:
Quick Hack: For making the application more readable, let’s change the colour of the text based on the Reimbursement status. Appsmith allows us to write JS for styling widgets, now open the Text3 property pane and toggle JS in the text colour property and paste the following code:
With this, our list widget is colourful and feature-rich.
Here’s how it looks like:
In this section, we’ll create a new form that will allow users to post new reimbursement requests to the admins. For this, let’s use the Form and Input components and Google Sheets integration on Appsmith. Follow the below steps:
We’ll add the select widget onto the form to set the type of reimbursement. Open the property-pane of the select widget and let’s add the options by pasting the following code:
Here we define an array of all the options and iterate through a for-loop and render them all in the select widget.
Now that we have our form ready, let's write the logic to push the values from the form to the Google Sheet whenever submitted. Follow the below steps:
Here, the keys are the column names in the Google Sheet, and the values associated with them are the names of the input widgets. The .text method is used to pick the text that's written in the input widgets.
Lastly, in the form below for the submit button, set the on click property to Call an API and call the postReimbursement query from the options. With this, we should be able to add new rows to Google Sheet from Appsmith.
In the next section, we will build an Admin Dashboard where admins can approve or reject the requested reimbursement.
The expense manager admin can be only viewed by the admins of the application. Here we’ll be displaying all the information regarding the reimbursement’s and add an option to approve and reject them with a comment.
To build this, follow the steps below:
With this, we should see all the reimbursement requests with pending status on the table widget. Now, add to add options to approve and reject follow the below steps:
Now create a new API from the Sheets Expense Manager data source and rename it to aprroveReimbursement, the idea here is to update the status of reimbursement whenever the approve button is hit on the Table. Now, in the query set the method to Update sheet row and row object to the following:
Similarly, create another query for rejecting the reimbursement (rejectReimbursement), use the following code snippet in the Row Object property:
Now, go back to the Table Widget, and set the Approve button onClick property to execute a query and select the aprroveReimbursement query.
For rejecting the query select the rejectReimbursement on the Reject button’s onClick property.
Similarly, add two more tables to show all the approved and rejected reimbursement for future references, drag and drop two table widget’s and set the Table Data to the following:
Table2, Table Data:
Add some additional metrics to track expenses!
Our dashboard is almost ready, now to give the admins an overall picture of expenses, let’s add some metrics that’ll help quickly look at the pending, paid, and rejected amounts. For this, we’ll need to drag and drop the text widgets and use the following snippet to do the calculations from the table widget.
In this code snippet, we’re iterating over the Table1 data and counting the summing up the Amount column. As the text widget accepts a string, the function will be returning the same data type. Similarly, let’s drop two more text widget’s and calculate the total amount approved and total amount rejected.
Use the following snippets:
Total Amount Pending
Text Widget Value:
Total Amount Rejected
Now, finally, this is how the admin view looks like:
Building this app from scratch, including writing snippets of code is likely to take 30 minutes! Isn’t that simple?
If you liked this tutorial, and are planning to build this, let me know. I’d love to help you make it as complex as you’d like. Write to me at vihar@appsmith.com
We’ve added yet another database integration to Appsmith; say hello to ArangoDB! ArangoDB is an open-source multi-model database system where you can natively store data for graph, document and search needs. And the best part? It’s free!
We’ve made it super easy to build new integrations on Appsmith. This is because we've architectured each integration as an individual module. It's super handy for us and contributors to build, customize and organize any new integration. This integration feature was developed by one of our users and top contributors on Github, Mingfang!
To learn more about Appsmith's backend architecture, we recommend you watch the session about integrations by our co-founders here.
Once the PR for the ArangoDB integration was raised, Sumit, one of our engineers from the backend team reviewed it. He then made all the changes and got things into a working shape. Needless to say that our QA team will ensure that these new features are bug-free in testing and production environments.
To start using the ArangoDB integration on Appsmith, you can sign in to your account or create one for free here and follow the steps below:
Note: Please whitelist Appsmith IP addresses to access ArangoDB Cloud projects.
With just three simple steps, you will be able to connect the ArangoDB Datasource to Appsmith. Now, follow the steps below to utilize the data and build UI.
Add the following query in the query pane and click the RUN button on the top-right.
This will return the values from the department table. Here’s a screenshot for your reference.
Similarly, you could run queries and connect with different widgets on Appsmith to build awesome dashboards and internal applications. If you do, don’t forget to tell us about it, we would love to feature your work! Your contributions and feedback help us make Appsmith better and we really appreciate it.
Join the community! Come chat with us on Discord, or jump in on Github directly! You can also follow us on Twitter and Linkedin.
Don’t forget to sign up for our live events!
We’re back again this month with updates from the last 30 days. Apart from adding support to self-hosted Appsmith instances, we’ve got some big features we shipped last month.
Here’s a low-down on what we were up to!
We know how important CRUD applications are for internal operations. Why should something so critical to an organization's success be difficult to make? We’ve made it super easy to make one. What if we said that you can now make the entire CRUD application with all the UI, logic, and complete control in just one click? Now, it’s possible.
We’re super excited to announce our new feature called the “Generate New Page from Database” With this, you can build CRUD applications within no time. To learn more about this feature check out this blog here or watch a quick demo here.
Want to create your own CRUD app on Appsmith, here’s how you can do it:
If you’re new to Appsmith follow the steps below:
You’ll see the following options:
Now, you can select the table and add a searchable column. As soon you click on the Generate Page, you’ll see the UI where all the CRUD operations can be performed.
Hola, and with just one click the entire application is generated!
Icons are a great way to create a better user experience! On Appsmith, buttons are widely used for performing different actions such as calling APIs, opening modals, showing alerts, and many more. Sometimes, it might be hard to find the right buttons; in such cases, our new icon widgets come in handy. You can use it to create a better user experience or perform actions similar to the button widget.
We ship this icon widget with a wide range of customization, and you can choose these from 300+ icons or connect with your own. Like other widgets on Appsmith, we've added buttons like button style, button variant, border radius, box-shadow, and shadow colour to help you create the perfect application!
Here's a sneak peek of some of the variants created using the icon widget.
Awesome right? What are you waiting for? Give it a try!
When building huge internal applications on Appsmith, sometimes it’s hard to navigate to the right widget or data source queries, to overcome this, we’ve redesigned our entire Omnibar. With this, you can navigate to any widget, or data source query at any point of time with a single click, not just that, you can search for any query from our documentation directly from inside the application using Omnibar, all you’ll need to do is use the keyboard shortcut CMD + K or CTRL + K and enter your query!
So far, we’ve made quite good progress with our widget grouping feature. With this, developers are able to copy and delete multiple widgets at a time. Now, we’ve added the most requested feature! Yes, it’s moving multiple widget’s when widgets are grouped. Just, select the required widgets by dragging them over them and move across the canvas to multiple widgets at one time! Cool right? You can also use this to move widget’s into containers as well. Here’s the GIF showing the same:
We’ve got a host of other bug fixes and updates too, be sure to check out our release notes here.
Many companies and organizations rely on internal dashboards or admin panels that are connected with different data sources. In this guide, you’ll learn how to integrate a MongoDB data source with Appsmith and build creative dashboards.
Usually, building an admin interface over MongoDB is a time taking process and a lot of configuration has to be made. Also, for database management, schemas and queries have to be maintained on a different platform. While the UI client would be needing one more server. But with Appsmith, you can have everything under one roof and you can build UI within no time. Let’s see how by connecting to MongoDB on Appsmith. Below is a screenshot of how our dashboard is going to look like:
If you prefer a video tutorial, check out our video on How to Build a MongoDB Admin Panel in 5 Minutes!
Usually, MongoDB clusters are hosted on the cloud. Now let’s connect to one of the example clusters that’s on MongoDB cloud and list out all the data that’s present inside the database.
"The database we’ve worked on is a collection of product and sales information. You can find the finished admin panel app here."
You have your data-source connected, and also a query that can fetch all the product items for you. Now, let’s put these on a table and render all the data. To do this, you’ll have to navigate to the Page, find the Table Component under the Widgets section, drag and drop it to the canvas. Next, open the table’s property pane by clicking on the cog-wheel on the table. Now under the Table Data property, add the following snippet:
Here, you’re using the get_products DB query and rendering the data from it onto a table.
"Appsmith allows us to parse javascript using the moustache syntax {{ }}."
Not just reading data, with Appsith you can perform all CRUD operations on the MongoDB. Now on our dashboard/page let’s create a form that allows us to update any selected value on the table.
To build this form, we’ll need to drag over a form widget, a bunch of text widgets, an input widget, and a date picker widget to the canvas. The form should look like this after setting up the UI:
Once we have the form setup, we would need to link the form to the table so that when a product is clicked on the table, the corresponding information is pre-filled on the form.
Appsmith provides us with an easy way to hook into a widget’s state. You can configure the text widget to show the name of the product selected on the table by setting its Text property to:
You can do the same for the date picker and input widget so that the default text is set based on the item clicked on the products table. For example:
Also, don’t forget to set the Data Type of the input widget to Number.
Lastly, you’ll need to write a query that grabs data from the form and updates the product selected on the table when the submit button is clicked. To set this up, click on the cogwheel on the submit button. Then set the onClick to execute a DB query and then click on create a query:
Let’s call this query update_product and configure it this way:
The update_product query shown above updates the item with _id selected on the table with quantity and expires_at gotten from the input and date picker widgets. Clicking the submit button on the form triggers this query.
You’ll now have a functional dashboard that displays product information with a form that allows us to update an individual product.
Additionally, you can display data using charts. We have a sales collection that lists sales data of a particular product. It’s a good idea to display this data in a chart.
To build this functionality, we need to go back to the table widget and configure the onRowSelected action to execute a DB query and then, click on create a new query.
Let’s name this query get_product_sales and configure it like this:
The above query filters sales information on the sales collection for the product with the _id selected on the table. Also, this query will run whenever a row is selected on the table.
Lastly, we need to display the data from this query in a chart widget. So drag in a chart widget and configure the Chart Data to be:
And we can see the chart widget re-rendered with the sales data for the selected product on the table. You can go ahead and tweak the widget as you see fit.
To deploy the admin panel, hit the deploy button at the top right corner. You can share the admin panel by clicking the share button and toggling the switch to make it public or only invite people you want to have access to the app (i.e people in your organization) via email.
Kudos! Your admin panel is now up and running!
with inputs from Confidence Okoghenun
Gitlab is eating the world, or so we thought till we moved to GitHub as an opensource company. That should tell you enough about our love for Gitlab, but there is one thorny problem with Gitlab CI that didn't have a solution in any pricing tier. It's the ability to trigger CI jobs with custom parameter values manually. This article will explore the benefits and drawbacks of manual jobs, potential workarounds, and finally, how using Gitlab API and forms, we can get around this problem.
Although CI is primarily aimed to be continuous (I didn't see that coming, did you?), there is still a precious place for manual triggering of jobs in a CI pipeline. This becomes especially apparent when we consider parameters in the build process. For example, you are working on a separate branch that does a PoC of a new feature. You want to ensure that the CI can handle the codebase in this branch but don't want to push your official organization. So, if your build script took parameters (with sane defaults, of course) that can be configured to have the image pushed to your personal organization, you'll be able to test it to your heart's content. What's more, you can even run the Docker image and check all is in order. Basically, you don't break the app.
Another simple example would be when you have a specific set of servers you want to push your changes to from a specific branch in your repo. This is a case of CD, with finer control. You can use the same deploy pipeline but set the branch and server(s) variables and run this job to get the desired outcome. This becomes incredibly useful as the organization scales and has multiple branches, teams, and servers, especially in this age of mono-repos.
If you're a pipeline wizard, you can probably spin off a new script each time for these jobs and run these scripts each time, but a more practical solution would be to use a pipeline template and have a few variables (set defaults for a standard run) that can be populated for manual runs. This is where Gitlab comes a bit short.
I have no idea what I am doing here!
If you're willing to compromise on everything else Gitlab has to offer, Jenkins is your go-to for CI/CD and boy does it ship with an out of the box manual job runner. But of course, who wants to compromise on all the other awesome stuff from Gitlab?
The biggest inconvenience stems from the fact that Jenkins and Gitlab are two separate systems. It's up to the developer to ensure that these two talk to each other well and stay on good terms. For example, If the source code on Gitlab moves from being a Java project to a Golang project, the Jenkins build jobs must be configured to stop using Maven and start using go. Having Gitlab be the integrated solution for both your source code and your CI pipelines is just too convenient. The overheads of running Jenkins and Gitlab will just make your team grumble much more than usual.
Let's say you do end up integrating with Jenkins, are you sure this is enough for you to sacrifice all of Gitlab's CI/CD efficiencies for?
Do you want to integrate this with your repo?
Assuming you haven't ripped apart your Gitlab instance and installed Jenkins, and you're still asking yourself "So how does one trigger manual jobs for Gitlab?", the main (and surprisingly the simplest) suggestion is to build a form for each job and use Gitlab API to trigger it - from the discussion for this issue from four years ago (remember, Google is your friend). Why don't we give that a shot? Sounds simple enough, right?
We're not even getting started here 😰
Voila? 🤔
But a few things to remember before we deploy that in production. You need to update the branch list whenever that changes, which is almost every day. Also, remember to add or remove any parameters along with your build pipeline. Every time you run a manual job, you essentially have to rebuild this file, or scope all potential manual jobs and have files ready. This is really inconvenient.
Beyond just being inconvenient, this method doesn't scale. Even if you maintain this HTML form as part of your source code, it still warrants a significant maintenance effort. You don't want to spend time building/debugging/fixing/maintaining your pipeline-runner, you want to build the software you are actually working on.
Fear not, Appsmith is here. While not an official workaround, appsmith makes it incredibly easy to create your forms and set up the API needed to run manual forms. Building the form will be easier than in Jenkins, API calls can be managed gracefully in the interface, AND you can build a job runner that looks like this in 10 minutes.
We've built a small tutorial to walk you through how we create a manual pipeline to deploy your code on multiple production servers. Let’s get started!
Appsmith is an open-source cloud or self-hosted platform to build admin panels, CRUD apps and workflows. Appsmith helps you speed up application building through fast UI creation, and making you write code only when necessary.
Here’s a video to get you started!
We’ll be building a dashboard on Appsmith to simplify and manage a simple CI/CD workflow that allows developers to deploy software by selecting a specific branch and server.
Additionally, we’ll create options to
This dashboard is going to be created entirely using Appsmith and the Gitlab API.
We’ll be using a Gitlab repository named ci_cd to follow along and set up workflows. It’s a basic “Hello World!” Node.JS application that is deployed to multiple servers on Heroku. We have our .gitlab-ci.yml file configured in such a way as to run two jobs. The first job is to perform a test with the npm test command, and the second is t deploy our app onto Heroku using a ruby gem called dpl.
The entire workflow is configured dynamically so that it can be deployed to any Heroku server given a Heroku <app-name> and an <api-key>. To hide these key’s we’ll be setting these out in our environment variables to the workflow. Lastly, on Heroku, we have two deployment servers appsmith-ci-cd-server1 and appsmith-ci-cd-server2.
Below is a snippet showing the content of .gitlab-ci.yml file.
Now that we have a clear picture of what’s cooking, let’s head to Appsmith and start building our Dashboard. If you haven’t signed up, you can get started for free, here.
Next, let’s head over to our Appsmith dashboard and create a new application by clicking on the Create New button. We’ll be now redirected to a new application named “Untitled Application 1”. Now, let’s give our app a creative name, let’s call it Deploy Dashboard. Our first step is to build a feature that would list all the existing and future workflow history. To do this, let’s utilise Gitlab’s pipeline API, fetch all the details and display it onto the Appsmith table widget.
Let’s go ahead and configure our workflow API Gitlab.
In this section, we’ll be using the GitLab API as a data source to configure it with the Appsmith Deploy Dashboard application. Let’s now create a new API, we can do it by navigating to the API section under Page1 and clicking on Create New option.
Paste the following in the request form and click on Save as Data Source
Next, let’s follow the below steps to display all the existing workflows onto the Appsmith dashboard.
Our Datasource is up and running, now let’s head back to the API section on Appsmith and create a new API to fetch all the existing workflows on the repository. Now create a new API and set the name as get_pipelines. On clicking on the URL we have suggestions to use our previously configured GitLab data source. Use the suggestions and add /pipelines to its end. The URL should now look like the following:
Hit the Run button and you will be greeted with an array of the workflow linked to that repository! Sweet, isn’t it?
Now to make things cooler, let’s build UI to display all these CI/CD workflows on the Appsmith page. Click on the widgets on the navigation bar and drag and drop a table widget onto the canvas. You should see a new table with some pre-populated data. We should also see a floating pane, that consists of all the table properties. Under that pane, edit the Table Data property to the following:
Now, we can see data from the get_pipelines API rendered on the table. You can go ahead to rearrange the column and disable columns that you don’t want showing up on the table i.e sha and updated_at.
Now let’s add a new feature to trigger a new workflow on the same dashboard. To do this, we’ll create a new button by dragging and dropping a button widget. Rename the button to Trigger New Pipeline. Also, drag in a modal widget to the canvas. The button should be configured such that the modal is opened whenever it’s clicked. On the other hand, the modal’s type should be set to form modal and we’ll drag in two dropdowns with corresponding labels into it. The first dropdown should be configured to select a branch with the following options:
Similarly, we configure the second dropdown to show the server options that are configured on Heroku namely, appsmith-ci-cd-server1 and appsmith-ci-cd-server2:
Perfect, we should now see a great looking modal on our Appsmith dashboard.
Let’s head back to the API section and create a new API to trigger a workflow whenever the Confirm button from our modal is clicked. Let’s name this API as create_pipeline and set the value to the following:
Additionally, we have the option to provide variables and ref (meaning the source branch) in the body of this endpoint. We should configure the body as given in the below snippet.
By looking at the above snippet, the ref key is obtained from the branch dropdown, which was previously configured and in the variables section, the value of the heroku_app_name key is obtained from our server dropdown.
"You can find the value of heroku_api_key from your Heroku account under the Settings-> API Keys section."
Lastly, let’s head back to the modal and configure the onclick action of the confirm button to trigger the create_pipeline endpoint. Add the following JS snippet to the onclick property under the button settings.
Kudos! With this, we should be able to trigger a workflow from the Appsmith dashboard itself. Let’s now fine-tune this to have more features in the next section.
Alright, in the last section, we’ll now add fine-grained controls such as deleting, cancelling, retrying, and viewing workflows. These are quite similar to each other, let’s look at the delete workflow option and you can try adding the rest as an exercise :)
Deleting the CI/CD Workflow from Appsmith Dashboard
To implement this feature, let’s add head back to our table and add a new “Custom Colum”. You can find it under the table settings pane. Let’s name this column as delete. To make our dashboard more intuitive, we can set the column type to button and add the label as delete. Now let’s create a delete API under the APIs section and name it as delete_pipeline. Use the following endpoint to add functionality.
This API grabs the id of the selected row from the table, which is automatically set when the delete button is clicked. Heading back to the delete button, let’s configure the onclick action to run the delete_pipeline api and call the get_pipelines api on success to update the table. Here’s the configuration JS snippet:
Perfect, now we have the ability to delete a specific workflow from the Appsmith dashboard itself.
"Disclaimer: Clicking on this button will delete that pipeline for good. As a safety measure, you can add a confirmation modal to prevent accidental delete."
Here’s a quick lookup to configure the other actions to play with our workflows:
Retry Workflow:
Cancel Workflow:
We are glad you made it this far. As a quick summary, here’s a gif to show everything we’ve built so far!
Honestly, that was a lot to take in, but we’ve been able to go through a complete flow of how you can build a custom dashboard to manage your ci/cd process. Also, here's a quick demo of the app that we've built! And we are quite sure you’re bubbling with ideas on the limitless use cases you can build with this. So go into the world and build amazing stuff!
Image Credits: Photo by Ryan Quintal on Unsplash