What All Did I Use to Build This Application?

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

Build a Payment Link Generator App with Stripe APIs

Vihar Kurama

minutes ↗

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

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

Let's dive in!

Setting up Stripe Account

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

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

Your dashboard will look like this:

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.

Building UI on Appsmith

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

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

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

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

Product Name
Price
Quantity
Success URL
Capture Method

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

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

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

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

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

Authorization - BEARER <token>

Lastly, let’s send the data as a payload using the filling FORM_URLENCODED data since we are collecting all the inputs in a form widget. Alternatively, we could also add the payload in the JSON Body filed.

To bind the data on the API, we’ll need to use the moustache bindings and the input widgets names. Here’s how we can access the data from the price the amount widget:


{{amountInput.text*100}}

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

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:

‍

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:

‍

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

‍

March Round-up: Templates, JSON Form, and More Product Updates

April

March Round-up: Templates, JSON Form, and More Product Updates

Vihar Kurama

minutes ↗

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days!

I am here to give you all the deets; follow along!

A Headstart for Your Apps!

We’re launching templates! Our ready-made apps are easy to use, forkable, and are bound to give you a little nudge in the right direction. Directly connect your datasource and get customizing!

The Appsmith templates library will be an ever-growing forkable collection of pre-made applications. These apps span across use-cases that will speed up onboarding for new users and makes application development faster.

You can access templates on our website and inside your Appsmith dashboard.

Read the full announcement here.

All-New JSON Form Widget

We’ve just launched the JSON Form Widget, one of our most requested features. It’s live on the cloud app and will be live on the self-hosted app very soon. The JSON form widget is helpful for quickly generating (dynamic or otherwise) forms from JSON fields from queries, APIs, or JS Objects. Check out the documentation for more details.

Here's a short video on how you can generate a form from a table:

Read the full announcement here.

Promises in the Table Buttons

The table widget is one of the most used widgets on Appsmith; it gives the ability to convert column data into different data types, including buttons! With this, developers can add different actions on the onClick property of the button, for example, redirections, showing modals, running queries, etc. Appsmith supports JS throughout the platform using the moustache syntax, but using JS promises to execute actions in the sequence was limited. But now, we got you covered; the Table Button (columns that are set button type) also supports the async-await functions. All triggers are wrapped in a promise, so any missed error will result in an uncaught promise error.

Here’s a simple snippet that can be used in the table button’s onClick property to run a query and then show an alert:


{{
  (function() {
        // the .then will not run if the promise is not returned
        return MockApi.run()
            .then(() => showAlert('success'))
    })()
}}

‍

New JS Powers to Icon Button Widget

Using JavaScript, we can dynamically add and choose icons in the icon button widget. This will allow developers to customize their applications based on conditions, actions, etc. Here’s a simple example: if you’re adding different links to an icon button widget, it can be super handy. You can update the button icon based on the URL – Google Icon when the icon button redirects to a google page, GitHub icon when the icon button redirects to a GitHub page, etc.

Not just that, you could also replace the close buttons on the modal with the Icon Button widget for more customization.

Product Updates

Updated Shortcuts for Ease

To create new queries on Appsmith using keyboard shortcuts, you’ll need to use Command/Control + Plus; previously, this was Option + Shift + N. To learn more about all the shortcuts on the platform, you can use Shift + ?.

Smart Substitution for known MongoDB Datatypes

Smart substitution handling helps users use MongoDB types like ObjectId or ISODate inside the quotes, and the query works correctly with MongoDB. With this, you can focus more on the logic than worrying about the request data. You can toggle this feature on and off on the query settings page:

Following are the MongoDB types that can be handled:

ObjectId
ISODate
NumberLong
NumberDecimal
Timestamp

Email Notifications on Comments

Several developer teams love the commenting feature on Appsmith when building internal applications together. We've added that the comment author's email is set as the comment notification email to make it more fantastic. You can update these details from the settings page.

New Collaborations, Technical Content, Videos & Tutorials

Last month was crazy for us; we’ve published a couple of new blog posts and have successfully hosted four live events!

We’ve written an in-depth tutorial on how you can dynamically generate PDF reports from Appsmith using n8n and APISheet. Note that this can also be done by using REST APIs from APISheet.
Confidence, our Developer Advocate, made a few guides on using the select widget, adding search for table widget, and using a debugger on Appsmith. Do check them out :)
We also created a very cool interview with our engineers Ashok and Rahul on how they’ve built a react library to improve the drag and drop experience on Appsmtth. Watch it here.
Not just these, we also pulled out an awesome How Do I Do X on Appsmith (#2) session in our community where we discussed how you could use Pagination, do bulk uploads, and some cool hacks appsmith framework. Watch it here.

If you're curious about what we were up to, look no further and follow this link.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

Build a Tool to Generate PDF Files with APITemplate and n8n

Build a Tool to Generate PDF Files with APITemplate and n8n

Vihar Kurama

minutes ↗

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

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

Getting Started: Setting up Appsmith and the Data to Export

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

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

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

For this, click on the + icon next to the Datasources on the left sidebar under Page1.
Now choose the users database (Postgres) under-sample databases section.

With this, you should see users' databases under your data sources section on the left sidebar. Now create a new query by clicking on Create New button from the user's datasource.
This will create an empty query named Query1, rename this as getUsers and paste the following SQL query:


SELECT * FROM users ORDER BY id LIMIT 10;

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

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

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

{{ getUsers.data  }}

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

Following is what the application looks like now:

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

Setting up APITemplate.io

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

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

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

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

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

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!

Creating a Workflow on n8n

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

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

Now, let's create the workflow:

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

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

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


{
    items:{{Table1.tableData}}
}

‍

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

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

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

First, copy the API key to the Credentials for APITemplate.io property.
Set resource to PDF and Operation to Creation
The template ID property can be found under the manage templates tab; this refers to the template created in the last section.
Toggle the JSON parameters and Download to ON
Copy the following in the Properties:

{    
    "items": {{(JSON.stringify($node["Webhook"].json["body"]["items"]))}}
}

‍

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

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

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.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

February Round-up: Helm Charts, Product Updates, and Collabs

February Round-up: Helm Charts, Product Updates, and Collabs

Vihar Kurama

minutes ↗

If you’ve followed Appsmith for a while, you know that we can do a lot in 30 days! In the second month of 2022, we cleared a few bugs and created an all-new event called How Do I Do X, where many frequently asked questions live.

I am here to give you more deets; follow along!

Appsmith Support on K8s with Helm Charts

We’ve added support to deploy Appsmith on K8s using Helm charts. Deploying Appsmith on Kubernetes clusters has now become super-easy with Helm charts. If you have a cluster ready, you’re three commands away from your own Appsmith on k8s.

Read the complete documentation here!

To explain this feature in detail, we had Shri, one of our engineers, join us on a community call. Take a look:

Product Updates

New Entity Explorer**: We’ve shipped an all-new entity explorer that’ll help you navigate to any query or widget and give you an entire overview of all the application data. Here are the changes we’ve made:

We no longer show the entities from all the pages. Only entities pertaining to the specific page that the user is currently on will show up—performance improvements by writing better selectors and memoizing components.
Queries now have the same icon as the datasource and are sorted under the datasource.
We have a new section that shows all the queries and JS Objects. They are grouped and sorted by default.
The widgets section is expanded only on demand.
Action creation will now go via the Omnibar.
Bindings are no longer under the entity but are shown in a separate popover.

Here’s a screenshot:

Mobile Responsive UI

Appsmith application dashboard, settings, and configurations are now mobile-compatible. With this, you can share apps, manage members and view your applications through any mobile device.

Here are a few screenshots:

New S3 Command

We added a new query to our S3 datasource that lets us delete multiple files at a time in given bucket storage. All you’ll need to do is input the bucket name and send the file names in an array separated by commas. Note that these inputs will also allow dynamic binding using the moustache operator from appsmith.

More keyboard control in Widgets

Internal tools usually deal with a massive amount of data. Hence having more keyboard control over all the widgets will save a considerable amount of time, especially while working with forms, widgets, and select-dropdowns.

With this update, you can navigate options inside the multi-select widget using general keyboard shortcuts.

Use Tab to focus the dropdown.
Enter Space key to open the dropdown
ArrowUp ArrowDown keys to navigate
Enter or Space to select an option
Enter or Space or ArrowRight to open submenu
ArrowLeft to close sub menu

Additionally, you can use these on input widgets as well:

Tab to focus
Enter to switch to editable mode
Esc to move out of editable mode

Support Body in GET API Requests

Now all HTTP methods support a body in the HTTP request. This feature adds another tab in the Rest API plugin called None. Users can use this to define HTTP requests that don't have a body. In the Body field, clicking on None will remove the content-type header, while clicking on RAW will keep any existing content-type header.

We also refactored the ApiEditorConstants to use enum values instead of arrays. It makes the code more readable and understandable in various places.

New Collaborations, Technical Content, Videos & Tutorials

Last month was crazy for all of us; we’ve published seven new blog posts and have successfully hosted four live events!

We built admin panels on SnowflakeDB, ArangoDB, MariaDB, MSSQL, Firestore, and Redis, all on Appsmith. Not just that, we have more coming soon; if you would like us to work on any new integration, feel free to reach us on Discord.
We created a fully authenticated internal application without writing any code, using Xano as the backend. Check out the full tutorial here to learn how we’ve made it.
Sathish Gandham, a frontend engineer focusing on UI performance at Appsmith, explains to us how How 40 Lines of Code Improved Our React App’s Performance by 70%; read the full blog here.
That’s not everything; we’ve collaborated with Cube to build a metrics dashboard on Appsmith live using Cube’s APIs as backend. Watch the full video here.
Confidence, our developer advocate was invited to Hasura’s Data and API Show to demo how one can build internal tools dashboards using GraphQL API and Appsmith. Watch the entire event here.

If you're curious about what we were up to, look no further and follow this link.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

Build a CRUD App with a Redshift Database

Build a CRUD App with a Redshift Database

Vihar Kurama

minutes ↗

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.

Connecting Redshift on Appsmith

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.

Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
Create a new application under the dashboard under your preferred organization.
On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
Next, click on the Now, navigate to the Create New tab and choose Redshift datasource; you’ll see the following screenshot:

All these details can be found under the configuration settings when using Redshift on a hosted service.

Note: I’m using a free Redshift account on Amazon Web Services (AWS) in this example.

Rename the Datasource to Redshift CRUD by double-clicking on the existing one.

Here’s what the configuration would look like:

Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. Hit the ‘Save’ button to establish a secure connection between Appsmith and Redshift if it returns a successful message.

Using Redshift’s Seed Data

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!

CRUD on Redshift with Appsmith

Implementing the Read Operation

First, let’s read our data from the database and display it on a beautiful table widget. Follow the below steps:

Click on the + icon next to the datasources and click on create New + from the Redshift CRUD datasource.
Rename the query to getCategories
Copy the following SQL script to query all the Categories from the category table:

‍


SELECT * FROM public."category" LIMIT 10;

This simple query returns all the category details present in the sample data item. Hit the RUN button to view all the results.

We now have our query; let's bind this onto the table widget; for this, follow the below steps:

Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
You can make any configurations to any widget via the property pane. Click on the table widget on the canvas; you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:


{{getCategories.data}}

‍

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.

Implementing the Create Operation

To add the create operation on Redshift, 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 Categories into our database.

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:

Click on the + icon next to the datasources and choose to Create New + from the Redshift CRUD datasource
Rename the query to addCategory
Copy the following SQL script:


INSERT INTO public."category" ("catgroup", "catname", "catdesc")  VALUES ('{{Input1.text}}', '{{Input2.text}}', '{{Input3.text}}');

‍

Implementing the Update Operation

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:

Click on the + icon next to the datasources and choose to Create New + from the Redshift CRUD datasource
Rename the query to editCategory
Copy the following SQL script:

‍


UPDATE public."category" SET
    "catgroup" = '{{Input1Copy.text}}'
    "catname" = '{{Input2Copy.text}}'
    "catdesc" = '{{Input3Copy.text}}'
  WHERE "catid" = {{Table1.selectedRow.catid}};

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:

Implementing the Delete Operation

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:

Create a new custom column on the table by clicking on Add a New Column under the columns property.
Now, rename this column to ‘Delete 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.

Now, let’s write the Delete query using SQL:

Click on the + icon next to the data sources and choose the Create New + from the Redshift CRUD datasource
Rename the query to deleteCategory
Copy the following SQL script:


DELETE FROM public."category"  
    WHERE catid = {{Table1.selectedRow.catid}};

‍
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.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

Adding Social Authentication for Your Internal Applications Without Writing Any Code!

Adding Social Authentication for Your Internal Applications Without Writing Any Code!

Vihar Kurama

minutes ↗

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.

Getting Started: Creating an Account on Xano and Appsmith

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.

Navigate to appsmith.com and sign-up for a new account if you’re a new user or login to the existing one.
Navigate to xano.com and sign-up for a free account on the other tab. Ensure you select the Google authentication in the auth types during the onboarding process.

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.

Before we start to use them, let’s first get our OAuth credentials from Google, for this, you’ll need to open Google Console, and create your API credentials. Here’s what it would look like:

If you’re new to creating social auth keys on Google console, you can follow these steps from the documentation here.

Now you will need to navigate to the Settings tab on the Xano dashboard and hit manage on the Environment Variables. Under this, we’ll see google_oauth_client_id google_oauth_secret variables. Here, copy the credentials from the Google console.

Building the UI on Appsmith

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:

Create a new application on Appsmith, and choose “Build from scratch using drag and drop”.
Rename the Page name from Page1 to login by clicking on the existing page.
Click on the + icon next to widgets from the side bad and drag and drop a container widget onto the canvas.
Now, add a button widget and a text widget inside the container to create an authentication form.
Click on the text widget and set the Text property to Log in, similarly set the button label to Continue with Google.

Here’s a screenshot of the form that’s built on Appsmith:

Initializing the Authentication Flow

To initialize the authentication process, we’ll need to configure APIs on Appsmith from Xano, to do this follow the below steps:

Open the Xano dashboard, and navigate to the Settings tab; now click on the google-oauth API group.
We should see all the APIs that we can consume to finish our authentication, and yes, all these are automatically generated without writing any code, thanks to Xano.
Now, select the oauth/google/init API and copy the endpoint.

On Appsmith, click on the + icon next to Datasources and create a NEW API.
Rename the API endpoint to init, and paste the copied URL.
This endpoint expects an redirect_uri, this basically, redirects to another page if the authentication is successful. So, we’ll need to create a new page on Appsmith, and copy it’s URL to the redirect_uri param on the init API.
Now create a page on Appsmith, by clicking on the + icon next to the Pages on the sidebar. Rename the page to welcome.
Copy its URL, navigate back to login and paste the URL in the redirect_uri param, here’s how the API should look like:

We’ll need to add the Redirect URL onto the google console so as to redirect from Google Auth after the redirection is successful.

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.

Configuring the continue Authentication Flow

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.

Drag and drop a container widget onto the canvas, just like we did it for the login page.
Add an image, text widget and a button widget for the look, here’s how I’ve designed it, you could add images and colours of your own choice:

Next, create a new API by clicking on the + icon next to the datasource section and follow the below steps:

Rename the URL to oauth_continue
Copy the /oauth/google/continue endpoint from Xano and paste it into the request URL.
This endpoint needs two parameters:
code: which will be queried from the URL queryParams. (accessed from the previous login page after the redirection from google is complete)
redirect_uri: Same as the Page URL

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.

Securing Pages on Appsmith with Xano Auth

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:


{{appsmith.store?.user?.token? 'logedin':'notlogedin'}}

‍

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.

A Simple Front-end for Your Redis Datasource

A Simple Front-end for Your Redis Datasource

Vihar Kurama

minutes ↗

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.

Getting Started: Connecting Redis on Appsmith

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.

Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
Create a new application under the dashboard under your preferred organization.
On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
Next, click on the Now, navigate to the Create New tab and choose Redis datasource; you’ll see the following screenshot:

When using Redis, all these details can be found under the REDIS APP console under project settings.

Rename the Datasource to Redis CRUD by double-clicking on the existing one.

Here’s what the configuration would look like:

Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the Save button to establish a secure connection between Appsmith and Redis.

Creating Key-Values on Redis

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 GET on Redis

Using this command, we can fetch all the key-value pairs on the Redis datasource. To query this on Appsmith, follow the below steps:

Click on the + icon next to the datasources and choose to Create New + from the Redis CRUD datasource
Rename the query to getKeys
Paste the following command under the Query tab:


Keys *

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:


{{ getKeys.data }}

‍

Using SET on Redis

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:

Click on the + icon next to the datasources and choose to Create New + from the Redis CRUD datasource
Rename the query to createKeys
And paste the following command:


SET {{Input1.text}} {{Input2.text}}

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.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

Build a CRUD App with a Firestore Database

Build a CRUD App with a Firestore Database

Vihar Kurama

minutes ↗

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.

Getting Started: Connecting Firestore on Appsmith

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.

Create a new account on Appsmith (it's free!), if you are an existing user, log in to your Appsmith account.
Create a new application under the dashboard under your preferred organization.
On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
Next, click on the Now, navigate to the Create New tab and choose Firestore datasource; you'll see the following screenshot:

When using Firestore, all these details can be found under the firebase console under project settings.

Rename the Datasource to Firestore CRUD by double-clicking on the existing one.

Here’s what the configuration would look like:

Note: For service account credentials, generate a new private key and copy its contents.

Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the 'Save' button to establish a secure connection between Appsmith and Firestore.

Creating a new Table on Firestore

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:

name: string
assigned_to: string
complete: boolean
deadline: datetime

Alrighty, our collection is not created; let's get into CRUD.

CRUD on Firestore with Appsmith

Implementing the Read Operation

First, let's read our data from the database and display it on a beautiful table widget. Follow the below steps:

Click on the + icon next to the datasources and choose Create New + from the Firestore CRUD datasource.
Rename the query to getTasks
Set the query command to Get Documents in Collection
Set the Collection/Document Path * to collection name, which in our case is tasks
This simple query returns all the task details in the sample data item. Hit the RUN button to view all the results.

We now have our query; let's bind this onto the table widget; for this, follow the below steps:

Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
You can make any configurations to any widget via the property pane. Click on the table widget on the canvas; you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:

{{getTasks.data}}

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.

Implementing the Create Operation

To add the create operation on Firestore, 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 a new task into our database.

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:

Click on the + icon next to the datasources and choose to Create New + from the Firestore CRUD datasource
Rename the query to createTask
Set the commands to Create Document
Set the Collection/Document Path *to tasks/{{Math.random().toString(36).substring(7)}}
Finally, set the body property to:

{
    "name":"{{Input1.text}}",
    "deadline": "{{DatePicker1.formattedDate}}",
    "assigned_to": "{{Input2.text}}",
    "complete": false
}

‍

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:

Implementing the Update Operation

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:

Click on the + icon next to the datasources and choose to Create New + from the Firestore CRUD datasource
Rename the query to editTask
Set the Collection/Document Path* to tasks/{{Table1.selectedRow._ref}}
Finally, set the body property to:

{
    "name":"{{Input1Copy.text}}",
    "deadline": "{{DatePicker1Copy.formattedDate}}",
    "assigned_to": "{{Input2Copy.text}}",
    "complete": false
}

‍

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.

Implementing the Delete Operation

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:

Create a new custom column on the table by clicking on Add a New Column under the columns property.
Now, rename this column to ‘Delete Task,’ 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.

Now, let’s write the Delete query:

Click on the + icon next to the data sources and choose the Create New + from the Firestore CRUD datasource
Set the commands to Delete Document
Set the Collection/Document Path* toSet the Delete Task button’s onClick property to run the deleteTask query.

tasks/{{Table1.selectedRow._ref}}

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.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

A simple front-end for your MariaDB datasource

A simple front-end for your MariaDB datasource

Vihar Kurama

minutes ↗

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.

Getting Started: Connecting MariaDB on Appsmith

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.

Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
Create a new application under the dashboard under your preferred organization.
On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
Next, click on the Now, navigate to the Create New tab and choose MySQL datasource, you’ll see the following screenshot:

When you’re using MariaDB on a hosted service, all these details can be found under the configuration settings. For this example, I’m using a free MariaDB RDS on Amazon Web Services (AWS).

Rename the Datasource to MariaDB CRUD by double-clicking on the existing one.

Here’s what the configuration would look like:

Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the ‘Save’ button to establish a secure connection between Appsmith and MariaDB.

Creating a New Table on MariaDB

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.

Click on the + icon next to Datasource and click on Create New + from the MYSQL CRUD we’ve just created.
This will redirect you to the query pane, where you can write MariaDB SQL queries, now rename the query to seedData, and choose to create from the template and paste the following in the query body:

create table projects(
    project_id int auto_increment,
    project_name varchar(255) not null,
    created_at timestamp default current_timestamp,
    primary key(project_id)
);

INSERT INTO projects (project_name, created_at)
  VALUES ('appsmith', '2022-02-02T19:11:23');

‍

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.

CRUD on MariaDB with Appsmith

Implementing the Read Operation

First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:

Click on the + icon next to the datasources and choose to Create New + from the MariaDB CRUD datasource.
Rename the query to getProjects
Copy the following SQL script to query all the Projects from the projects table:

SELECT * FROM projects LIMIT 10;

‍

This is a simple query that returns all the projects present in the sample data item. Hit the RUN button to view all the results.

We now have our query; let's bind this onto the table widget; for this follow the below steps:

Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
Configurations to any widget can be made through the property pane. Click on the table widget on the canvas, you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:

{{getProjects.data}}

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.

Implementing the Create Operation

To add the create operation on MariaDB, 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 projects into our database.

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:

Click on the + icon next to the datasources and choose to Create New + from the MariaDB CRUD datasource
Rename the query to createProject
Copy the following SQL script:

‍

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:

Implementing the Update Operation

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:

Click on the + icon next to the datasources and choose to Create New + from the MariaDB CRUD datasource
Rename the query to editProject
Copy the following SQL script:

UPDATE projects SET    project_name = {{Input1Copy.text}}'    created_at ='{{Input2Copy.text}}'WHERE  project_id = "{{Table1.selectedRow.project_id}}";

‍

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:

Implementing the Delete Operation

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:

Create a new custom column on the table by clicking on Add a New Column under the columns property.
Now, rename this column to ‘Delete 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.

Now, let’s write the Delete query using SQL:

Click on the + icon next to the datasources and choose the Create New + from the MariaDB CRUD datasource
Rename the query to deleteProject
Copy the following SQL script:

DELETE FROM projects  WHERE project_id = {{Table1.selectedRow.project_id}};

‍

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.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

‍

January Roundup: New Drag and Drop Experience, Progress Bar and Input Widgets!

January Roundup: New Drag and Drop Experience, Progress Bar and Input Widgets!

Vihar Kurama

minutes ↗

No items found.

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:

When dropping a new widget, pre-existing widgets on the canvas will now automatically move out of the way.
Widgets near the canvas edge/canvas boundary will shrink to make space for the new widget.

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.

Widget Updates

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:

Input: The input widget is now more stable, but you won't be able to configure currency and phone number input types on this one.
Currency Input, Phone Input: Many internal tools need customization on currency and phone number data type; for that reason, we've separated the currency and phone number properties onto a totally new Currency and Phone Input widget. Not just that, you can configure your phone number codes and currency types with JavaScript using our geolocation APIs.

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.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

A simple Front-end for Your SnowflakeDB Datasource

A simple Front-end for Your SnowflakeDB Datasource

Vihar Kurama

minutes ↗

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.

Getting Started: Connecting Snowflake on Appsmith

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.

Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
Create a new application under the dashboard under your preferred organization.
On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
Next, click on the Now, navigate to the Create New tab and choose SnowflakeDB datasource, you’ll see the following screenshot:

When you’re using Snowflake cloud, all these details can be found under the SnowflakeCloud settings:

Rename the Datasource to SnowflakeDB CRUD by double-clicking on the existing one.

Here’s what the configuration would look like:

Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the ‘Save’ button to establish a secure connection between Appsmith and SnowflakeDB.

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.

CRUD on SnowflakeDB with Appsmith

Implementing the Read Operation

First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:

Click on the + icon next to the datasources and choose to Create New + from the SnowflakeDB CRUD datasource
Rename the query to getCustomers
Copy the following SQL script to query all the Customers from the CUSTOMER table:

SELECT * FROM TPCDS_SF100TCL.CUSTOMER LIMIT 10;

This is a simple query that returns all the customers present in the sample data item. Hit the RUN button to view all the results.

We now have our query; let's bind this onto the table widget; for this follow the below steps:

Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
Configurations to any widget can be made through the property pane. Click on the table widget on the canvas, you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:

{{getCustomers.data}}

‍

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.

Implementing the Create Operation

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:

Click on the + icon next to the datasources and choose to Create New + from the SnowflakeDB CRUD datasource
Rename the query to insertCustomer
Copy the following SQL script:


INSERT INTO TPCDS_SF100TCL.CUSTOMER (C_FIRST_NAME,C_LAST_NAME, C_BIRTH_YEAR, C_BIRTH_COUNTRY, C_EMAIL_ADDRESS) VALUES ({{Input1.text}}, {{Input2.text}}, {{Input3.text}}, {{Input4.text}}, {{Input5.text}});

‍

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:

Implementing the Update Operation

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:

Click on the + icon next to the datasources and choose to Create New + from the SnowflakeDB CRUD datasource
Rename the query to editCustomer
Copy the following SQL script:

UPDATE TPCDS_SF100TCL.CUSTOMER SET    C_FIRST_NAME = "{{Input1Copy.text}}",    C_LAST_NAME = "{{Input2Copy.text}}",    C_BIRTH_YEAR = "{{Input3Copy.text}}",    C_BIRTH_COUNTRY = "{{Input4Copy.text}}",    C_EMAIL_ADDRESS = "{{Input5Copy.text}}",WHERE C_CUSTOMER_ID = {{Table1.selectedRow.C_CUSTOMER_ID}};

‍

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.

Implementing the Delete Operation

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:

Create a new custom column on the table by clicking on Add a New Column under the columns property.
Now, rename this column to ‘Delete 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.

Now, let’s write the Delete query using SQL:

Click on the + icon next to the datasources and choose the Create New + from the SnowflakeDB CRUD datasource
Rename the query to deleteCharacter
Copy the following SQL script:


DELETE FROM TPCDS_SF100TCL.CUSTOMER_DEMOGRAPHICS  WHERE C_CUSTOMER_ID = {{Table1.selectedRow.C_CUSTOMER_ID}};

‍

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!

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

A Simple Front-end for Your ArangoDB Datasource

A Simple Front-end for Your ArangoDB Datasource

Vihar Kurama

minutes ↗

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.

Getting-Started: Connecting ArangoDB on Appsmith

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.

Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
Create a new application under the dashboard under your preferred organization.
On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
Now, navigate to the Create New tab and choose ArangoDB datasource, you’ll see the following screenshot:

When you’re using ArangoDB cloud or a self-hosted instance, all these details can be found under the instance settings:

Ensure that the SSL mode is enabled so as to establish a secure connection.
Rename the Datasource to ArangoDB CRUD, by double clicking on the existing one.

Here’s how the configuration would look like:

Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the ‘Save’ button to establish a secure connection between Appsmith and ArangoDB.

‍

Adding Seed Data on ArangoDB

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:

Click on the + icon next to Datasource and click on Create New + from the ArangoDB CRUD we’ve just created.
This will redirect you to the query pane, where you can write ArangoDB AQL queries, now rename the query to seedData, and choose to create from the template and paste the following in the query body:

LET data = [
    { "name": "Robert", "surname": "Baratheon", "alive": false, "traits": ["A","H","C"] },
    { "name": "Jaime", "surname": "Lannister", "alive": true, "age": 36, "traits": ["A","F","B"] },
    { "name": "Catelyn", "surname": "Stark", "alive": false, "age": 40, "traits": ["D","H","C"] },
    { "name": "Cersei", "surname": "Lannister", "alive": true, "age": 36, "traits": ["H","E","F"] },
    { "name": "Daenerys", "surname": "Targaryen", "alive": true, "age": 16, "traits": ["D","H","C"] },
    { "name": "Stannis", "surname": "Baratheon", "alive": false, "traits": ["H","O","P","M"] },
    { "name": "Melisandre", "alive": true, "traits": ["G","E","H"] },
    { "name": "Margaery", "surname": "Tyrell", "alive": false, "traits": ["M","D","B"] },
    { "name": "Jeor", "surname": "Mormont", "alive": false, "traits": ["C","H","M","P"]}}
]
FOR d IN data
    INSERT d INTO Characters

Lastly hit the RUN button on the top-right on the query. This will add some seed characters to our database.

‍

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.

CRUD on ArangoDB with Appsmith

‍Implementing the Read Operation

First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:

Click on the + icon next to the datasources and choose to Create New + from the ArangoDB CRUD datasource
Rename the query to readCharacters
Copy the following AQL script to query all the items from the Characters collection:

FOR c IN Characters
    RETURN c

This is a simple for-loop that iterates on the collection and returns every item. Hit the RUN button to view all the results.

‍

We now have our query; let's bind this onto the table widget; for this follow the below steps:

Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
Configurations to any widget can be made through the property pane. Click on the table widget on the canvas, you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:

{{readCharacters.data}}

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.

‍Implementing the Create Operation‍

To add the create operation on ArangoDB, 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 create new characters in our database.

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:

Click on the + icon next to the datasources and choose to Create New + from the ArangoDB CRUD datasource
Rename the query to insertCharacter
Copy the following AQL script:

INSERT {
    "name": "{{Input1.text}}",
    "surname": "{{Input2.text}}",
    "alive": {{Checkbox1.isChecked}},
    "age": {{Input3.text}},
    "traits": {{MultiSelect1.selectedOptionValues}}
} INTO Characters

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:

Implementing the Update Operation

The Update operation is quite similar to the create operation.

Let’s first build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under columns property.

Now, rename the column to Edit Character, 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 be able to update the item.
Now, copy paste Modal1, and set the onClick property of the Edit Character 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 AQL:

Click on the + icon next to the datasources and choose to Create New + from the ArangoDB CRUD datasource
Rename the query to editCharacter
Copy the following AQL script:

REPLACE "{{Table1.selectedRow._key}}" WITH {
    "name": "{{Input1Copy.text}}",
    "surname": "{{Input2Copy.text}}",
    "alive": {{Checkbox1Copy.isChecked}},
    "age": {{Input3Copy.text}},
    "traits": {{MultiSelect1Copy.selectedOptionValues}}
} IN Characters

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.

‍

Implementing the Delete Operation

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:

Create a new custom column on the table by clicking on Add a New Column under the columns property.

Now, rename this column to Delete Character, 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.

Now, let’s write the Delete query using AQL:

Click on the + icon next to the datasources and choose Create New + from the ArangoDB CRUD datasource
Rename the query to deleteCharacter
Copy the following AQL script:

REMOVE "{{Table1.selectedRow._key}}" IN Characters

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.

E-commerce Order Management Dashboard with Hasura and GraphQL

E-commerce Order Management Dashboard with Hasura and GraphQL

Vihar Kurama

minutes ↗

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.

What exactly are we building?

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:

Manage the entire product catalogue
View sales, track all details of total and recent orders
Send email to customers

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!

Connect to Hasura on Appsmith with GraphQL

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:

user: This table contains a list of all the customers who signed up for the Hasura super app.
address: The address tables contain all the user delivery addresses that will be further linked to the order.
admin: Details of all the super-admin who have access to all the dashboards
order: The order table contains all the order information a user places
order_product: This table contains a list of products that are included in the order
order_status: Contains details of order delivery status
product: Details of all the products on the e-commerce store
product_review: Reviews of products that the customers gave

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:

Click on the + icon next to datasources and choose Create new API under the Create New tab.
Rename the query to getProducts by double-clicking on the existing one.
Set the query type to POST, and paste the following URL:

https://subtle-platypus-36.hasura.app/v1/graphql

Under the headers pane, add the following key-values:

‍

content-type: application/jso
x-hasura-admin-secret: <YOUR_SECRET_KEY>

‍

Lastly, navigate to the Body property under the API pane, set the body type to JSON, and paste the following:

{{
JSON.stringify({
    variables: null,
    query: `
    query {
        product(limit: 300) {
            id
            brand
            category_display_name
            created_at
            description
            name
            image_urls
        }
}
`})
}}

‍

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.

For this, click on the + icon next to widgets and drag and drop a table widget onto the canvas.
Select the table on the canvas; this will open the property pane on the right sidebar; now, under table data, we bind the query using the moustache syntax:

And just like that, we should see all the data from the query binded onto the table.
Note that all the columns are not required for us. Hence, we can hide them by clicking on the eye-icon on the column name under the columns property.

Adding a New Product to Database

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:

First, let's drag and drop a new button widget on the canvas; the idea is to open a modal and show a form to create a new product on the e-com store.
Next, add a text widget and a few form widgets on the modal by dragging and dropping them onto the modal from the widgets section.
We can also set the form's label by updating the label property from the form's property pane.

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.

Name: getName
Description: getDescription
Category: getCategory
Brand: getBrand
Price: getPrice
ProductID: getID

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.

Rename the query to addProduct
Update the URL to:

https://subtle-platypus-36.hasura.app/v1/graphql

‍

Set the method type to POST, and copy the headers x-hasura-admin-secret, content-type from getProducts query to here.
Update the query body to the following:


{
    "query": {{JSON.stringify(`
    mutation ($object: insert_product_insert_input!) {
        insert_product_one(object: $object) {
    id
            brand
            category_display_name
            description
            price
            name
        }
    }
    `)}},
    "variables": {
        "object": {{
          JSON.stringify({
    id: getID.text,
            brand: getBrand.text,
            category_display_name: getCategory.text,
            description: getDescription.text,
            price: getPrice.text,
            name: getName.text,
        })}}
    }
}

‍

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.

Add Stats on Dashboard

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:

{{getproducts.data.data.product.length}}

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 :

‍

{{
function(){
    const filterProducts = getproducts.data.data.product.map(item => item.category_display_name)
  .filter((value, index, self) => self.indexOf(value) === index)
    return filterProducts.length
}()
}}

‍

To compute Unique Brands, we use an IIFE function and filter the getproducts query using its brand attribute :


{{
function(){
    const filterProducts = getproducts.data.data.product.map(item => item.brand)
  .filter((value, index, self) => self.indexOf(value) === index)
    return filterProducts.length
}()
}}

‍

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.

Charting on Appsmith on Hasura Data

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:

Click on the + icon next to datasources and choose Create a new API.
Set the query type to POST, and update the URL to [https://subtle-platypus-36.hasura.app/v1/graphql](https://subtle-platypus-36.hasura.app/v1/graphql)
Under the headers pane, add the following key-values:

content-type: application/json
x-hasura-admin-secret: YOUR_SECRET_KEY

‍

Lastly, navigate to the Body property under the API pane, set the body type to JSON, and paste the following:

‍

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:

Click on the + icon next to JS Objects, or use the JSObject1
Update myFunc1 to the following:

‍

myFun1: () => {

  const data = _.compact(salesGraph.data.data.order.map((row) => 
  {
        const quantity = _.get(row, 'order_products[0].product.order_products[0].quantity');
        const created_at = moment(_.get(row, 'order_products[0].created_at')).format("LL");

        // if any of those in undefined
        if (!quantity || !created_at) return undefined;

        return {
      x: created_at,
             y: quantity,
    }
  }))
    return data.slice(1, 20)
    },

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.

How I Created My Own Stock Index Tracker with Time-Series Charts using Low-Code

How I Created My Own Stock Index Tracker with Time-Series Charts using Low-Code

Vihar Kurama

minutes ↗

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:

Track stocks: Set filters on what stocks should be tracked, throughout the day by default or create specific lists.
Make your own baskets: Create customized stock portfolios as baskets.
Time-series charts to compare performances: Create a custom index for these portfolios and compare them with benchmark indexes using time-series charts.
Notify: Send notifications and triggers when there are fluctuations in the market.

‍

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:

Screenshot of Custom Index Tracker on Appsmith

Screenshot of Custom Index Tracker on Appsmith — 2

Now, let’s get started!

What All Did I Use to Build This Application?

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.

Creating Baskets to Group and Track Stocks

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.

Sign-up for a new free account on appsmith.com
Click on the + icon next to Datasources and choose Google Sheets as Datasource.
Authorize your Google Account, and create a new query by hitting the NEW API button after the data source is saved.
Renamed the query name to assBasket, as we’ll need to access query names on the UI.
I created a new google sheet with the following columns:

Basket Name
Basket Image URL
Basket Create On

Copied the URL of google sheets and pasted it under the SpreadSheet URL property.
Set the Query Type to Insert Sheet Row

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:

Image by Author | Screenshot of Page 1 Custom Index Tracker

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:

{{moment().format(“MM ddd, YYYY HH:mm:ss a”)}}

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:

{ "Basket Name":{{Input1.text}},
"Basket Image URL": {{Input2.text}},
"Basket Create On": {{Input3.text}}
}

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:

Open the property pane of List1 widget, and set the Items to {{getBasket.data}}
Inside the list widget, select the image and set the image property to {{currentItem[“Basket Image URL”]}}
Set the text widget properties to {{currentItem[“Basket Name”]}}, and Basket Created On: {{currentItem[“Basket Create On”]}}

‍

This is how it looks now:

‍

Here’s what we’ve been able to do till now:

Added functionalities to add a new portfolio/basket and list them on Appsmith.

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:

{{(function () {
    storeValue("selectedBasket", List1.selectedItem["Basket Name"]);
    navigateTo("Basket Page") })() 
}}

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.

Adding Stocks into Baskets

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:

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:

An input widget
A button labbeld as Seach
A table widget to list out all the results
A select widget to add them to the list of baskets I created

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:

Click on the + icon next to the Datasources
Select Create New API, and paste the following URL:

https://api.stockdata.org/v1/entity/search?search={{stockcode.text}}&api_token=YOUR_API_HERE

Rename the API query to stockSearch

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:

Set the buttons onClick property to run a query and choose stockSearch query.
Bind the stockSearch query to the table widget, using {{ stockSearch.data }}

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:

{{
    getBaskets.data.map((row) =>   
    {
    return {
    		label: row["Basket Name"],
        value: row["Basket Name"]    
     }  })
 }}

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:

‍


{"symbol": "{{stockSearchTable.selectedRow.symbol}}","name":"{{stockSearchTable.selectedRow.name}}","type":"{{stockSearchTable.selectedRow.type}}","exchange":"{{stockSearchTable.selectedRow.exchange}}","exchange_long": "{{stockSearchTable.selectedRow.exchange_long}}","mic_code": "{{stockSearchTable.selectedRow.mic_code}}","country":"{{stockSearchTable.selectedRow.country}}","watch_listed_on": {{moment().format('MMMM Do YYYY, h:mm:ss a')}} ,"basket": {{Select1.selectedOptionValue}}}

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:


{{     
    getStocksfromBaskets.data.filter((item) => {
    return item.basket == appsmith.store.selectedBasket
    })
 }}

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!

Building Time Series Charts and Tracking Index

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:

Inside the basket page, I created a new API (marketStackAPI), with the following URL:

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:

export default {

getBasketGraph: () => {let stocks = getStocksfromBaskets.data.filter((item) => item.basket == appsmith.store.selectedBasket)    let stockcodes = stocks.map(item => item.symbol)    let allStockData = [];    stockcodes.map((item, index)=> {    storeValue("current", item);     marketStackAPI.run(()=> {     let tempData = marketStackAPI.data;     allStockData.push(tempData.data);    }, () => {}, { allStockData });  })    storeValue("allStockData”, allStockData)    return appsmith.store.allStockData; 
}}

Here is what this code snippet does:

Stores all the symbols that are present in the basket in the stockcodes variable
Iterates through the stockcodes array and stores all the stock prices in a new variable allStockData
Returns the store variable when the function is executed

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:

Image by Author | Chart Widget on Appsmith

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:

{  "type": "",  "dataSource": {    "chart": { },    "data": [ ]  }}

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:

‍


{    "type": "MultiAxisLine",    "dataSource": {        "chart": {            "xaxisname": "Date",            "vdivlinealpha": "",            "labeldisplay": "ROTATE",            "theme": "fusion"        },        "categories": [{                "category": {                    {                        marketStackAPI.data.data.reverse().map((row, index) => {                            return {                                "label": moment(row.date).format("LL"),                            }                        })}                }            }        ],        "axis": [{                "title": "Price",                "dataset": [{                        "seriesname": "Apple",                        "data": {                            {                                marketStackAPI.data.data.map((row, index) => {                                    return {                                        "value": row.close,                                    }                                })}                        }                    },                }            ]        }    }

Finally, this is how our graph will look like with the aforementioned configurations:

Image by Author | Charts from Custom Index

Additionally, I also created a list, that tells us the index value with simple math:

Image by Author | Custom Index and Predictions 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.

December Round-up: Docked Property Pane, Switch Group, Document Viewer Widgets, Admin Page Settings!

December Round-up: Docked Property Pane, Switch Group, Document Viewer Widgets, Admin Page Settings!

Vihar Kurama

minutes ↗

Happy New Year! I am back again with a quick roundup of all the things we did in the last month of 2021! We shipped many features, fixed bugs, and hosted some fun events with our community.

No More Floaties, We’ve Got a Docked Property Pane

The Property Pane in Appsmith is a crucial part of the developer application building experience. It allows us to configure widgets’ data, actions, and events. Previously, this property pane would float around the application, next to the widget in use. We felt that this interface was rather cumbersome, especially when the number of widgets increased on the canvas. We re-invented the entire developer experience and came up with the new docked property pane. With this, users will have a clear view of what’s happening on the canvas while dropping widgets and will have complete control over customizing them on the docked property pane, which is fixed on the right side of the application.

New SMTP Plugin to Easily Send Emails

You asked for this, and we shipped it as soon as we could! 😎 Appsmith now has an in-built SMTP plugin to send emails from the applications without using third-party applications. The email service provider of choice can be selected from DropBox, Google, Outlook, etc. An email template can also be customized for the developers’ branding needs.

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 :)

New Widgets on the Block: Document Viewer and Switch Group

We are kicked about shipping widgets every month! It’s kind of like an unsaid rule to ship new widgets every month! Hah! In December, we added two new ones: a new document viewer widget and a switch group widget to our list.

Document Viewer Widget: The document viewer widget on Appsmith allows you to add PDFs inside the application. All you need to do is populate the URL of the document link property. These can be added from any datasource in which the incoming data points to a URL.

The widget currently supports the following extensions:

.txt
.pdf
.ppt (not supported by base64)
.pptx
.docx
.xlsx

‍

Switch Group Widget: The new switch group widget captures user inputs from a set of binary choices. These options can be populated from a data source like an API / Query by transforming the incoming data to an array of (label, value).

New JS APIs for Geo-Location

If you’re working with maps and geo-location, we got some good news! With our new in-built geolocation APIs, you can request current user locations, and associated information This API is stored as an object containing functions to request the current user location and the coordination received from the Mozilla Geo Location API request.

To use this in action, you can simply run {{appsmith.geolocation.getCurrentPosition()}} on a button click on any action call. As soon as the API is called, the location and the timestamp will be updated on the appsmith local store variable:

{{appsmith.geolocation.currentPosition}}

‍

Easy Self-hosting on AWS-AMI and DigitalOcean

Upgrades to AWS AMI: We refactored the first-time install script of AWS AMI deployment to fetch a new docker-compose.yml that uses a new Docker image. With this, self-hosting Appsmith with AWS-AMI is faster and smoother than ever.

Read more about this in our documentation here, and also on the AWS AMI marketplace.

Upgrades to DigitalOcean Droplet: We published a brand new DigitalOcean machine image that is easier to maintain. This image supports the new build snapshot on DigitalOcean to use the fat container deployment.

Find documentation here, and on Digitalocean marketplace here.

New Admin Settings Page to Manage Self-hosted Instances

We also shipped a new admin settings page, where you can configure all the settings on self-hosted instances/local environments when running with Docker.

You can access these by clicking on the profile icon and then selecting the Admin Settings. You’ll see the following options:

General: Configure appsmith instance name and primary email address.
Authentication: Setting to provide Google, GitHub authentication or user-name, password (form-based) authentication on self-hosted instances.
Email: SMTP configuration for ending emails from self-hosted instances
Google Maps: Configuration to allow Google Maps
Version: Know your appsmith version and latest features
Advanced: Database and domain settings configuration

We've got a host of other bug fixes and updates too, be sure to check out our consolidated release notes here.

See you next month with more updates! Do join us on Discord, follow us on Twitter, Youtube, and Linkedin to stay up to date.

It Took Us Less Than 1 Hour to Build a PgAdmin Clone with Low Code: Here’s How We Did It?

Engineering

It Took Us Less Than 1 Hour to Build a PgAdmin Clone with Low Code: Here’s How We Did It?

Vihar Kurama

minutes ↗

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:

Installation can be difficult
Troubleshooting and debugging is a complication, especially if you’re new to Postgres
Takes time to load on a machine, and is prone to freezing, especially when establishing a new database connection
Slow to respond to queries
Cumbersome interface when dealing with multiple databases

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:

Establish connection on any remote cloud-based Postgres instances
Manage databases, roles and users
Create, alter, and drop tables on the connected databases
Provide UI for data export/import from CSV files, schema checker, etc.
Write queries on an editor to run SQL statements and see the results of querying against your database

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.

How did we build this?

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.

Table Manager

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:

General Table Details: Here, we can update the information of the table and set the owner.
Column Details: Configure all the settings for columns inside the selected table.
Constraints: Add any relations between the columns inside the table.

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.

Query Executor

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.

Now, Let’s Use the Appsmith PgAdmin

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.

November Round-up: New JS Editor, Button-group Widget and More Collabs!

December

November Round-up: New JS Editor, Button-group Widget and More Collabs!

Vihar Kurama

minutes ↗

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.

JS Editor is Now Live!

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 Widgets and Enhancements

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.

‍

Bug Fixes and Upgrades

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.

Datasource and Product Updates

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!

New Collaborations, Technical Content, Videos & Tutorials

We've published some cool tutorials and videos and hosted a few fun events!

We built a dashboard on Appsmith to manage and maintain a customizable newsletter using Zapier. Read the full tutorial here, or watch us build it live here.
We came up with a cool stack: The SAN Stack (Supbase, Appsmith and n8n) that can help developers build internal tools and add automations, of course with open-source/fair-code! Please read the full blog post here to learn more about how it works.
Did you know that on Appsmith, you can call queries and APIs async? If you want to learn more about this, check out our tutorial here.

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.

Write More Code & Create Reusable Functions with Our New JavaScript Editor

December

Write More Code & Create Reusable Functions with Our New JavaScript Editor

Vihar Kurama

minutes ↗

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.

The Story

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:

Introduce the concept of JS Objects files where developers can define variables and functions which they could write in a full-fledged editor
JS Objects should be accessed anywhere across a page, using moustache binding.
JS objects should use linting and autocomplete features developers expect from a full-fledged editor.

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.

How did we build this?

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:

JS Objects are a completely new entity in Appsmith. We had to lay the foundations for this feature but did not want to derail away from already established concepts. We designed these objects as “Action Collections” where each function is a different Action (integration). This enabled us to quickly build on top of existing paradigms and allow features like onPageLoad, dependency calculation, and reactive coding.
Like other parts of Appsmith, these code blocks are reactive, which means they will automatically re-compute when their dependent data points have been updated.
You could make mistakes, and the editor would be forgiving and guide the user to the right path.
While these are strictly objects today, we have laid the groundwork to enable more freestyle “JS files” where users can organize code however they want.
Along with this, we are also working to enable true async code in Appsmith. Async code with native promise support would help users create complex workflows easily, keeping the code readable and maintainable.

This would enable us to create a robust feature that everyone would love and give the same freedom as any standard coding framework.

JS Editor and Objects in Action

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:

export default {
    myRandomNumber: () => {
        const randomInteger = Math.floor(Math.random() * 10);
        return randomInteger
     }
}

‍

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:

{{JSObject1.myRandomNumber()}}

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:

{{JSObject1.myRandomNumber()}}

‍

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.

What’s Next for the JS Editor?

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 :)

Inspect and debug code by hovering over entities
Auto format options
Functions running on page load
Asynchronous functions

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!

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms

November

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms

Vihar Kurama

minutes ↗

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!

Building Internal Tools with Appsmith

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.

Building UI on Appsmith

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:

Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
Create a new application by clicking on the Create New button under the Appsmith dashboard.
We’ll now see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources and Widgets.
Click on the + icon next to the widgets section and drag and drop a container widget onto the canvas.
Next, bring in a form widget inside the container and two input widgets inside the form.
We can configure widgets and their properties by clicking on the cog icon on the top right. This will open a property pane where we can update all the widgets settings.
Now set the form labels to name and email.
Additionally, you can add a text widget to add aesthetics to our application; the following is how the UI looks like:

Excellent, our UI is now ready; let’s create a new Zapier workflow to connect to SendInBlue and manage our newsletter.

Set Up Zapier with Appsmith

Excellent, our UI is now ready; let’s create a new Zapier workflow that can connect to SendInBlue and manage our newsletter.

First, create a free account on Zapier and select create custom workflow option from the dashboard.
On Zapier, every action on the workflow is named on Zap; to establish a connection between Zapier and Appsmith, let’s create a Webhook.

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.

Now open the Appsmith app, click on the + icon next to the Datasource section from the sidebar, and choose Create New API.
Copy the webhook URL from Zapier and set the request type to POST. For ease, let’s also rename the query to addContact.
Here, we also need to send the data from the Form widget we had created earlier; now, let’s use their names to collect data and pass them in the Webhook.
Navigate to the Body tab on the API and paste the following code snippet:

{
"name":"{{Input1.text}}",
"email":"{{Input2.text}}"
}

This code snippet will send the information from the Input widgets to Appsmith.
Lastly, set the button onClick property to execute a query and set it to addContact.
Now, on Zapier, hit the test button and send a request by filling the form on Appsmith and hitting the API. We should see the successful response on Zapier.

Next, click on the + icon beneath the zap to add a new workflow. Select the SendInBlue Zap from the list.
We will need to authenticate with SendInBlue from Zapier to access the workflow; for this, you can either create a new account or log in with your existing credentials.
Next, set the Action type to Add or Update in Sendinblue and fill in the details related to Email; here, we can also use the data sent from the Webhook. In the following screenshot, we select the EMail field data to be the email received from the webhook.

Similarly, you can add a Send Transactional Email in Sendinblue action to the workflow using the Seninblue Zap.

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.

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n

November

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n

Vihar Kurama

minutes ↗

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.

What is the SAN Stack?

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.

Why Supabase, Appsmith, and n8n?

Free / Opensource: Supabase and Appsmith are fully open-sourced and can be self-hosted on their servers. While n8n follows a fair-code distribution model and always has visible source code, which is available to self-host.
Low-code yet high functionality: All three platforms follow the principles of the low-code model to help developers deploy and scale their applications in the fastest way possible. However, devs can utilize SQL, JavaScript, and data structures to customize their applications.
Editing Experience: Supabase, Appsmith, and n8n have an excellent UI interface and provide rich editing and debugging experience for developers right from the beginning. Both Appsmith and n8n provide a drag and drop interface for building UI and automation workflows, respectively. In comparison, Supabase offers a live SQL editor to test out and play with your database and has the power to export them into APIs directly from the platform.
Collaboration: When working with teams, all three platforms offer great collaboration tools; you can share these applications or workflows with anyone and set specific permissions such as view-only or edit mode. They are consistently being improved in their future roadmap.
Self-hosted: Developers can self-host all three platforms on their servers for free. It is useful when you want your data to be more secure, have complete control over customization, and have custom domain options.
Fantastic Community: The community is incredible across all three platforms; they provide excellent support and a transparency roadmap. New feature requests or existing bugs are immediately taken care of based on the priority. And with a great community, content gets better and better, and they provide rich documentation and many tutorials for devs to get started.

Build a Simple Ticket Manager Using SAN Stack

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:

Users will be able to create or raise new tickets for a particular query
The support team will be able to see these tickets and assign them to engineers
When the tickets are resolved, we will be sending an automated email to the users

Let's get started!

Set up your Backend on Supabase

The first step is to set up the backend for the application; for this, we will be using a Postgres database on Supabase.

If you are new to Supabase, you can create a new account (it's free!) or sign in with your existing credentials.
You will be redirected to the Supabase dashboard; here, you can manage all your projects.
Create a new project, and set the name to Support Dashboard. Create a new table by clicking on the Create Table option on the side navigation.
Supabase gives us many ways to add data to the tables, from writing queries to creating schemas using UI to simply uploading CSV files; developers can choose any option.
For our support dashboard, we will be creating a table by uploading a CSV file 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:

Build UI on Appsmith and Writing Queries

Our backend is ready; now, let's connect it to Appsmith to build UI and add functionalities. Follow the below steps:

If you are new to Appsmith, you can create a new account (it's free!) or sign in with your existing credentials.
After we sign in, we will be redirected to a dashboard to create a new application.
Next, let's connect a new data source. To do this, click on the + icon next to the Datasources from the sidebar and choose PostgresDB.
Now, copy the database connection details from Supabase to here and click on the test button to validate the authentication.

Awesome, we now have established a connection to our data source. Next, let’s build UI using widgets on Appsmith.

Click on the + icon next to widgets and drag and drop a Tab widget. We can configure using the property pane by clicking on the cog icon on the top-right corner.
As seen in the below screenshot, we have added four tabs to support the dashboard.

Now, we will add a button that should open a modal and have a form to raise a new ticket when clicked. For this, just drag and drop a new button widget from the widgets section and move it on canvas.
Add a few input widgets and a button to submit the form; this is how the form looks after the UI is complete:

We now have the UI to create a ticket. Let’s write two queries on Appsmith that will allow us to create tickets and list tickets. To do this, click on the + icon next to the data sources and use the Supabase connection here to create a new query.
Rename the query to create_new_ticket under the query pane; here we can write SQL that can collect inputs using moustache bindings. Following is how it looks like:

INSERT INTO PUBLIC."tickets"("id","createdAt","user","updatedAt","description",
"status","priority","category","assignedTo")
VALUES('{{appsmith.store.ticket.id}}','{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_user.text}}', 
'{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_description.text}}','{{c_status.selectedOptionValue}}',
'{{c_proporty.selectedOptionValue}}',
'{{c_category.selectedOptionValue}}','{{c_assignee.selectedOptionValue}}');

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.

Lastly, we now set the onClick property for the button to execute a query and select the create_new_ticket. And just like that, we should be able to create new tickets on the application.
Now, let’s write one more query where we could list all the tickets that users create. We will name this query get_tickets; the following is the SQL snippet.

SELECT * FROM public."tickets";

Now, drag and drop a table widget onto the tab widget under the Assigned To Me tab. Open the property pane and add the following snippet to bind the tickets:

{{get_tickets.data.filter(t => t.assignedTo === 'confidence@appsmith.com' && t.status !== 'closed')}}

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!

Building an Extendable Workflow on 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.

If you are new to n8n, sing-up for their cloud version here.
Next, create a new workflow by selecting New under the workflow menu
Now, drag and drop a Webhook node onto the canvas; you can configure the nodes by clicking on them.
Now set the HTTP method to POST and copy the TEST URL

Awesome, now that we have the Webhook, let’s connect it with Appsmith by adding it as a data source.

On the appsmith application, click on the + icon next to the data source and create a new API.
Set the API type to POST and paste the API webhook URL,
Now paste the following code snippet under the body tab to collect input from the dashboard.

{"message": "({this. params. message})","email": (this. params. email})","ticket": "((appsmith. store. ticket. id}}"}

Next, connect a Gmail node to the webhook and authenticate with your Google ID.
To pass the data from the webhook to the Gmail node, configure the message property by using the variable selector nodes on the left pane.
Lastly, make sure you set the workflow state to active.

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.

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support

November

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support

Vihar Kurama

minutes ↗

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.

Widget, UI, and UX Improvements

#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.

New Appsmith Functions!

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:

setInterval(callbackFunction: Function, interval: number, id?: string)
// setInterval(() => { Query1.run() }, 10000, "myTimer");

The clearInterval function stops executing the trigger callback started with the setInterval method.

clearInterval(id: string)// clearInterval("myTimer");

Appsmith Deployments

#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 heavily refactored Dockerfile to build the image that is able to support both AMD64 and ARM64 architecture
We have updated docker.env.sh with additional environment variables and renamed the existing MongoDB credential variables
We added a document to build an image for multiple architectures using Docker buildx

Quit Buggin! Cheers to our Updated Debugging Experience

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.

Learn How to Push Content from Multiple Sources to Discord in One Go

Learn How to Push Content from Multiple Sources to Discord in One Go

Vihar Kurama

minutes ↗

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!

Connecting Data Sources (APIs) on Appsmith

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!

Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
Create a new application by clicking on the Create New button under the Appsmith dashboard.
We’ll now see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources and Widgets. This is where we can connect to data sources and find all the widgets.

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.

Setting up Youtube <> Discord Push Messaging System

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.

Click on the + icon next to the data sources section and choose the Create New under the APIs section.
Paste the following URL:

https://www.googleapis.com/youtube/v3/search?key=APIKEYHERE&channelId=UCMYwzPG2txS8nR5ZbNY6T5g&part=snippet,id&order=date&maxResults=20

This API will allow you to fetch all the videos from a particular channel using its ID. We’ll need to create an API key from the Google Console account to put it in use.
Rename the API to getYTData by double-clicking on the existing one.
Additionally, Appsmith automatically parses the URL and adds them into the parameters tab, where you can update the ID and the API key. Following is the screenshot of how it looks like:

Here, we can configure all the settings for this API. Additionally, we can turn on pagination settings if we’re working with massive sets of data.

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:

Click on the + icon next to the Widgets section, here we’ll find the list of all the widgets that we can use for building the application.
Now find the Tabs widget, drag, and drop it onto the Canvas.

> 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.

Next, open the property pane of the tabs widget by clicking on the cog icon on the top-right corner of the device. This is where we can configure the entire widget.

Here, under Tabs property, we’ve added found different tabs to navigate between our social contents. Also, the `Default Tab` property is set to Youtube.

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:

Drag and drop a new list widget inside the Youtube tab, adjust the width to half so that the other half can be used to write the messages to push them on Discord.
Open the List widget property pane and set the List Items property to:

{{getYTData.data.items}}

Initially, we see the list widget already populated with pokemon data. To make changes to them, we just need to edit the first item, and the others automatically get populated.

Delete all the widgets on the first item on the list widget, and add one image widget and three text widgets. Now set the following properties to these widgets:

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:

https://www.youtube.com/watch?v={{currentItem.id.videoId}}

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:

Drag and drop the container widget next to the list widget. Add Input widget and a button widget. Additionally, we can also add some Text widgets to customize and style the UI of the application accordingly.
Now set the default value of the Input widget to the following:

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:

Navigate to the channel on Discord and click the cog icon next to it.
Click on Integration and choose webhooks, and copy the given URL.

Click on the + icon next to data sources and click create new. Add the copied URL and set the request method to post. Now open the `Body` tab under the API configuration and paste the following:

{"content":"{{Input1.text}}"}

Here, we’re sending the contents from the Input widget to this particular request. Now, as soon the API is called, the data is to the Webhook, and the contents will be posted on this specific Discord channel.
Rename this API to pushYTVideo
Lastly, let’s go back to the page and configure the button onClick to call this API. Open the button widget property pane and set the onClick property to call a query, and choose pushYTVideo

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.

Setting up Twitter <> Push Messaging System

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:

Click on the + icon next to Datasources and hit Create New, rename the API to getTwitterData, and add the following URL:

https://api.twitter.com/2/users//tweets

For example, let’s update the id with: https://api.twitter.com/2/users/1151016626235437056/tweets. To setup your own Twitter profile, you’ll need to copy the ID.

We’ll need to add the Authorisation key to the API. For this, we’ll need to have a developer account on Twitter and create the API keys.

We can configure this under the API settings.

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:

Checkout our latest tweet here: https://twitter.com/theappsmith/status/{{List1Copy1.selectedItem.id}}

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.

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform

Vihar Kurama

minutes ↗

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!

The story!

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.

Snippet: The example code snippet written in JS
Args: Customisable variables inside the snippets and their expected data type,
Template: The dynamic template that helps devs customise their snippet with any variable on Appsmith

Here’s an example of how we ideated customizable JS snippet using these three forms for merging two queries in a table:

Snippet:

{{ 
	fetchOrders.data.map((orderObj) => {
   const user = fetchUsers.data.find((userObj) => userObj.id == orderObj.refId) || {};
   return { ...orderObj, ...user };
	})
	}
}

Args:

[
  {
    "identifier": "fetchOrders",
    "name": "Query1",
    "type": "OBJECT"
  },
  {
    "identifier": "fetchUsers",
    "name": "Query2",
    "type": "OBJECT"
  },
  {
    "identifier": "orderObj",
    "name": "row1",
    "placeholder": true,
    "type": "OBJECT"
  },
  {
    "identifier": "userObj",
    "name": "row2",
    "placeholder": true,
    "type": "OBJECT"
  },
  {
    "identifier": "id",
    "name": "key1",
    "type": "VAR"
  },
  {
    "identifier": "refId",
    "name": "key2",
    "type": "VAR"
  },
  {
    "identifier": "user",
    "name": "recordForMerge",
    "placeholder": true,
    "type": "VAR"
  }
]

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.

How to use JS Snippets on Appsmith

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!

You can also follow us on Twitter and Linkedin.

All You Need to Know About the Appsmith Hacktoberfest 2021

Vihar Kurama

minutes ↗

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!

What is Hacktoberfest?

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.

What is Appsmith?

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.

How to contribute to Appsmith for Hacktoberfest?

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.

Contributing to Appsmith Code Base

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

1 Closed PR - Appsmith Stickers
2 Closed PRs - Appsmith Stickers, Water Bottle
3 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith T-Shirt
4 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith Hoodie
4 Closed PRs + - Appsmith Surprise Box

Contributing to Appsmith Documentation

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

1/2 How-to Guide PR - Appsmith Stickers, Mug
3 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith T-Shirt
4 Closed PRs - Appsmith Stickers, Water Bottle, Appsmith Hoodie
4+ Closed PRs - Appsmith Surprise Box

Contributing to Appsmith Tutorial or Blog

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

1 Blog/Tutorial - Appsmith Stickers, Mug
2 Blog/Tutorial - Appsmith Stickers, Water Bottle, Appsmith Hoodie
3+ Blog/Tutorial - Appsmith Surprise Box

Appsmith Video Contributions

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

1 Video - Appsmith Stickers, Mug
2 Videos - Appsmith Stickers, Water Bottle, Appsmith Hoodie
3+ Videos - Appsmith Surprise Box

Contributing to Appsmith Templates

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.

Appsmith Roundup: Powerful Widget Grouping Options, Undo-Redo, and New Widgets

Appsmith Roundup: Powerful Widget Grouping Options, Undo-Redo, and New Widgets

Vihar Kurama

minutes ↗

Powerful Widget Options

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!

New Widgets and Customisation Options

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!

Configuring Page

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!

Introducing JS Snippets!

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:

Open the Quick search and navigation on the top menu bar.
Select use snippets
Search for Snippets

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.

Building a Store Catalogue Management System using Appsmith and GraphQL

April

Building a Store Catalogue Management System using Appsmith and GraphQL

Vihar Kurama

minutes ↗

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.

Initial Setup

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.

Getting started with Appsmith

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.

Sign in to Appsmith Account
Click Create New to create a new application and name it GraphQL Store Manager. This takes you to an empty workspace with a sidebar.
On the sidebar, you should see items like Pages, API, and DB Queries in a folder-like structure. Under Pages, a new page, Page1, already exists. Rename it as Store Dashboard.

Below is a screenshot of the application:

Connecting to the Database and Creating the first UI View

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:

Make a connection to a database by clicking the plus icon near APIs on the sidebar under a page.
Now, rename your API to FetchGames
We’ll write a POST request and use GraphQL query to list down all the games in the database.
Next, use the following URL as the data source to access the mock database hosted on GraphQL: https://mock-as.hasura.app/v1/graphql
We’ll have to set headers in order to access the database. Set content-type to application/json and x-hasura-admin-secret to qpN7KbsgIoKcuuC1sL3xiaIN2eegukvPPweg6MW1RkM8KUkaHAi85U3FOVj0Zkxm
Next, we’ll have to write a GraphQL query in the request body to list all the database games. This will require an object with query as key and the GraphQL query value associated with it to fetch the games.

{
  "query": {{JSON.stringify(`
    query {
        steam_games(limit: 100, order_by: {appid: asc}) {
            name
            appid
            average_playtime
            genres
            price
        }
    }
  `)}}
}

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.

Navigate to Page1 and click on the plus icon next to the widgets.
Now drag and drop a table widget onto the canvas; we'll see a new table with some pre-populated data.
Next, we’ll have to open the table’s property pane to update the table data by clicking on the cog icon.
Inside the property pane, we’ll find a Table Data property, and here we’ll have to bind the FetchGames API. Use the moustache syntax and add the below code snippet:

{
{FetchGames.data.data.steam_games}
}

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.

Implementing Create Operation on 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.

Now, go back to the page, and drag and drop a form widget. Inside the form widget, we’ll add some Input widgets that accept necessary fields to add a new game to the database.
We’ll also have to name the input fields so that we’ll have to reference them while posting values from the GraphQL query.
Additionally, we’ll also have some text widgets that’ll look like labels for the Input widgets. Below is how we’ll have to name the text widgets and associated input widgets.

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.

Create a new API by clicking on the plus icon next to the APIs, rename the API to InsertGame.
Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:

{
    "query": {{JSON.stringify(`
    mutation ($object: steam_games_insert_input!) {
        insert_steam_games_one(object: $object) {
            appid
            name
            average_playtime
            price
            genres
        }
    }
    `)}},
    "variables": {
        "object": {{JSON.stringify({
            appid: appIdInput.text,
            name: nameInput.text,
            average_playtime: avgPlayTimeInput.text,
            price: priceInput.text,
            genres: genresInput.text,
        })}}
    }
}

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.

Updating the Store Item on Database

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.

Open the Table Property Pane, and click on the Add New Column option.
Now set the column type to Button and the label to Edit.
We’ll have to open a new modal when the Edit button is clicked, hence under the actions, select Open a New Modal and create a new modal and name it to editItemModal.
Now add necessary inputs widgets and text widgets to edit the store item.
Name the input widgets and their default text to the following:

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.

Create a new API by clicking on the plus icon next to the APIs, rename the API to EditGame.
Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:

{
 "query": {{JSON.stringify(`
     mutation ($object: steam_games_set_input!) {
         update_steam_games(where: {appid: {_eq: "${Table1.selectedRow.appid}"} }, _set: $object) {
             affected_rows
         }
     }
 `)}},
 "variables": {
     "object": {{JSON.stringify({
         name: nameEditInput.text,
         average_playtime: avgPlayTimeEditInput.text,
         price: priceEditInput.text,
         genres: genresEditInput.text,
     })}}
 }
}

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:

{{
    EditGame.run(() => {
        FetchGames.run();
        closeModal('EditModal');
    })
}}

This will update the item on the store and refresh the table, by re-running the FetchGames query.

Deleting the Store Item on Database

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.

Create a new API by clicking on the plus icon next to the APIs, rename the API to DeleteGame.
Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:

{
    "query": {{JSON.stringify(`
    mutation {
        delete_steam_games(where: {appid: {_eq: "${this.params.appid}"} }) {
            affected_rows
        }
    }
    `)}}
}

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:

{{
DeleteGame.run(() => FetchGames.run(), () => {}, {appid: currentRow.appid})
}}

This code snippet will first, delete the Game and then fetches the data again and updated it on the table.

Conclusion

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

Build an Investor CRM with Google Sheets

May

Build an Investor CRM with Google Sheets

Vihar Kurama

minutes ↗

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:

Build unique profiles for the fund and investor
Filter saved investors by fund specifications and interests levels
Track conversations, see the most recent interaction
Set deadlines and reminders for action items
Manage file sharing by keeping track of files shared with each investor

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!

Setting Up Google Sheets and Appsmith

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:

Create a new account on Appsmith (it’s free!), if you are already an existing login to your Appsmith account.
Create a new application by clicking on the “Create New” button under the Appsmith dashboard.
We’ll now see a new Appsmith app with an empty canvas and a sidebar with Widgets, APIs and DB Queries.
Click on the + icon next to the APIs section and choose the Google Sheets option. Next, click on the New Datasource button and set the scope to Read and Write and click Authorise.
This will ask us to log in from our Google Account, choose the account we want to access Google Sheets with and log in. After successful authorisation, this will redirect back to your Appsmith account.
Now, you’ll find your Google Sheets Datasource under your APIs, and you can create the necessary queries by choosing this data source.

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:

Investment Fund
Location
Name of Investor
Designation
Interesting Portfolio Companies
Size of Fund
Ref Check Names
Ref Check Details
Website
Notes
Interest Levels

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.

id
Notes
Date
Author
Files Shared Link

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.

Fetch Data from Google Sheet to Appsmith

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:

After clicking the New API button, you’ll be redirected to a new query tab, name your API to getInvestorDetails by double-clicking on the existing one.
Now set the method to Fetch Sheets Row, this method will query the data that’s present in the given Google Sheet.
In the SpreadSheet URL property, paste the URL of your Google Sheet, in this tutorial we’ll be following with the following URL:

https://docs.google.com/spreadsheets/d/19ewbxuiNwfD5etHpb__jMzFYjVdYaeLSviC951htlsI/edit#gid=333192

Next, in the Sheet name, add the name of our first sheet which is Investor Details
The Table Heading Row Index property takes in the row number that basically has our column heading, we’ll set this to 1.
Next, we’ll set the Row Offset to 1 and Row limit to 100, this will query only the first 100 rows of our Google Sheet.
Lastly, click on the Run button on the top right, we should see the sheet information in JSON format in the response pane at the bottom. Below is the GIF showing the same:

Awesome, now that we have our data from the Google Sheet, let’s put this in a table; follow the below steps:

Make sure the API is saved as getInvestorDetails
Next, click on the + icon next to the widgets and drag and drop a table widget onto the canvas.
Open the Table property pane by clicking on the cog icon on the top right of the table.
Now under the Table Data property, paste the following code snippet:

{{ getInvestorDetails.data }}

Here, we’re using the moustache syntax to bind the data from the API to the table widget.
With this, we should see the Table data with the investor details from the Google Sheet. Below is a GIF showing the same:

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.

Insert new data/rows to 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:

Drag and drop a button widget on to the canvas and next open the property pane of the button by clicking on the cog icon on the top right of the button when selected.
Open the onClick property and select the Open Modal option and click on New Modal, this should open a new modal.
Now add the necessary form fields by dragging the Input widgets onto the Modal. In our case of Investor CRM, we will add the following fields:

- Investment Fund
- Location
- Name of Investor
- Designation
- Interesting Portfolio Companies
- Size of Fund    
- Website
- Notes
- Interest Levels

Name the input widgets to follow to easily use them for other operations for our CRM.

Investment Fund: addFund
Location: addLocation
Name of Investor: addInvestorInput
Designation: addDesignation
Interesting Portfolio Companies: addPortifolio
Size of Fund: addFundSize
Website: addWebsite
Notes: addNotes
Interest Levels: addIntrests

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:

Create a new API from the existing Google Sheets data source and set the query method to Insert Sheet Row. This query method helps us insert new data to the Google Sheet from Appsmith.
Name the query as addNewInvestor
Next, in the SpreadSheet URL property, add the link to our Google Sheet.
The Sheet Name will be Investor Details as named in our Google Sheet.
The Table Heading Row Index will be the row where the names of the columns are listed; in our case, this will be 1,
Lastly, the Row Object takes a JSON object with keys set to the column names associated with the desired values. In our case, below is how the Row Object should look like:

{
"Investment Fund": "{{addFund.text}}",
"Location": "{{addLocation.text}}",
"Name of Investor": "{{addInvestorInput.text}}",
"Designation": "{{addDesignation.text}}",
"Interesting Portfolio Companies": "{{addPortifolio.text}}",
"Size of Fund": "{{addFundSize.text}}",
"Website": "{{addWebsite.text}}",
"Notes": "{{addNotes.text}}",
"Interest Levels": "{{addIntrests.text}}"
}

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 and Updating Investor Details

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:

Investment Fund: editFund
Location: editLocation
Name of Investor: editInvestorInput
Designation: editDesignation
Interesting Portfolio Companies: editPortifolio
Size of Fund: editFundSize
Website: editWebsite
Notes: editNotes
Interest Levels: editInterests

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:

Investment Fund Input Widget: {{Table1.selectedRow.Investment_Fund}}
Name of Investor Widget: {{Table1.selectedRow.Name_of_Investor}}
Location Input Widget: {{Table1.selectedRow.Location}}

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:

Create a new API from the existing Google Sheets data source and set the query method to Update Sheet Row. This query method helps us update row data in the Google Sheet from Appsmith.
Name the API to editInvestorDetail
Next, in the SpreadSheet URL property, add the link to our Google Sheet.
The Sheet Name will be Investor Details as named in our Google Sheet.
The Table Heading Row Index will be the row where the names of the columns are listed; in our case, this will be 1,
Lastly, the Row Object takes a JSON object with keys set to the column names associated with the desired values. In our case, below is how the Row Object should look like:

{
    "rowIndex":{{Table1.selectedRow.rowIndex}},
    "Investment Fund": "{{editFund.text}}",
    "Location": "{{editLocation.text}}",
    "Name of Investor": "{{editInvestorInput.text}}",
    "Designation": "{{editDesignation.text}}",
    "Interesting Portfolio Companies": "{{editPortifolio.text}}",
    "Size of Fund": "{{editFundSize.text}}",
    "Website": "{{editWebsite.text}}",
    "Notes": "{{editNotes.text}}",
    "Interest Levels": "{{editInterests.text}}"
}

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.

Creating new conversations page to save notes and files

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:

Create a new page and name it “Investor Conversations”
On this page, add a query to the URL to show only details of the selected investor. Now to the Appsmith URL, you see on the top add ?id=1. With this, we will filter all the investor details related to row one.
Now your data source will also be copied to these pages as well, click on the create New API from the existing data source to fetch the data from the second sheet which is Notes
Name the API as fetchInvestorDetails, next add the SpreadSheet URL and set the sheet name as Investor Details
Set the row offset to {{appsmith.URL.queryParams.id}}, this will query the row index given from the id param.
Lastly, set the row limit to 1, if you run the query you should see the details of investor details in the first row of the Google Sheet (as id is hard-coded to 1).

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.

Now, on the conversation page, let’s add some Text Widgets to display the details of the Investors. Set the default text property to {{fetchInvestorDetails.data[0].Company}}
This will display the investor name based on the filtered id from the URL; later, we’ll have to pass this id dynamically from the investor table on the first page.
Now create one more API that fetches all the conversations from Sheet 2, which is notes.
Name the API to getConversationDetails, and set the query method to Fetch Sheets Row and add the link to Google Sheets URL under the Spreadsheet URL property.
Next, set the sheet name to Notes, and this will fetch all the information that’s listed in the Notes Sheet.
The Table Row Heading Index, Row Offset will be 1, and the Row limit will be 100; you can increase this based on the data on your Google Sheets.
Run the query. You should see all the notes listed down in the response pane in JSON format.

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:

{{getConversationDetails.data.filter((note)=>note.id === appsmith.URL.queryParams.id)}}

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.

Dynamically Passing the Query Params and Adding Notes

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:

First, open the table property pane in the Investor Details Page and click on Add A New Column.
Set the Column Type to Button and Label to View Conversations
Now when the button is clicked, it should navigate to the conversation page with the particular investor row id as a query parameter
Now set the onClick property to Navigate to Page, enter the Page name as Investor Conversations
Under the page name, you’ll find the Query Parameters property; add the following JS code snippet to pass the id as a query parameter:

{{ {id:Table1.selectedRow.rowIndex} }}

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.

Firstly, add a new Rich Text Editor to the Investor Conversation page and a button to add these notes to the list. Set the RTE input name to addConversation.
Now create one more API that adds new conversations to Sheet 2, which is notes.
Name the API to addNote, and set the query method to Insert Sheets Row and add the link to Google Sheets URL under the Spreadsheet URL property.
Next, set the sheet name to Notes, and Table Heading Row Index to 1.
In the Row Object paste the following JS code:

{
    "id":"{{appsmith.URL.queryParams.id}}",
    "Notes": "{{addConversation.text}}",
    "Author": "{{appsmith.user.name}}",
    "rowIndex":"0"
}

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.

Wrapping Up

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

Using the Notion API to Build a Content Management System

May

Using the Notion API to Build a Content Management System

Vihar Kurama

minutes ↗

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:

Submit new content idea submissions from authors
Set deadlines for submissions
Follow up with authors directly with their Emails
Organise all data on a Notion page

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!

Configuring the Notion API

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.

Firstly, choose the workspace you want to work with on your Notion. If you want to test it, feel free to create a new workspace.
Now, open the workspace setting by clicking on the Settings and Members option on the left navigation bar. We should see a new modal with all the settings.
Find the select the Integrations option under Workspace options in the settings modal. This will redirect to the integrations tab.
Next, choose the Develop your integration option. Now we'll be redirected to our integration page.

On the integrations page, select the New integration option and add a name and associated workspace you want to work with and hit submit. This will create us a new secret key!

Now head back to our workspace, choose a specific page and click on the share option (we can find this on the top-right corner)
Next, hit the invite button, a new modal opens, here we can find our created integration. Select the integration and confirm the invite.
With this, we should be able to add an integration to a Notion page; also, make sure to save your integration key; we’ll have to use it for using the Notion API

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.

Setting up a Notion Page

To work with the Notion API, firstly, let’s create a database for our content calendar.

On your page, add a new table with the following fields that are required for our content manager:

Title: Text Field
Description: Text Field
Author: Text Field
Category: Text Field
Status: Dropdown Field
Notes: Text Field
Deadline: Date Field
Author Email: EMail Field

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.

Querying Data from Notion API

In this section, we’ll be querying data from Notion API. Follow the below steps:

Firstly, we should have an Appsmith account; if not, sign-up here (it's free)! Next, create a new application under an organisation by clicking on the Create New button.
We’ll now find Widgets, APIs, and DB Queries on the left navigation; we can use these features to build our application. We’ll start by creating a Notion API.
Click on the + icon next to the APIs and click on Create new and name the API as query_data_from_database
Now, add the following in the URL for the API:

https://api.notion.com/v1/databases//query

Here, db-id is the database id for a notion page. To find this, we’ll have to open our Notion Table as a page and pick the database id from the URL.
Following is an example URL showing the id of a Notion page.

https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|

Next, add the following keys under the Headers tab.

	Authorization: 
	Notion-Version: 2021-05-13
	Content-type: application/json

Below is a screenshot of how the configuration looks like:

Lastly, hit the RUN button, and we can find all the data from our page in the Response Body pane.

Awesome, we now have the response from the Notion API; let’s bind this onto a List Widget.

Binding Notion APIs onto Appsmith

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:

Select Page1 on the left navigation and click on the + icon next to the widgets section. Now we should see different UI widgets that we can use to build UI.
*Based on your preference, you can either choose a table widget or a list widget to bind the data from Notion API. In this example, we’ll be using a List widget.
Now drag and drop the list widget onto the canvas; we should see list items filled with Pokemon information. To inspect these, we can click on the cog icon on the top of the list widget and check out the data in the Items property. You can find more information from the docs here.
Now, we’ll be using the moustache syntax to write JS in Appsmith, replace the Items property on the list widget with the following code snippet:

In Appsmith, you can access the API’s anywhere inside the moustache syntax using the API name.

{
{
	query_data_from_database.data.results.map(
    	(item) => {
        	return (item.properties)
    	})
}
}

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:

- Title
- Description
- Status
- Author
- Email
- Deadline

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:

{{ currentItem.Title.title[0].text.content }}

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:

Description text widget set the Text property to:

{{currentItem.Description.rich_text[0].text.content}}

Status text widget, set the Text property to:

{{currentItem.Description.rich_text[0].text.content}}

Author text widget, set the Text property to:

{{currentItem.Author.rich_text[0].text.content}}

EMail text widget set, the Text property to:

{{currentItem["Author Email"].email || "Not Added"}}

Deadline text widget set, the Text property to:

{{currentItem.Deadline.date.start}}

Category text widget set the Text property to:

{{currentItem.Category.rich_text.map(row => {return row.plain_text})[0]}}

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.

Adding an Item into Notion Database

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.

First, let’s create a new page named “Author Submission” now drag and drop a form widget onto the canvas.
Inside the Form widget, let’s add some text widgets and input widgets from which the authors should submit their new content ideas.
This is how our form should look like:

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:

Title - titleInput
Description - descriptionInput
Author Name - authorInput
Email - emailInput
Category - categoryInput
Submission Date - dateInput

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:

First, create a new API under the Author Submission page and name it as add_an_item_to_database
Next, add the following keys under the Headers tab.

Authorization: 
Notion-Version: 2021-05-13
Content-type: application/json

Now in the body tab, paste the following code:

	"parent": { "database_id": "" },
 "properties": {
           "Author": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{authorInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Author Email": {
          "type": "email",
          "email": "{{emailInput.text}}"
        },
        "Category": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{categoryInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Status": {
          "type": "select",
          "select": {
            "name": "Not Started",
    "color": "blue"
          }
        },
        "Description": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{descriptionInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Deadline": {
          "type": "date",
          "date": {
            "start": "{{dateInput.selectedDate}}",
            "end": null
          }
        },
        "Title": {
          "type": "title",
          "title": [
            {
              "type": "text",
              "text": {
                "content": "{{titleInput.text}}",
                "link": null
              }
            }
          ]
        }
      }
  }

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!

Send Grid Email Integration

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:

First, create a new modal when the Send Mail button is clicked on the list item. We can do this by setting the onClick property to Open Modal and selecting Create New.
Set the modal type to Form modal by toggle the option in the property pane.
Inside the Modal widget, let’s add some text widgets and input widgets from which we should send Emails.
Following are the fields we’ve created for reference:

Sending To: Input Widget
Email subject: Input Widget
Email content: Rich Text Editor Widget

Now, let’s name these widgets (so that we can use them to refer in the POST API method) to the following:

Sending To: emailInput
Email subject: subjectInput
Email content: contentInput

Below is a screenshot of how the Modal should look like:

Configuring the SendGrid API:

Firstly, we should have a SendGrid account, and if you don’t have one, you can create a free account here.
Next, navigate to the Integration Guide by clicking on the Email API on the left navigation pane.
Choose the Web API and choose the cURL language. Now you’ll be redirected to the verification tab.
On the verification, tab click on the Create API by giving it a name. With this, we should have our SendGrid API key.
Next, open Appsmith and create a new API under Page1, name it as send_email. Set the request type to POST and add the following under the URL form:

https://api.sendgrid.com/v3/mail/send

Authorization : Bearer 
Content-Type : application/json

Lastly, set the body to the following:

{"personalizations": [{"to": [{"email": "{{emailInput.text}}"}]}],"from": {"email": "test@example.com"},"subject": "{{subjectInput.text}}","content": [{"type": "text/plain", "value": "{{contentInput.text}}"}]}

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!

Conclusion

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.

The Complete Table Widget: Building Complex Tables with Appsmith

May

The Complete Table Widget: Building Complex Tables with Appsmith

Vihar Kurama

minutes ↗

By: Veronica Stork

What Are Web Tables?

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 to the Rescue

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.

Creating a Table in the Appsmith

Firstly, you should have an Appsmith account; if not, sign-up here (it's free)!
Next, create a new application under an organisation by clicking on the Create New button.
Now, to create a table, first, click the + icon next to the widgets directory in the sidebar.
Then, drag the table widget to the canvas. Once it is on the canvas, the table will be pre-populated with dummy data, and the property pane will be open to the right side of the widget.

New table in Appsmith with property pane open on the right side

You can rename the table to something descriptive by clicking on the default name in the property pane (Table1 in the above example), then entering your data.

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.

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 table property pane with data options displayed

Features

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

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.

Query of users database that uses server-side pagination

Run that query or API call from the table onPageChange.

Appsmith table property pane with the query being run 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.

API settings with key-based pagination enabled and previous and next pages set

Filters

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.

Property pane for dropdown widget populated with filter values

In the above example, we are filtering based on the user status.

Searching

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.

Downloads

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.

Property panel with onRowSelected set to download the current row’s data

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

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:

onRowSelected describes what happens when a user selects a row.
onPageChange describes what happens when a user navigates to the next page of data.
onSearchTextChange describes what happens when a user types in the search bar.

A table is set to display Modal1 when onRowSelected is triggered in the example below.

Property pane with onRowSelected option set to show a modal

Drilling into a single row of data

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.

Text area using the `selectedRow` property to display the value of the name column from the currently selected row

Modal displaying name obtained from`selectedRow property

Conclusion

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.

Build a CMS for Your Company in Under an Hour

Build a CMS for Your Company in Under an Hour

Vihar Kurama

minutes ↗

by Adeyinka Adegbenro

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.

Setting Up the Application and Database

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.

Create an Appsmith App

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.

Connect to a Database

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:

CREATE DATABASE appsmith_cms;

Connect to the database and create a DB table called Author:

CREATE TABLE AUTHOR(
   AUTHOR_ID SERIAL PRIMARY KEY NOT NULL,
   NAME TEXT NOT NULL,
   PROFILE_PICTURE TEXT,
   ABOUT_ME TEXT,
   LINKEDIN TEXT,
   GITHUB TEXT
);

Create a table, Article:

CREATE TABLE ARTICLE(
   ARTICLE_ID SERIAL PRIMARY KEY NOT NULL,
   TITLE TEXT NOT NULL,
   SUBTITLE TEXT,
   CONTENT TEXT,
   IMAGE TEXT,
   AUTHOR_ID INTEGER NOT NULL REFERENCES AUTHOR(AUTHOR_ID),
   DATE_UPDATED DATE NOT NULL DEFAULT CURRENT_DATE
);

Create a table, Tag:

CREATE TABLE TAG (
    TAG_ID SERIAL PRIMARY KEY NOT NULL,
    NAME TEXT NOT NULL
);

Create a table, Article_Tag:

CREATE TABLE ARTICLE_TAG(
    ARTICLE_ID INTEGER REFERENCES ARTICLE(ARTICLE_ID),
    TAG_ID INTEGER REFERENCES TAG(TAG_ID),
    PRIMARY KEY (ARTICLE_ID, TAG_ID)
);

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:

INSERT into author (name, profile_picture, about_me, linkedin, github) VALUES ( 'Achebe', 'https://en.wikipedia.org/wiki/Chinua_Achebe', 'i am cool', 'https://www.linkedin.com/', 'https://github.com/');

INSERT into author (name, profile_picture, about_me, linkedin, github) VALUES ( 'Chimamanda', 'https://en.wikipedia.org/wiki/Chimamanda_Ngozi_Adichie', 'i am cool', 'https://www.linkedin.com/', 'https://github.com/');


INSERT INTO "article" ( "title", "subtitle", "content", "image", "author_id") VALUES
( 'Hello', 'hi', 'Hello world', 'img.me', '1');


INSERT INTO "tag" ("name") VALUES
('food');

INSERT INTO "tag" ("name") VALUES
('tech');

INSERT INTO "tag" ("name") VALUES
('fashion');

INSERT INTO "tag" ("name") VALUES
('beauty');

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.

Your App’s First Page: Create an Article

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.

Prepare the Data

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:

SELECT * FROM author;

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:

SELECT * FROM tag;

Create a new query called submit_article. This will be used to create a new article entry in the database.

INSERT INTO "article" ( "title", "subtitle", "content", "image", "author_id") 
VALUES
('{{create_article_form.data.title}}', 
'{{create_article_form.data.subtitle}}', 
'{{create_article_form.data.content}}', 
'{{create_article_form.data.cover_image}}', 
{{create_article_form.data.author}}
) returning "article_id"
;

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.

INSERT INTO article_tag
  ("article_id", "tag_id")
VALUES
  (
    '{{submit_article.data[0].article_id}}', 
    '{{create_article_form.data.tags}}'
  );

Build the Page

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:

{{
fetch_authors.data.map(
  (row)=>{

    return {label: row.name, value: row.author_id}
  }
)
}}

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:

  {{
fetch_tags.data.map(
  (row)=>{

    return {label: row.name, value: row.tag_id}
  }
)
}}

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.

Your App’s Second Page: View Articles

Create a new page called all_articles_page. This page will be used to display all the articles available in the database.

Prepare the Query

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.

SELECT art.*, aut.name as author FROM article art 
join author aut on aut.author_id = art.author_id;

Build the UI

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:

select art.*, tag.name as tag_name, tag.tag_id, auth.name as author from article art join
author auth on auth.author_id = art.author_id
left join article_tag at on at.article_id = art.article_id
left join tag on tag.tag_id = at.tag_id
where art.article_id = {{ appsmith.URL.queryParams.key }};

Go back to the view_article_page and add the following widgets and settings:

Add a Text widget for the title and set the value of Text to {{get_article.data[0].title}}.
Add another Text widget for the subtitle and set the value of Text to {{get_article.data[0].subtitle}}.
Add an Image widget for the cover image and set the value of Image to {{get_article.data[0].image}}.
Add a Text widget for the article content and set the value of Text to {{get_article.data[0].content}}.
Add a Text widget for the article’s author and set the value of Text to Written By {{get_article.data[0].author}}
To test that the configuration works, go to the all_articles_page and click View on any of the rows. This should take you to the view_articles_page with the actual article loaded.

Your App’s Third Page: Edit an Article

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.

Prepare the Data

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:

 update article 
SET title = '{{edit_article_form.data.title}}',
    subtitle = '{{edit_article_form.data.subtitle}}',
    content = '{{edit_article_form.data.content}}',
    image = '{{edit_article_form.data.cover_image}}',
    author_id = {{edit_article_form.data.author}}
  WHERE article_id = {{ get_articleCopy.data[0].article_id }};

Create a new query, new_article_tag_query, and add:

INSERT INTO article_tag
  (article_id, tag_id)
VALUES
  (
    '{{ get_articleCopy.data[0].article_id }}',
    '{{ edit_article_form.data.tag }}'
  );

Create a new query, delete_old_article_tags, and add:

DELETE FROM article_tag 
WHERE article_id = {{get_articleCopy.data[0].article_id}};

Build the Page

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:

{{
  fetch_authorsCopy.data.map(
  (row)=>{

    return {label: row.name, value: row.author_id.toString()}
  }
  )
}}

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:

  {{
    fetch_tagsCopy.data.map(
    (row)=>{

      return {label: row.name, value: row.tag_id.toString()}
    }
    )
  }}

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:

 {{edit_article_query.run(() => delete_old_article_tags.run(() => new_article_tag_query.run(() => get_articleCopy.run()) ), () => {})}}

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.

Your App’s Fourth Page: Manage Tags and Authors

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.

Prepare the Queries

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:

INSERT INTO tag
  (name)
VALUES
  (
    '{{create_tag_modal.data.tag_name}}'
  );

Create a new query, delete_article_tag_query, and paste in the following:

INSERT INTO tag
 DELETE FROM article_tag 
WHERE tag_id = {{tags_table.selectedRow.tag_id}};

Create another query, delete_tag, and add the following code:

DELETE FROM tag WHERE tag_id= {{tags_table.selectedRow.tag_id}}

Build the Page UI

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:

INSERT INTO tag
(name)
VALUES
(
  '{{create_tag_form.data.tag_name }}'
);

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.

Conclusion

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.

Connecting Mixpanel, Reply.io and Active Campaign using Appsmith to engage with your users

Connecting Mixpanel, Reply.io and Active Campaign using Appsmith to engage with your users

Vihar Kurama

minutes ↗

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:

Mixpanel reports generating cohorts
Feed relevant cohort data to ActiveCampaign for single one-off emails
Feed relevant cohort data along with user specifics to reply.io for engagement

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:

Look at user details in the Appsmith dashboard
Personalise engagement based on an app built, usage and organisation
Click on the button to engage the user

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.

Setting up Mixpanel API on Appsmith

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:

Create a new account on Appsmith (it’s free!), if you are already an existing user, log in to your Appsmith account.
Next, create a new application by clicking on the “Create New” button under the Appsmith dashboard.
We’ll now see a new Appsmith app with an empty canvas and a sidebar with Widgets, APIs and DB Queries.
Now, click on the + icon next to the APIs section and choose Create new.
Now add the following Mix Panel API endpoint URL in the request input.

https://mixpanel.com/api/2.0

Click on the SAVE AS DATASOURCE button next to the URL, rename this data source as MixPanel API, and hit Save.
Now choose the data source and create a new API; let’s rename it asget_users, add the following route at the end of the URL: /engage?project_id=2032485. This is how our API should look like:

https://mixpanel.com/api/2.0/engage?project_id=2032485

Sometimes, Mixpanel APIs might be slow to process; hence we’ll have to increase the API timeout options; we can simply do this by going to the settings tab and increasing the time out to 100000.
Lastly, set the request type to POST and hit RUN; we should see the list of users that are inside the Mixpanel report with id 2032485

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.

Binding Users onto the List Widget

Let’s use the List widget to show all the invited users from the get_users API endpoint. Follow the below steps:

Click+ icon next to the Widgets from the left navigation and drop the List widget on canvas.
Now open the list property pane by clicking on the cog icon on the top-right of the list widget. Inside the property pane, we can bind the data and create necessary actions using the pre-defined properties.
Now paste the following code snippet into the Items property in the property pane:

{
{
  get_users.data.results.map((r) => ({
    email: r.$properties.$email,
    last_name: r.$properties.$last_name,
    first_name: r.$properties.$first_name,
    lat: r.$properties.clearbit_company_geo_lat,
    city: r.$properties.$city,
    lng: r.$properties.clearbit_company_geo_lng,
    company: r.$properties.clearbit_company_domain,
    country: r.$properties.clearbit_company_geo_country,
  })).filter(r => r.lat);
}
}

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.

Find the text widget from the Widgets section drag and drop four of these; the first two text widgets will act as the Label’s, and the last two will act as the Values from the API.

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:

First, find the map widget’s from the widget’s section and drag and drop a new Map Widget next to our user’s table.
Now, open the Map’s property and add the following JS in the Initial location property by toggling the JS button next to it:

{
    "lat": {{users_list?.selectedItem?.lat || 0}},
    "long": {{users_list?.selectedItem?.lng || 0}},
    "title": "{{users_list.selectedItem.city}}"
}

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.

We’ll also need to set the Default markers to the following:

[{
"lat": {{users_list?.selectedItem?.lat || 0}},
"long": {{users_list?.selectedItem?.lng || 0}},
"title": "{{users_list.selectedItem.city}}"
}]

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:

Fetch Smartlook Recordings from Mix Panel API

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:

Use the Mixpanel API data source we’ve created before and click Create new.
Now, add the following route to the end of the data source: /jql?project_id=2032485, this is how the API should look overall.

https://mixpanel.com/api/2.0/jql?project_id=2032485

Now let’s add Authorisation in the headers, copy-paste the below into the key-value pairs:

Authorization : Basic YmZkNDhhYjk1NzcxNTg4NjI0M2VhZDYyNzNhNDhlMTk6

content-type: application/x-www-form-urlencoded

Now, navigate to the Body tag and set the type to X-WWW-FORM-URLENCODED and add the following as a key-value pair.

Key: script
Value:
function main() {
  return Events({
    from_date: '2021-01-01',
    to_date: '{{moment().format('YYYY-MM-DD')}}',
    event_selectors: [
      {
        event: 'WIDGET_DROP',
        selector: '"{{users_list.selectedItem.email}}" in properties["$email"]',
        label: 'Invite Graph',
      },
    ],
  });
}

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:

{{navigateTo(get_recording.data[0].properties.smartlookPlayUrl,'{}','NEW_WINDOW')}}

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.

Sending Customised Emails to the Users

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.

First, let's create a new API called get_user and set the URL as follows:

https://appsmith.api-us1.com/api/3/contacts?email={{users_list.selectedItem.email}}

Here, user_list is the name of the list widget, and we're binding the selected email using the moustache API.
This API is secure, hence, we'll need to add an API key in header, in our case, it's Api-Token and the value is a60fdd2cb979167412b0a4daa60de8837db13f08538e7221e0d63126a7163c795eb04f7a

2. Send Email

Now, let's create one more API with reply.io to send customised Emails by clicking a button widget.

Create a new API and name it as send_email and set the URL as follows:

https://api.reply.io/v1/actions/addandpushtocampaign

In the header, we'll need to add the API keys that can found in the reply.io dashboard.
Now in the body, we take the inputs from the form widget and then run the API's to send the emails. Below is the JS.

{
    campaignid: 558301,
    lastName : {{users_list.selectedItem.last_name}},
    firstName: {{users_list.selectedItem.first_name}},
    email: {{users_list.selectedItem.email}}
}

Now set the button onClick property to the following JS:

{{
  get_user.run(() =>
    send_email.run(
      () => showAlert("Reached out to user", "success"),
      () => showAlert(send_email.data, "warning")
    ));
}}

Here, we’re fetching the users and sending them the Emails using a reply.io campaign that's already created!

Wrapping Up

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

Building an Internal Leave Management Dashboard using Google Sheets

Building an Internal Leave Management Dashboard using Google Sheets

Vihar Kurama

minutes ↗

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:

Getting Started with Appsmith and Gsheets
Creating and listing all the leaves user has requested
Building an admin page to accept or reject the leaves
Listing down all the leaves that are approved and rejected
Conclusion

Let's dive in!

Getting Started with Appsmith and Gsheets

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:

Firstly, you will need to create a new account on Appsmith (it’s free)! If you’re already an existing user, you can sign in to your account.
Create a new application under any organisation by clicking on the Create New button, and you can rename the application by simply double-clicking on the existing name. In our case, let’s name this as Leave Management Dashboard.
Next, on the left navigation, we should see three options under your Page: Widget’s, APIs and DB Queries. Here, we can connect to data sources and build UI for these data sources using different widgets.
Now, let’s create a new API by clicking on the + button next to the APIs section. Next, choose Google Sheets and select New Datasource.

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.

Rename the data source name to Leave Management Data Source and set the scope to Read and Write, and hit continue. It will redirect for authorising your Google account, choose the email you want to connect with and authorise it.

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.

Creating and listing all the leaves user has requested

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:

Rename the API as getLeavesRequested and copy-paste the Google Sheets URL you're working on; in this case, we'll be using the duplicated mock-sheet. (Make sure you copy it to your account cause you'll need to authorise it to perform all the operations on it).
Now set the following properties:

 Sheet Name: Leave Requests
 Table Heading Row Index: 1
 Query Format: Query Rows
 Row Offset: 0
 Row limit: 100

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:

{{
getLeavesRequested.data.filter(
  (item) => (item.name = appsmith.user.name && item.Status === "REQUESTED")
);
}}

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:

Firstly, drag and drop a new button widget on top of the table. Next, open the Button's property pane and set the onClick property to open a Modal. In the dropdown's we'll see an option to create a new Modal directly there; let's choose it.
Name the modal as leaveApplyModal, and its property pane sets the modal type to Form Modal.

Now drag and drop the following Widget's on the modal to create a form:

Firstly a text widget and an input widget to display the name of who's applying for the leave. We'll add the label to the text widget as Name and rename the input widget as appliedBy. Cause we'll be referring to this when we're making an API call to the Google Sheet. Also, set the Default Text of appliedBy input widget to {{appsmith.user.name}} and disable property. So that Users can't create leaves on other's names. Cool right!
Next, add another text and input widget to add a Leave Note and rename the input widget to leaveNote.
Now, let's add two more text widgets and date-picker widgets to add the start date and end date. Set the default date's date picker widget to {{moment.now()}}. This will add today's date as a placeholder to the date picker widget.
We'll also add one more field that'll show us the number of day's we're applying for leave. We'll set the default value of the input to

{{moment(DatePicker2.selectedDate).diff(DatePicker1.selectedDate, "days") +1}}

Lastly, add a select widget that set's the alternate contact. Then, we'll pull the name's of our employees from the Users sheet. For now, let's set the options property to the following:

{{
getUserDetails.data.map((item) => {
  return {
    label: item.Name,
    value: item.Name,
  };
});
}}

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:

Click on the Leave Management Data Source and hit NEW API.
Rename the API as requestLeave and copy-paste the Google Sheets URL you're working on.
Now set the following properties:

 Method: Insert sheet row
 Sheet Name: Leave Requests
 Table Heading Row Index: 1

4.Add the following snippet in the Row Object property:

{
    "Name":"{{appliedBy.text}}",
    "Start Date":"{{DatePicker1.formattedDate}}",
    "End Date":"{{DatePicker2.formattedDate}}",
    "Total Days":"{{totalDays.text}}",
    "Reason":"{{leaveNote.text}}",
    "Other Contact":"{{alternateContact.selectedOptionValue}}",
    "Status": "REQUESTED"
    }

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:

{{
requestLeave.run(
  () => {
    getLeavesRequested.run();
    closeModal("leaveApplyModal");
  },
  () => showAlert("Leave Status updated!")
);
}}

Here, we create a workflow that does the following:

First, call the requestLeave API and submit the form.
Run's the getLeavesRequested API and updates the data in the Table.
Closes the leaveApplyModal Modal
Finally, it shows an alert saying, "Leave Status updated!"

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.

Building an admin page to accept or reject the leaves

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:

Create a new Page by clicking on the + icon next to the pages option in the side navigation. Name it as Leave Manager Admin
Now drag and drop a new Table widget onto the canvas.
Now copy the getLeavesRequested from Page1 to the Leave Manager Admin page.
Now add the following code snippet to the Table Data property:

{{
getLeavesRequested.data.filter(item=> item.Status==="REQUESTED")
}}

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:

Open the table’s property pane and click on the ADD A NEW COLUMN option. This will create a new column in your table. Now set the Column type to Button and set the label as APPROVED.
Similarly, add one more column and set the label to Reject.
To make it more intuitive, add the background colour to the buttons. In my case, I set the background colour of the Approve button to green and the background colour of the rejected colour to red.
Awesome, let’s add an onClick property to both these buttons. For this, let’s create two new API’s that will handle the leave status.
Now, create the new API from the GSheets data source and name it as approveLeaveStatus; the method will be Update sheet row as we update the google sheet.
Set the Sheet Name as Leave Requests and Table Heading Row Index as 1
Lastly, set the Row Object to the following:

{
    "rowIndex":{{Table1.selectedRow.rowIndex}},
    "Status":"APPROVED"
}

Similarly, create one more API named rejectLeaveStatus and set the Row Object as following to reject the leave:

{
    "rowIndex":{{Table1.selectedRow.rowIndex}},
    "Status":"APPROVED"
}

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:

Listing down all the leaves that are approved and rejected

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:

Now head back to Page1 and drag and drop a new List Widget onto the canvas.
We already have the getLeavesRequested API that has all the data of the leaves. So all we need to do is filter them based on the username and the leave status.
Now, let’s bind this API onto the list widget. First, open theList Widget’s property pane and add the following code snippet under the Items property:

{{
getLeavesRequested.data.filter(
  (item) =>
    (item.name =
      (appsmith.user.name && item.Status === "APPROVED") ||
      item.Status === "REJECTED")
);
}}

Next, drag and drop a few text widget’s and bind the list widget data using the currentItem property.

Leave Notes: {{currentItem.Reason}}
Leave Start Date: {{currentItem["Start Date"] }}
Leave End Date: {{currentItem["End Date"] }}
Leave Status: {{currentItem.Status}}

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:

Conclusion

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.

Announcing the Import-Export Feature for Appsmith Applications

Announcing the Import-Export Feature for Appsmith Applications

Vihar Kurama

minutes ↗

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!

Step #1 Export the Application

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.

Step #2 Import the 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.

Introducing the All-new SnowflakeDB Integration on Appsmith

Introducing the All-new SnowflakeDB Integration on Appsmith

Vihar Kurama

minutes ↗

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.

Connecting Snowflake DB on Appsmith

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.

Embed Anything! Introducing the New iFrame Widget

Embed Anything! Introducing the New iFrame Widget

Vihar Kurama

minutes ↗

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!

Using the iFrame widget

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.

Handling Message Events on iFrame Widget

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:

The iFrame widget listens to the message event of the window for catching the message from the iFrame embed. This event can be registered in the event listener.
This means that the iFrame widget is ready to receive messages from the iFrame embed.
In the iFrame widget, the defined ‘onMessageRecieved’, is just a function that will execute any action set on receiving a message.

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.

Handling URLs on IFrame Widget

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!

You can also follow us on Twitter and Linkedin.

Make Your Own Social Media Marketing App Like Hootsuite with Appsmith and n8n

Make Your Own Social Media Marketing App Like Hootsuite with Appsmith and n8n

Vihar Kurama

minutes ↗

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.

Getting Started with Appsmith

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:

Click on Create New under your organization, and this will create a new Appsmith application.
Rename the application to Social Broadcaster by simply double-clicking on the existing one.
On the left, find the entity explorer; this is where we can manage all our widgets and data sources of the entire application.

Awesome! We will build a simple UI with Appsmith widgets to broadcast messages onto different social platforms in the next section.

Building Simple UI

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.

Click on the + icon next to the Widgets menu on the entity explorer. Find the drag the Container widget and drag and drop it onto the canvas.
Resize this container widget based on our UI preferences. Next, find the Text widget and drop it inside the Container widget.
Next, open the property pane of the Text widget when selected by clicking on the cog icon on top-right, next to its name. Now, update the label property to Create Post.
To write the post content, let’s use a Rich Text Editor Widget. Drag and drop it inside the Container Widget.
Let’s add some Switch widgets, which will let us control what to post on social platforms. Set the labels to Discord, Slack, Twitter, and Linkedin from the property pane.
Lastly, add a Button widget; when clicked, content gets posted from the RTE to platforms marked in the switches.

We now have the basic UI for our broadcaster. Now, let’s create an n8n workflow and integrate it with Appsmith!

Building n8n Workflow

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:

npm install n8n -g

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:

Create a webhook trigger on n8n; for this, click on the + icon and search for Webhook under the Trigger sections. This will open up a new modal where we can configure the properties of the Webhook.
Next, find an if node under the Regular section and connect it with the Webhook. We’ll have four if nodes to which we’ll connect all the other integrations.
Lastly, find the Discord, Slack, Twitter, and Linkedin integrations and connect them with these if-nodes.

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.

Configuring Appsmith and n8n

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:

Double click on the Webhook node on the n8n editor; this will open up a modal with all the webhook properties.
Click on Webhook URLs and copy the Test URL.

http://localhost:5678/webhook-test/006d957e-0a8d-467e-9b01-178771e0d275

Update the TEST URL from your n8n environment.

Since we’re using the local version, we’ll be replacing localhost with the connect IP:

http://192.168.0.115:5678/webhook-test/006d957e-0a8d-467e-9b01-178771e0d275

Now, on Appsmith, select the Datasource option on the entity explorer and click Create New under the APIs section.
Change the request method to POST and paste the webhook URL. Next, under the body property, paste the following code snippet:

{
    "content": {{RichTextEditor1.text}},
    "medium": {{
    function(){
    let str = ""
    if (slackSwitch.isSwitchedOn==true){
        str +="slack "
    }
    if (discordSwitch.isSwitchedOn==true){
        str +="discord "
    }
    if (TwitterSwitch.isSwitchedOn==true){
        str +="twitter "
    }
    if (linkedinSwitch.isSwitchedOn==true){
        str +="linkedin "
    }
        return str
    }()
    }}
}

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.

Lastly, on n8n, click Execute Workflow and on Appsmith, hit RUN on the API.

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.

Conclusion

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!

You can also follow us on Twitter and Linkedin.

Self-host Appsmith in Just a Few Minutes on Digital Ocean

Self-host Appsmith in Just a Few Minutes on Digital Ocean

Vihar Kurama

minutes ↗

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:

Login to your DigitalOcean account.
Find Appsmith from the DigitalOcean marketplace here.
Click on the Create Appsmith Droplet button; this will redirect you to a new page where you can set up all your configurations.

For a base configuration, use the following settings.

Shared CPU: Basic
CPU Options: Regular Intel with SSD (1 GB CPU / 25GB SSD / 1000GB Transfer )
Data Center Region: (Choose the nearest location to your place)
Additional Options: IPV6 Enabled

In the authentication section, you can either choose SSH or set up a password if you want to log in to your server.
Lastly, click on Create Droplet button.

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:

Hosting Appsmith DigitalOcean Droplet on Your Domain

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 🙃

Wrapping Up!

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!

Appsmith Round-Up: Three New Widgets, Slash Commands, and Improved Navigation

Vihar Kurama

minutes ↗

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!

🎨 New Widgets and Upgrades

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:

The list widget is now faster, smoother, and bug-free. Users can now increase the height of list items, use modals, add multiple bindings, and do much more! Read the documentation to learn more.
The image widget now has a cool rotate property! To enable it, toggle the rotate property on the property pane. Wait! We’ve also added a new object-fit property that lets users align images to cover, contain or auto-fit! Cool right?

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.

🛩️ New Navigation and Slash Commands

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:

Connect data sources faster
Find the right widget for available data
See relationships between UI and Data clearly

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.

⚒️ New Integrations

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.

Generate a CRUD App from Any Database with One Click!

August

Generate a CRUD App from Any Database with One Click!

Vihar Kurama

minutes ↗

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.

So What’s This Feature All About?

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:

CREATE new data (rows) into the table
Read all the data from the selected table
Update a particular row item in the table
Delete the selected row item in the table

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!

How To Use the Generate New Page from Database 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:

If you’re an existing user sign in to your account or you can sign-up here for free.
After you sign in you’ll be redirected to the Appsmith dashboard where you can create a new application by clicking on the Create New button.
This will create a new Appsmith application, now to connect a data source click on the + icon next to the Datasource option on the left navigation bar.
You can choose from a wide range of options here, in case if you want to test it you can use the mock-users database.
Next, under the active data sources click on the GENERATE NEW PAGE option.

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.

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.

Building an Expense Manager for your Startup!

September

docs.google.com/spreadsheets/d/1b7BuwDx0He4..

Building an Expense Manager for your Startup!

Vihar Kurama

minutes ↗

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:

Getting Started with Appsmith and Gsheets
Fetch Data from Google Sheet to Appsmith
Posting Data for Requesting Reimbursement
Expense Manager Admin
Adding some additional metrics to track expenses!

Set Up Google Sheets and Appsmith

Follow the steps below to use Google Sheets with Appsmith:

Create a new account on Appsmith (it’s free!), if you are already an existing user, log in to your Appsmith account.
Create a new application by clicking on the Create New button under the Appsmith dashboard.
We’ll now see a new Appsmith app with an empty canvas and a sidebar with Widgets, APIs and DB Queries.
Click on the + icon next to the APIs section and choose the Google Sheets option.
Next, click on the New Datasource button and set the scope to Read and Write and click Authorise.
This will ask us to log in from our Google Account, choose the account we want to access Google Sheets with and log in. After successful authorisation, this will redirect back to your Appsmith account.
Now, you’ll find your Google Sheets Datasource under your APIs, and you can create the necessary queries by choosing this data source.

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:

Date
Requested On
Type
Reason
Amount
Status
Requested By
Attachment(s)
Comments from Admin

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.

Fetch Data from Google Sheet to Appsmith

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:

After clicking the New API button, you’ll be redirected to a new query tab, name your API to getReimbursement by double-clicking on the existing one.
Now set the method to Fetch Sheets Row, this method will query the data that’s present in the given Google Sheet.
In the SpreadSheet URL property, paste the URL of your Google Sheet, in this tutorial we’ll be following with the following URL:

https://docs.google.com/spreadsheets/d/1b7BuwDx0He41wtKYazxX3uJyIgQDHDRWyfyycL6mLMk/edit#gid=0

Next, in the Sheet name, add the name of our first sheet which is Reimbursement
The Table Heading Row Index property takes in the row number that basically has our column heading, we’ll set this to 1.
Next, we’ll set the Row Offset to 1 and Row limit to 100, this will query only the first 100 rows of our Google Sheet.
Lastly, click on the Run button on the top right, we should see the sheet information in JSON format in the response pane at the bottom.

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:

{{
    getReimbursement.data.filter((item) => {
        return item["Requested By"] == appsmith.user.name;
    })
}}

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:

Text1: {{currentItem.Reason}}
This will display the reason from the sheets row onto the list item

Text2: {{`Amount: ${currentItem.Amount} $`}}
Display’s the amount of the expense

Text3: {{`Status: ${currentItem.Status} $`}}
Display’s the status of the expense from the sheets row onto the list item

Text4: {{currentItem["Date"]}}
Display’s the status of the expense from the sheets row onto the list item

Text5: {{`Type: ${currentItem.Type}`}}
Display’s the Expense type from sheet

Text6: {{currentItem["Date"]}}
Display’s the date from the sheet

With this, our list widget is colourful and feature-rich.

Here’s how it looks like:

Post Data for Requesting Reimbursement

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:

First, let’s add a container component to wrap all the widgets on the canvas.
Drag and drop the Form widget onto the container widget, here we’ll see two button’s that’ll allow to submit a form and reset a form.
Add the following widgets onto the form widget that’ll allow us to collect all the data to request a reimbursement.
Select Widget (Name it as claimType)

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:

{{
function () {
      let skills = ["Travel", "Hotel and Accomodation", "Food", "Medical", "Telephone","Fuel", "Imprest", "Other"];

      let options_list = skills.map((item) => {
        return {
          label: item,
          value: item,
        };
      });

      return options_list;
    }()
}}

Here we define an array of all the options and iterate through a for-loop and render them all in the select widget.

DatePicker Widget (Name it as expenseDate) The date picker widget allows us to add the date of the expense. To set the default date, open the property pane and set the Default Date to moment.now()
Input Widget (Name it as expenseDetail) Allows users to add the details of reimbursement.
Input Widget (Name it as expenseAmount) Allows the user to add the amount that’s requested for the reimbursement. Here, to make it more precise, ser the input type to float, to accept decimals in the given input.

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:

Create a new API from the existing Google Sheets data source and set the query method to Insert Sheet Row. This query method helps us insert new data to the Google Sheet from Appsmith.
Name the query as postReimbursement
Next, in the SpreadSheet URL property, add the link to our Google Sheet.
The Sheet Name will be Reimbursement as named in our Google Sheet.
The Table Heading Row Index will be the row where the names of the columns are listed; in our case, this will be 1,
Lastly, the Row Object takes a JSON object with keys set to the column names associated with the desired values. In our case, below is how the Row Object should look like:

{
    "Date": "{{expenseDate.formattedDate}}",
    "Requested On":"{{moment().format("L")}}",
    "Type": "{{claimType.selectedOptionValue}}",
    "Reason": "{{expenseDetail.text}}",
    "Amount": "{{expenseAmount.text}}",
    "Status": "Pending",
    "Requested By": "{{appsmith.user.name}}"
}

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.

Expense Manager Admin

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:

Create a new page by clicking on the + icon next to the pages and rename it to Admin View.
Add a container widget across the canvas to group all the widget’s Copy the getReimbursement query from Page1 to Admin View page
We’ll now add a table to show all the pending reimbursements and add an option to approve and reject them. Drag and drop a table widget onto the container, open the property pane and set the Table Data to the following:

{{getReimbursement.data.filter((item) => {
  return item["Status"] == "Pending";
})}}

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:

Open the Table’s property pane, and add click on the add new custom column, set the label to Approve and column type to Button.

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:

{
    "rowIndex":{{Table1.selectedRow.rowIndex}},
    "Status": "Approved"
}

Similarly, create another query for rejecting the reimbursement (rejectReimbursement), use the following code snippet in the Row Object property:

{
    "rowIndex":{{Table1.selectedRow.rowIndex}},
    "Status": "Rejected",
    "commentsInput":"{{commentsInput.text}}"
}

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:

{
    {{getReimbursement.data.filter((item) => {
  return item["Status"] == "Approved";
})}}
}

{
   Table3, Table Data:
{{getReimbursement.data.filter((item) => {
  return item["Status"] == "Rejected";
})}}
}

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

{
 {{
function(){
    let count =0;
    for(let i=0;i < Table1.tableData.length; i++){
        count = count+ parseInt(Table1.tableData[i]["Amount"])
    }
        return "Total Amount Pending:  " + count
}()
}}
}

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

Say Hello to Our New ArangoDB Integration

Say Hello to Our New ArangoDB Integration

Vihar Kurama

minutes ↗

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.

Using ArangoDB Integration

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:

On the Appsmith dashboard, create a new application by clicking on the Create New button under any organization.
Find the Datasources option on the left navigation pane, click on the + icon next to it.
Find the ArangoDB integration and select it; you’ll be redirected to a new page where you will have to add your ArangoDB configuration.

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.

Click on the + icon next to the data sources on the side navigation.
Find the ArangoDB data source and click on NEW QUERY
In the query pane, write Graph Queries for performing any operations on the data source. For this example, we’ve installed the eCom Analytics example from the ArangoDB cloud. Let’s try to fetch the departments that are present in the department’s table.

Add the following query in the query pane and click the RUN button on the top-right.

FOR document IN departments RETURN document

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!

Appsmith Roundup: Build CRUD Apps with one-click, Move Multiple Widgets, New Icon Widget and Omnibar

September

Appsmith Roundup: Build CRUD Apps with one-click, Move Multiple Widgets, New Icon Widget and Omnibar

Vihar Kurama

minutes ↗

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!

🖱️ Generate a CRUD app from any database with one click!

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:

If you’re an existing user sign in to your account or you can sign-up here for free.
After you sign in you’ll be redirected to the Appsmith dashboard where you can create a new application by clicking on the Create New button.
This will create a new Appsmith application, now to connect a data source click on the + icon next to the Datasource option on the left navigation bar.
You can choose from a wide range of options here, in case if you want to test it you can use the mock-users database.
Next, under the active data sources click on the GENERATE NEW PAGE option.

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!

🎉 New ICON Widget

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!

New Omnibar

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!

💡 Moving multiple widgets using widget grouping!

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.

Building an Admin Panel with MongoDB using Appsmith

Building an Admin Panel with MongoDB using Appsmith

Vihar Kurama

minutes ↗

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.

Building an Admin Panel with MongoDB

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!

Connecting to a MongoDB Data Source

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."

First, you’ll have to create a new application on Appsmith.
A new application opens up an application titled Untitled Application 1; you can rename it by double-clicking on the existing one.
Now click on the DB Queries and create a New Data Source button. Since we’ll be using MongoDB, select the MongoDB option listed there. Below is a screenshot of how the settings look like:

You’ll also have to white-list Appsmith on the Mongo Server if you had any IP restrictions on your Mongo instance.
Next, set the Connection mode to Read/Write, Connection Type to Replica set.
Now you can add the host address, you can find this under your MongoDB cluster settings. In this guide, we’ll be using cluster0.d8mtn.mongodb.net
Next, click on the Test button to verify if the credentials are configured correctly or not. Once verified you can save the data source and then start working on your queries.
Finally, we’ll create a new query to fetch items from the product collections by clicking on Create Query. Use the following code snippet to fetch products from the products collection:

{
"find": "products",
}

Let’s name this query get_products and hit run to view the query response.

Displaying the Data onto UI

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:

{{get_products.data}}

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 {{ }}."

Update an Item on MongoDB with Appsmith

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.

First, search for a Form widget that will house the input fields.
Next, add some Text fields to visually indicate the product being updated (we can optionally display product image).
A Number input to update product quantity.
A Date input to update the product expiry date.

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:

{{Table1.selectedRow.name}}

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:

{{Table1.selectedRow.quantity}}

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:

{
{
  "update": "products",
  "updates": [
    {
      "q": {
        "_id": ObjectId("{{Table1.selectedRow._id}}")
      },
      "u": {
        "$set": {
          "quantity": "{{Input1.text}}",
          "expires_at": "{{DatePicker1.selectedDate}}"
        }
      }
    }
  ]
}

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.

Displaying Data in a Chart Widget

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:

{
  "find": "sales",
    "filter": {
    "product": ObjectId("{{Table1.selectedRow._id}}")
  },
}

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:

{{ 
getproductsales.data.map(s => ({y: s.quantity, x: moment(s.date).format("MMM Do")}))
}}

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.

Deploying the MongoDB Admin Panel

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‍