DEV Community: Vihar Kurama

We built Plane ✈️ Open Source Project Management Tool (Next.js + Django)

Vihar Kurama — Fri, 05 May 2023 13:02:59 +0000

Plane GitHub Repo

Story behind Plane

Plane is an open-source project management tool designed to help teams from different domains including engineering, marketing, product, and design to collaborate and manage their projects more efficiently. It is an alternative to expensive and opinionated tools such as JIRA, Trello, OpenProject, etc. that often come with steep learning curves and may not be suitable for every team's unique needs.

Plane allows users to start with a basic task tracking tool and gradually adopt various project management frameworks like Agile, Waterfall, and many more.

Setting-up Plane

Setting up the Plane server is a breeze! You can easily do it by running a simple command using docker-compose from your terminal. Whether you prefer working on your local machine or cloud provider, Plane server is packaged as a Docker container.

git clone https://github.com/makeplane/plane
cd plane
./setup.sh localhost
docker-compose up

Plane is also on DockerHub and can be installed with single command, read our docs to learn more.

Plane Features

Issue Planning and Tracking: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to issues for better organization and tracking.
Issue Attachments: Collaborate effectively by attaching files to issues, making it easy for your team to find and share important project-related documents.
Layouts: Customize your project view with your preferred layout - choose from List, Kanban, or Calendar to visualize your project in a way that makes sense to you.
Cycles: Plan sprints with Cycles to keep your team on track and productive. Gain insights into your project's progress with burn-down charts and other useful features.
Modules: Break down your large projects into smaller, more manageable modules. Assign modules between teams to easily track and plan your project's progress.
Views: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
Pages: Plane pages function as an AI-powered notepad, allowing you to easily document issues, cycle plans, and module details, and then synchronize them with your issues.
Commend Menu: Enjoy a better user experience with the new Command/Control + K menu. Easily manage and navigate through your projects from one convenient location.
GitHub Sync: Streamline your planning process by syncing your GitHub issues with Plane. Keep all your issues in one place for better tracking and collaboration.

Demo: Plane Cloud

Love our project? Show us your support by leaving a star on GitHub.

makeplane / plane

🔥 🔥 🔥 Open Source JIRA, Linear, Monday, and Asana Alternative. Plane helps you track your issues, epics, and product roadmaps in the simplest way possible.

Plane

Open-source project management that unlocks customer value

Website • Releases • Twitter • Documentation

Meet Plane, an open-source project management tool to track issues, run ~~sprints~~ cycles, and manage product roadmaps without the chaos of managing the tool itself. 🧘‍♀️

Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on Discord or raise a GitHub issue. We read everything and respond to most.

⚡ Installation

The easiest way to get started with Plane is by creating a Plane Cloud account.

If you would like to self-host Plane, please see our deployment guide.

Installation methods	Docs link
Docker
Kubernetes

Instance admins can configure instance settings with God-mode.

🚀 Features

Issues: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to problems for…

View on GitHub

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

Vihar Kurama — Thu, 06 Jan 2022 14:39:23 +0000

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.

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

Vihar Kurama — Tue, 07 Dec 2021 05:36:21 +0000

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.

%[https://github.com/appsmithorg/appsmith/issues/1751]

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!

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

Vihar Kurama — Mon, 08 Nov 2021 11:58:49 +0000

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.

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

Vihar Kurama — Wed, 08 Sep 2021 06:03:10 +0000

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.

Say Hello to our New ArangoDB Integration

Vihar Kurama — Fri, 30 Jul 2021 12:37:25 +0000

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!

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

Vihar Kurama — Fri, 30 Jul 2021 12:32:21 +0000

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!

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

Vihar Kurama — Fri, 30 Jul 2021 12:14:07 +0000

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.

Embed Anything! Introducing the New iFrame Widget

Vihar Kurama — Fri, 30 Jul 2021 11:33:43 +0000

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!

https://youtu.be/4jXTyxUhnP0

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.

Introducing the all-new SnowflakeDB Integration on Appsmith

Vihar Kurama — Fri, 30 Jul 2021 11:30:41 +0000

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.

Building an Internal Leave Management Dashboard using Google Sheets

Vihar Kurama — Thu, 17 Jun 2021 15:46:57 +0000

Startups falter in productivity due to employees taking unplanned or just too many leaves. But sudden issues can arise with anyone, anytime, but 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 a record of all leave records.

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

Name

Available Leaves

Leaves Applied

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

Name

Start Date

End Date

Total Days

Reason

Other Contact

Status

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

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

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":"REJECTED"
}

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.

Build an Investor CRM using Appsmith on Google Sheets

Vihar Kurama — Tue, 11 May 2021 12:40:04 +0000

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:

Name of Fund
Name of Investor
Designation
Investor interesting portfolio companies
Interest levels
Size of fund
Reference check names
Reference check details
Are they interested in us? Or generally, following up?
Short note to self about the fund and plans we have with the fund.

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.

Date of conversation
Summary
Pitch deck shared (link/upload)
Other files shared (summary + links)
Next steps (Text field)
Next steps date

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

- Investors
- Company
- Location
- Amount
- Link
- Website
- Round
- Interest Levels
- Notes

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

Investors : addNewInvestors
Company: addCompany
Location: addLocation
Amount: addAmount
Link: addLink
Website: addWebsite
Round: addRound
Notes: addNotes
Interest Levels: addInterest

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:

{
    "Company":"{{addCompany.text}}",
    "Amount":"{{addAmount.text}}",
    "Location":"{{addLocation.text}}",
    "Investors":"{{addNewInvestors.text}}",
    "Link":"{{addLink.text}}",
    "Website":"{{addWebsite.text}}",
    "Round":"{{addRound.text}}",
    "Notes":"{{addNotes.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:

Investor : investorInput
Company: companyInput
Amount: amountInput
Reference Names: refInput
Website: websiteInput
Location: locationInput
Round Type: roundInput
Link: linkInput
Interest Levels: intrestInput
Short note to self about the fund and plans we have with the fund: notesInput

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:

Investor Input Widget: {{ Table1.selectedRow.Investors }}
Company Input Widget: {{ Table1.selectedRow.Company }}
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}},
    "Company":"{{companyInput.text}}",
    "Amount":"{{amountInput.text}}",
    "Location":"{{locationInput.text}}",
    "Investors":"{{investorInput.text}}",
    "Link":"{{linkInput.text}}",
    "Website":"{{websiteInput.text}}",
    "Round":"{{roundInput.text}}",
    "Notes":"{{notesInput.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

DEV Community: Vihar Kurama

We built Plane ✈️ Open Source Project Management Tool (Next.js + Django)

Plane GitHub Repo

Setting-up Plane

Plane Features

makeplane / plane

🔥 🔥 🔥 Open Source JIRA, Linear, Monday, and Asana Alternative. Plane helps you track your issues, epics, and product roadmaps in the simplest way possible.

Plane

⚡ Installation

🚀 Features

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

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

New SMTP Plugin to Easily Send Emails

New Widgets on the Block: Document Viewer and Switch Group

New JS APIs for Geo-Location

Easy Self-hosting on AWS-AMI and DigitalOcean

New Admin Settings Page to Manage Self-hosted Instances

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

The Story

How did we build this?

JS Editor and Objects in Action

What’s Next for the JS Editor?

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

What is the SAN Stack?

Why Supabase, Appsmith, and n8n?

Build a Simple Ticket Manager Using SAN Stack

Set up your Backend on Supabase

Build UI on Appsmith and Writing Queries

Building an Extendable Workflow on n8n

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

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

🎉 New ICON Widget

New Omnibar

💡 Moving multiple widgets using widget grouping!

Say Hello to our New ArangoDB Integration

Using ArangoDB Integration

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

Hosting Appsmith DigitalOcean Droplet on Your Domain

Wrapping Up!

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

Getting Started with Appsmith

*Building Simple UI *

Building n8n Workflow

Configuring Appsmith and n8n

*Conclusion *

Embed Anything! Introducing the New iFrame Widget

Using the iFrame widget

Handling Message Events on iFrame Widget

Handling URLs on IFrame Widget

Introducing the all-new SnowflakeDB Integration on Appsmith

Connecting Snowflake DB on Appsmith

Building an Internal Leave Management Dashboard using Google Sheets

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

Build an Investor CRM using Appsmith on Google Sheets

Setting Up Google Sheets and Appsmith

Fetch Data from Excel Sheet to Appsmith

Insert new data/rows to Google Sheet from Appsmith

Displaying and Updating Investor Details

Creating new conversations page to save notes and files

Dynamically Passing the Query Params and Adding Notes

Wrapping Up

Building Simple UI

Conclusion