$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go
6
October
2021
Product

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go

$10.5mn Funding Raised in Seed and Series A: How We Got Here and Where We Want to Go
Abhishek Nayak
0
 minutes ↗
#
announcement
#
open-source
Product

Appsmith launched a year ago, and since then, we’ve seen tens of thousands of engineers make Appsmith a part of their internal tooling tech stack. We’ve seen a lot of community contributions that have made Appsmith better for everyone

Today, I’m thrilled to announce that we’ve raised $10.5mn across two rounds of funding from Accel, Canaan Partners, Bessemer, and others. 

We couldn’t have done this without the love from our users and support from the community. We aim to use this capital and make Appsmith the best choice for every internal software project.

Appsmith, as an idea and subsequently as a product, came out of a series of interlinked personal experiences. A few years ago, when I was building Mob Show, a mobile game, all I wanted was for our daily active players to increase. In two months, we went from zero to five thousand, and we were doing everything we could to double that number. We wanted growth. Sure enough, we went from 5000 to 120000 DAUs within a week! We should have been thrilled, but we felt overwhelmed and exhausted. Why? Because unprecedented growth comes with unprecedented challenges. Scaling at such a breakneck speed amplified the number of bugs and problems in the game. Customer support requirements grew by 30x, while our team size remained the same. This growth was hell. We found ourselves scrambling to build internal tools that would help us make sense of this growth. 

I’ve seen this before when I was running Gharpay, a hyperlocal e-commerce company, where we relied on at least ten complex internal tools. These included backend tools for delivery personnel to manage and track their orders, tools for the accounting team to manage reconciliation on a daily basis, and of course, customer support tools to ensure speedy resolution of service requests. In fact, Appsmith’s co-founder, Arpit (who was also Gharpay’s CTO) was responsible for building and maintaining these apps. 

My co-founder, Nikhil, has also experienced the side of growth that is not pretty. Things go wrong wherever they can. And things will go wrong. As the head of product at Eat.fit, Nikhil saw orders scale from 50 a day to 50,000 a day in a short period. Customers began to have negative experiences; orders would go missing, delivery partners couldn’t find addresses, and there were payment issues. If these experiences are anything to go by, it’s that internal tools are critical to the success of every business. Nikhil, Arpit, and I feel strongly about the state of internal tools and believe that they are the backbone of any company’s success - old or new. 

So if Nikhil, Arpit, and I were getting together to create something together, both logic and intuition have led us to the Appsmith journey. We started Appsmith with a simple goal: To help engineers build the best apps they can to help their teams while avoiding repetition and monotony. Frontend and backend development for simple applications have become incredibly complicated. It feels like we are building the same things repeatedly but just using different programming languages.

Appsmith is an open-source low code framework to help developers avoid repetitive work like modifying UI components, writing integrations, creating a login page, etc., and building beautiful internal apps.  We have worked hard to create a product that developers use at Swiggy, Dunzo, WazirX, and thousands of other beloved companies. This has also meant that developers, HR, Operations, Finance, Admin, Customer Success, and Management teams have saved thousands of hours and boosted their productivity with Appsmith! 

Over the past 12 months, we have kept a razor-sharp focus on helping companies develop custom software that talks to different data sources. And each new day has been spent refining the product, building community feature requests, preempting the needs of our users. 

Since our launch, we’ve shipped:
35 UI widgets • 15 data integrations • JS editor • Debugger • Real-time commenting • A 2 min docker container setup

We’re gunning for more; brace yourselves! The Appsmith team and their speed of shipping genuinely amaze me. 

What Will We Do Next 

We’ll be shipping much-awaited features like white-labeled apps, custom widgets, mobile responsive apps, collaborative real-time editing, integration with multiple SSO providers, custom authentication, audit logs, and server-side JS execution in the next few months.  We will also be improving front-end customization while ensuring snappy performance. So we will be building a lot of new widgets, adding more integrations, introducing dynamic height components, custom theming, and supporting custom CSS.

Overall, we will be focussing on five areas: 

  • Improving the quality and complexity of the frontend that can be built using Appsmith. 
  • Creating better coding and data integration experiences for our users. 
  • Putting more effort into integrating Appsmith in the software development cycles of engineering teams. 
  • Developing and shipping features specific to larger teams, such as SSO, audit logs, granular role-based access control, etc. 
  • Creating an excellent repository of learning resources and material like tutorials, guides, and templates so that users can learn how to use Appsmith faster. 

We are fully prepared to fulfill our promises, and I know that our stellar team has already started work! 

Welcoming our Investors 

We’re thrilled to have the best minds in the industry backing us. Accel led the seed round. Canaan Partners led the Series A round with Accel, Bessemer, OSS capital, and Prasanna Sankar, CTO of Rippling.

By the community, for the community 

Appsmith is a community product. Open source creates public goods that benefit a lot more people than proprietary products. I believe that low-code, combined with the power of open-source, is the way to empower businesses large and small. 

Before Appsmith, there was no open-source project that could build such custom internal tools and admin panels. There are many low code products, but we saw that no competitor was willing to reveal the source code, enabling engineers to contribute changes. I think buying proprietary software is like buying a car without an option to fix it. Open-source helps you make small improvements and changes to the software. We also saw that our competitors would only work with companies with large budgets and ignore the experiences of small teams or individual developers.

One of Appsmith’s users told me that volunteers use it in France to help new immigrants avail of government services and enable them to navigate their new life. Appsmith is a forever free open source project that has helped developers build for food banks, non-profits organizations, schools, universities, and government agencies. It’s immensely satisfying to support such users.

Before I end, I would like to take a moment to thank the entire team for building such a fantastic project in a very short time.

Without you, there is no Appsmith. 

Coming to this point was a lot of fun, and in many ways, it’s the first step towards a long road. We expect it to be rocky, but it will be fun as heck. 

Appsmith Roundup: Powerful Widget Grouping Options, Undo-Redo, and New Widgets
6
October
2021
Monthly Round-up

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

Appsmith Roundup: Powerful Widget Grouping Options, Undo-Redo, and New Widgets
Vihar Kurama
0
 minutes ↗
#
community
#
engineering
#
open-source
#
applications
Monthly Round-up

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.

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:

  1. Open the Quick search and navigation on the top menu bar.
  2. Select use snippets
  3. 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.  

Engineering=Growth
14
April
2021
Engineering

Engineering=Growth

Engineering=Growth
Akshay Rangasai
0
 minutes ↗
#
product
#
engineering
#
open-source
#
internet
Engineering

Product led growth as a concept is making the rounds. Investors cannot get enough of it, Twitter is filled with threads about this topic, and many dedicated channels and podcasts are talking about this “new” growth paradigm. However, product-led growth is not something new and has existed for ages. The internet and digital products (Tech companies - Primarily SaaS and consumer internet) have brought this in focus. Growth in organizations has always been tied to marketing and sales, but product-led growth forces us to change that perspective and think about organizations differently.

In this post, we will explore the history of growth for companies, the rise of product-led growth, and why the key to driving it is to think about engineering and product teams as revenue generators rather than just cost resources that need to be allocated optimally.

How the internet changed growth for companies

Historically, the three key pillars to driving growth are Price, Product, and Distribution. Price and product dictate demand, while distribution ensures products are available to satisfy demand. The new world with digital products changes a little bit but with massive consequences. Nevertheless, to understand why we need to focus on product as the key driver of growth, we need to dive into the history of product development and how businesses monetized products.

Before the advent of computers, most of the real-world products were physical objects that needed to be manufactured, priced and distributed. Product development took ages, manufacturing took as much time, and as if this was not enough, you needed to find distributors to distribute products. Computers solved this problem by making each step easier and faster and created a whole new category of digital products.

The software was quicker to make and did not have the manufacturing overheads, but distribution was still a problem. The other big problem in both models was the product itself. You did not know if the product was good or not till you bought it. The ability to have information to make sound product decisions was again constrained by distributing a publication (Like Gartner). If you subscribed, you got it; if not, you didn’t. This meant that product development was a cost, and sales and marketing were revenue-generating functions. Distribution was key. Most companies treated engineering and product as allocated resources, and sales took a lot of the value generated from selling this product. This was just how the old world worked.

The software also hacked the working capital cycles that plague most manufacturing companies. Not only do you need to set up the infrastructure and pay wages to workers, but you also had to foot the bill for each item being made, and then you made it back when selling the product. As your company scaled, so did the requirement of capital. Scaling rapidly was not just a function of people but also a function of how much money you had, or how many loans you could get to foot this bill. Software hacked this cycle; it was infinitely distributable, without any additional cost of production. If you had enough distribution, you could scale easily. The collection cycles also made the companies cash-rich and did not need as much money as other product companies to grow.

Then came the internet. While you can claim that the internet made distribution cheaper, it isn’t really clear if it did. It made distribution faster, but discovery (of products and customers) was still an unsolved problem. Gartner subscriptions came via email and mail. Search engines made distribution cheap. Discovery, which was one of the hardest problems to solve, got solved because of the speed and reach the internet offered. AWS made software development cheaper, you did not need a boatload of capital to start a software company. Gartner is getting replaced by Capterra and G2 for the same exact reason of discovery is cheaper, as is distribution.

All the constraints that existed before to make sales the top dog in a company have been eroding over the years. These advances have made it a level playing field (for the most part). Information availability (G2, Capterra), near 0 cost of distribution and setup means that the only way a company can differentiate itself significantly from competition and win is through product.

The new role of engineering in product-led companies

Cloud computing has made CI/CD possible, and this rapid iteration helps create value immediately instead of long product cycles. Every new feature that is released is monetizable almost instantaneously. Your engineering and product organization is directly contributing to revenue in a measurable way. This is not just an account expansion, or user acquisition focused growth; Retention is also significantly affected by your product's quality. Retention is the first step to growth.

Engineering has always been an expensive talent in organizations. Whether it was for silicon chips or software, it was a scarce skill always in demand. The old paradigm of product development classified these skills as costs, making sense in that era. However, for product companies selling software and other digital goods, engineering should be seen as a lever for revenue generation.

Newer organizations, especially in software, still treat engineering as a cost and allocate resources based on the cost that is saved by deploying this skill across the organization. Thus we see 100s of companies building their own recurring subscription infrastructure when multiple SaaS companies exist to solve this problem. Non-customer facing development improves efficiencies within the organization, but allocating the same resources to customer-facing development could potentially have a significantly greater RoI if internal tooling is handled by other bought software or potentially spending as little time as possible in building internal tools (Non-customer-facing software).

What we think this means is that org and incentive structures need to change. It is not just a sales and marketing team generating revenue but also teams of product managers and engineers responsible for revenue growth. This may sound too harsh given how teams are structured now, but with better focus and newer org structures, this will only seem natural.

Our experiences and conclusion

We think it is time for companies to rethink their build vs buy decisions and consider product and engineering revenue generators. Opportunity costs in whatever form must also be taken into account while making these decisions. In the new age, the product will determine the winner, and it is essential to align your teams on this mission.

Our experience building Appsmith has yielded disproportionate returns by keeping engineering’s primary focus on customer-facing features and requests. We are seeing impressive growth over the last few months with pure product improvements and additions (support is included, of course, by our engineers!). Maybe we were lucky as we are building an internal app builder, and our team was forced to eat our dog food, but this is something that we believe has worked well for us, and we think other organizations should consider it more seriously.

If you have any questions, suggestions or feedback, please feel free to share it at akshay@appsmith.com

Cover Image Credits: Photo by Isaac Smith on Unsplash

Building a Daily Standup Application in 30 Minutes
20
April
2021
Tutorial

Building a Daily Standup Application in 30 Minutes

Building a Daily Standup Application in 30 Minutes
Kayode Alade
0
 minutes ↗
#
applications
#
open-source
#
startups
#
javascript
Tutorial

by Kayode Alade

The daily standup has become a norm in the schedule of most developers around the world. A standup is a daily team meeting, at a specific time for a specific duration, that asks team members to answer three major questions:

  1. What did I work on yesterday?
  2. What am I working on today?
  3. What issues are blocking me?

The daily standup answers these questions but does not resolve them. When put to good use, daily standups increase team productivity and also enhance cohesion between all the parties involved.

Tutorial Overview with Appsmith

In this tutorial, you’ll learn how to build a daily standup application using Appsmith, an open-source framework for building internal tools, admin panels, dashboards, and workflows. You’ll be using Appsmith to forward a summary of daily standups to Slack. Using a web framework like Appsmith is a much quicker way to add this feature to your workspace than building a completely new internal tool.

Screenshot of Stand up App

Appsmith comes out-of-the-box with prebuilt widgets like forms, charts, and maps that you can easily configure to your team’s needs. It also supports APIs and different types of databases. For more details about its capability, visit their official GitHub page.

Setting Up the Application and Data Model

First things first: head over to Appsmith to get a free account. After you sign up, it’s time to set up the user interface of your standup app.

  • Click Create New on the dashboard to create a new app. You will be taken to an empty canvas as shown below where you can start creating your app. The explorer sidebar on the left is used to add widgets, create pages, and connect to APIs and data sources such as Firestore.
An empty canvas in Appsmith
  • To build all the features needed for this app, you’ll need to create two pages in Appsmith. Double-click Page1 to rename it as First Page.
  • On the Pages bar, click the + icon to add a page, then double-click to rename the new page as Second Page.

Now that you’ve created your two pages, it’s time to start adding widgets. Your app’s first page will contain:

  • A personalized welcome message
  • A paragraph showing yesterday's standup
  • A text area where the user can enter what was done the previous day
  • A text area to write out what they plan to do today
  • An option field to show their blockers
  • A table to show users who completed yesterday’s tasks
  • Submit and reset buttons

Let’s create the custom welcome message next:

  • Navigate to the First Page and click the + icon beside Widgets to add a new widget.
  • Drag the text widget and drop it on the canvas.
  • Type in a custom welcome message as shown below.
Custom welcome message

Next, let’s display yesterday’s standup to-do on top so that you can see at a glance what you planned to do yesterday and then make plans based on that for today.

  1. Add two text widgets side by side on your canvas.
  2. Label the first Last Standup todo. The second widget will hold the value, or what was on the last standup to-do list. This will eventually be drawn from the database, but for now, you can pre-populate it with filler text.
  3. Style the widget’s text as you prefer via the Settings gear at the top right of each widget.
Setting up a widget for yesterday’s standup

As mentioned earlier, the goal of a standup is to provide information about the previous day’s tasks, tasks that need to be done today, and anything standing in the way of accomplishing those tasks. Obviously, you’ll need a form to input all that information.

To create a form:

  • Drag the form widget from the sidebar onto the canvas.
  • Label the inputs or dropdowns appropriately (eg, User, Yesterday’s todos, Yesterday completed, and so on). Note that the form widget comes out-of-the-box with Reset and Submit buttons.
Creating a form widget
  • Rename the form by double-clicking on the default name and editing it. Naming this particular form seemed unnecessary, so that the title widget in the form was deleted.
  • To delete a widget, hover over it, then right-click the widget name at the top right corner. In the dropdown menu, you’ll see a Delete option. Click to delete the widget.

To finalize your first page’s UI, let’s add a table to display the users who’ve submitted their standup for the day:

  • Drag the table widget onto the canvas. Note that the Table Data option in this widget already contains an array of objects. Later, you’ll change this to a query response from your database.
Table showing users who have submitted their standup report
  • Navigate to your Second Page, where you’ll add your table.
  • Drag the table widget onto the canvas.
  • Open the table options and add a new column called Actions.
  • Click the Settings gear above the Actions column and set the following properties:
  • Column Type: Button
  • Label: Edit
  • onClick: OpenModal
  • Modal Name: New Modal
Configuring the Edit button
  • In the Actions column you just created, click the button that now reads Edit. A new modal will popup, which you’ll use to edit the table’s data.
  • Change the title text widget to Edit Table.
  • Drag a text widget into the modal and set the following properties:
  • Text value: Username
  • Text align: Left
  • Text style: Label
  • Add a dropdown widget beside the label you just created. In the Settings for that widget, set Selection type to Single Select. This dropdown, which ought to display all users of your app, will read data from your database after connecting the database to Appsmith later in this tutorial.
  • To add a field for blockers, drop in a text widget, name it Blocker, and add a dropdown widget as you’ve done previously.
  • Add one field each for today’s to-do and yesterday’s to-do. These will take a text widget and an input widget each.
  • Finally, add a field to confirm if yesterday’s to-do is complete. Drag over a text widget and a dropdown widget with the values Yes or No.
Configuring the EditModal

Connecting Your Database

Appsmith allows you to link data from several databases. For this tutorial, you’ll make use of Firestore.

  • In Appsmith, click Second Page on the sidebar, then click the + icon beside DB Queries.
  • Select Add a new data source.
  • Select Firestore.
Selecting your datasource
  • Create a Firestore database to get the project ID.
  • From your Firebase console, click the Settings gear on the sidebar.
  • Copy your project ID and paste it into Appsmith. Your database URL is https://_your-project-id_.firebaseio.com.
Connecting Firestore
  • Back in your Firebase console, click the Service accounts tab.
  • Click Create service account. The JSON file containing your service account's credentials will download.
  • Copy the contents of the file and paste it into the Service Account Credentials field.
  • Click Test so that Appsmith can verify everything is correct, then click Save.
  • Back in Firestore, click Start Collection to create a collection, or database table. Set the Collection ID to User and add fields for name and email, both as string type. Sample user values will work for each, eg Chris for the name value and chris@email.com for the email.
Adding collections and values to your Firestore
  • To add a collection named StandUps, add fields for date (in seconds), today's to-dos, yesterday's to-dos, completed, and blocker in Firestore.

Note that since you’re building an internal app, you can create more users and standups in their respective collections.

Creating Standup Queries

Mustache syntax ({{...}}) allows you to write JavaScript in Appsmith to read data from elements defined on a particular page. Let’s take advantage of this to pull information from queries or other widgets. First, let’s create the queries:

  1. Click the + icon on the DB Queries menu. You should see your database as an option.
  2. Click New query on the top right corner of your database option.
  3. Rename it to createStandUp.
  4. In the Method dropdown of the createStandUp window, select Add Document to Collection.
  5. Set the database to the name of your database in Firestore. Fill in the body with the following code:
{
    "yesterday": "{{Input3.value}}",
    "user": "{{Input2.value}}",
    "blocker": "{{Input5.value}}",
    "todos": "{{Input4.value}}",
    "prev_completed": "{{Dropdown2.value}}"
    "date": {{Date.now()}}
}

Note that widgets in Appsmith are global objects, so you can access their values simply by calling widget_name.value.

createStandUp

Continue to round out your app’s queries:

  • For fetchUsers, set the following properties:
  • Method: Get Documents in Collection
  • Document/Collection Path: users
fetchUsers
  • For fetchStandUps, set the following properties:
  • Method: Get Documents in Collection
  • Document/Collection Path: standUps
  • Order By: ["date"]
fetchStandUps
  • For updateStandUps, set the following properties:
  • Method: Update Document
  • Document/Collection Path: standUps/{{Table1.selectedRow._ref.id}}
  • Body: paste in the following JSON
{
    {
    "yesterday": "{{Input3.value}}",
    "user": "{{Dropdown3.value}}",
    "blocker": "{{Dropdown4.value}}",
    "todos": "{{Input4.value}}",
    "prev_completed": "{{Dropdown2.value}}"
}
updateStandUps

Note that queries can only be referenced on the page where they’re defined. If you need the same query on another page, you need to copy and rename it on the other page.

Connecting Widgets to Queries

Now let’s connect these queries to the widgets in your Appsmith app.

  • On the First Page of your Appsmith app, replace the text in the widget next to Last Standup todo with:
{
{{fetchUserStandUps.data[0].todos}}
  • For the User and Blockers dropdowns, replace the options with this:
{
{{fetchUsers.data.map((e,i) => {return {label: e.name, value: e.name}}) }}
  • Fo the Yesterday completed dropdown, replace its options with this:
{
[{"label": "Yes", "value": "true" }, { "label": "No", "value": "false" }]
  • To configure the First Page’s Submit button, select Execute DB query under onClick, then select the createStandUp query.
First Page’s Submit button
  • To configure the Second Page’s Refresh button, select Execute DB query under onClick, then select the fetchStandUps query.
Second Page’s Refresh button
  • To configure the Second Page’s Search button, select Execute DB query under onClick, then select the StandUpsByName query. Set onSucess to store value, key to data, then set value to {{StandUpsByName.data}}.
Second Page’s Search button

Integrating with Slack

To send the summary of your standup to Slack, integrate your Appsmith app with Slack using incoming webhooks.

“Incoming Webhooks are a simple way to post messages from apps into Slack. Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options. You can use all the usual formatting and layout blocks with Incoming Webhooks to make the messages stand out.” - Slack

Let’s dive in with the integration:

  • Head to Slack to create an account if you don’t have one.
  • Open the Create an App page. The Create a Slack App window appears automatically. If it doesn’t, click *Create New App.
  • Give your app a name and choose the Slack workspace you’re building it for. Click Create App. The Building Apps for Slack page opens.
Creating a Slack app
  • Click Incoming Webhooks to open the feature, and toggle the switch to On to activate it. Scroll to the bottom of the page to copy the webhook URL.
Activating incoming webhooks
  • Back in Appsmith, under First Page, click the + icon beside APIs, then select Create new.
  • Paste the webhook in the first input field and change the request type to POST.
  • Click the Body tab and fill in the message as a JSON object as shown:
{
{
    "text": "New Standup added by {{Dropdown1.value}}, Yesterdays todo: {{Input1.value}}, Completed: {{Dropdown3.value}}, Todays todo: {{Input2.value}}, Blockers: {{Dropdown2.value}}, link: https://app.appsmith.com/applications/6043f3a5faf5de39951a897e/pages/6043f3a5faf5de39951a8980  "
}
Slack post request

Let’s go back to your First Page in your app and configure the Submit button so that it sends a Slack message on submit.

Click the Settings gear for the Submit button. Below onClick, find the onSuccess field and from the Call An API option, select your Slack API.

Submit button edit

Viewing the Completed Daily Standup Application

At this point, your Appsmith app should look like this:

Completed standup app in Appsmith

And as a result, your Slack channel should look like this:

Slack channel

You can check out this tutorial’s completed app on Appsmith.

Summary

In this tutorial, you learned how to build a daily standup app using Appsmith, including widgets that enable users to detail their accomplished tasks, their daily to-do lists, and any blockers keeping them from their goals. You then integrated your app with Slack, so you can send summarized standup reports to a specific Slack channel via incoming webhooks.

Have an idea for another app you’d like to build without reinventing the wheel? Check out Appsmith’s Getting Started documentation, or jump right in by signing up for a free account.


Author Bio: Kayode is a tech enthusiast specializing in embedded systems and system design and modelling. His programming languages of choice include C, C++, JavaScript, and Python. In his free time, he loves adding value to people's lives with technology.

Building a Github Star Tracker for your Open Source Project
21
April
2021

Building a Github Star Tracker for your Open Source Project

Building a Github Star Tracker for your Open Source Project
Akshay Rangasai
0
 minutes ↗
#
open-source
#
github
#
startups
#
javascript

Github interface is not very convenient to track the stars of your open source project, and it needs a lot of clicks, and hard to access all required information. We at Appsmith, as an open-source project, always wanted to keep track of our stars and see who is interested in our product. So we built an application using Appsmith to see the profiles of users who starred our repository. In this tutorial, we'll learn how we can build this star tracker app in just 10 minutes.

The Idea!

  • This star tracker application has a table to show a list of users who have starred a repository.
  • A container that shows more details of selected users like Name, Location and Company.
Check out the live demo of the app here.

Building the Application

To begin, you'll need to sign up for Appsmith (it's free!). If you already have an account, sign in and click Create New to create a new application. Name the application as Github Star Tracker.

Now, we will start with the output - what do we want to see and where? Appsmith makes it super easy to do so. Let's start with a simple text widget to display number to GitHub stars for the Appsmith repo. Next, let's add a table widget so we know what data we want to see. We will make the application more complex as we progress. We'll name this table starred_users, and it is essential to remember this name, as we will use this to reference queries later on.

Gif One.gif

You can see that Appsmith auto-populates the widget with sample data to show you what the render looks like. Once we set this up, we will dynamically change the content in the widget.

Using the other widgets in the widgets pane, let's create a user profile section to the right of the table. We're using Text widgets for this. Let's start with username, company and location as these are very common in Github.

Image One.png

That's it. We have a view. Now we need to bind data to the widgets.

Displaying User Data in the Table

To display data in our table, we need to bind the widget with a data source. This involves two simple steps, and an optional one for more control on what we'd like to display:

  • Create an API call to Github that returns the list of users who have starred the repository
  • Bind the API to the table Starred_Users
  • Transform the data using Javascript as necessary

Let's start by setting up the GitHub API,

We will use the public Github API endpoint, which doesn't require authentication, through a GET method from appsmith.

Now click on the + icon next to the APIs section on the sidebar and click Create New. Let's call this API Fetch_Starred_Users in the URL request input, the method is GET and we will use the URL constructed from Github's API documentation.

https://api.github.com/repos/appsmithorg/appsmith/stargazers

For the public GitHub API, we need to add the header telling them we're an app that is accessing v3 of the API and expecting a JSON response. We'll keep the params empty for now, and revisit it once we extend the application.

Accept : application/vnd.github.v3+json

Now click on run to evaluate the response to make sure this is working fine. Once this is done, this is what your API page will look like.

Image Two.png

Awesome, let's bind the API into our table.

Binding data to our Table

In the table widget, click on the settings icon, and in the table data field, we remove the sample data and instead fill in:

{{ Fetch_Starred_Users.data }}
Appsmith uses moustache to process Javascript, and thus in any input, content in between the {{ }} is evaluated as a Javascript. The table widget expects an Array of objects as its input, and automatically displays it.

We can immediately see the table populate. Appsmith interprets changes in real-time and reflects the state, making it much simpler to build the apps.

We now have a table that displays a list of users who have starred our repo. But as you might have noticed, there's a lot of unnecessary information in the response for our viewer. We'll transform this data so we just see the username of the user.

Transform Github Results to Display Login Details

We can use native JS to transform data in Appsmith. In this case, we will use the map function to remove unnecessary data that is returned, and only display users and their logins.

In the same table, we change the earlier moustache content to:

{{
    Fetch_Starred_Users.data.map((row) => {
      return { UserName: row.login };
    });
}}

We can see how that instantly changes the display here. We can also extend this and display what you'd like to display relevant in your app.

And that's it! We now have a view that calls an API and displays relevant data to users. But how do we go from here and display user data? We'll do that in the next section.

Going from View to App

Right now, our application doesn't have anything but the placeholders to show basic profile data. We're missing multiple things:

  1. No API to fetch profile details
  2. Connect table click to profile details
  3. Display profile details after API runs
  4. Paginate the API and get the full list of user profiles

Now, let's fix them starting with setting up profile API.

Setting up the Profile API

Github offers a very seamless way to access user profile details through their API. From their API resources:

https://api.github.com/users/{{"Username of User"}}

The {{Username of User}} is a variable that we need to share with GitHub to respond with the right response. We can do that in Appsmith by using Moustache and passing it as a parameter to the API.

Let's create a new API called Github_User and in the URL we have a GET request with the following parameters. Appsmith offers an intuitive selectedRow method for us to pull relevant data from the view.

https://api.github.com/users/{{Starred_Users.selectedRow.UserName}}

Our API should look like this after clicking on run.

Image Three.png

Now with the API in place, we need to modify the view to show the data that the API returns. But before we work on the view, we need to make sure that the API is called whenever somebody clicks on a table-row.

Appsmith has an inbuilt property that does just that. In the Table widget settings, update the onRowSelected field to run the Github_User API.

Image Four.png

To update text in the user profile text boxes we'd created before, change the placeholder text from User Name to:

https://api.github.com/users/{{Starred_Users.selectedRow.UserName}}

Repeat that for the rest of the fields and we'll have something that looks like this:

Image Five.png

Now we're able to click on a row essentially, and we'll immediately see the profile basics of the person who has starred our repo.

The Github API responds with only 100 profiles, and we'll have to paginate the rest and request this data each time. Appsmith lets us do that smoothly.

Paginating Github Response to Pull Profiles

To start paginating, we must enable server-side pagination on our Table. This will help us programmatically call the pages to Github and get more responses.

Image Six.png

With this enabled in the Fetch_Starred_Users API, we'll need to pass the page parameter, as described in the Docs.

In the API screen, we add the page parameter to the request:

page : {{Starred_Users.pageNo}}

The final API page should look like this:

Image Seven.png

Now we go to the app and check if our pagination is working, and that's it! We now have a full-fledged application that pulls data from Github and helps us see who and where the users who have starred our repo are from.

Lastly, let's add an API that fetches the count of Github Stars for the repo, for this let's create a new API and name it as Start_Count. Add the following URL in the input box:

https://api.github.com/repos/appsmithorg/appsmith

This URL will have the attribute stargazers_count from which we can get the count of the total number of stars on the Github repo. Now let's bind this variable on the text widget on our Page. Below is the screenshot:

Image Eight.png

Wrapping Up

Deploy your application on the cloud and share it with others, and that's it. We're done!

If you are more adventurous, you can extend the app to set parameters on how many users you want per query and have an input form that helps you dynamically check and explore user profiles of starred users on any repository.

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.

If you have any questions or feedback, join our discord, or write to akshay@appsmith.com

Cover Photo Credits: Photo by Markus Spiske on Unsplash

Build an Investor CRM with Google Sheets
11
May
2021
Tutorial

Build an Investor CRM with Google Sheets

Build an Investor CRM with Google Sheets
Vihar Kurama
0
 minutes ↗
#
open-source
#
javascript
#
crm
#
Google-sheets
Tutorial

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:

App Preview.png
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:

Modal Form Add Investor.png

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:

Preview #3.png

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:

Preview #4.png

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.

CRM Fetch Investor Details.png

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

Building a Discount Management Dashboard With Postgres
12
May
2021
Tutorial

Building a Discount Management Dashboard With Postgres

Building a Discount Management Dashboard With Postgres
Confidence Okoghenun
0
 minutes ↗
#
postgresql
#
javascript
#
dashboard
#
open-source
Tutorial


Businesses love loyalty programs. Loyalty programs are a proven and effective way to keep customers coming back to your business. The most simple loyalty program is offering discounts to your top quartile customers, so they keep coming back and get the best prices.

But if you're a small yet digitally savvy business, how do you set up and manage such a program to drive customer loyalty?

In this article, we will be building an admin dashboard to manage giving out discounts to loyal customers. Discounts will be assigned to customers based on their purchase history and will be available for use on their next purchase.

Completed Dashboard GIF

In this dashboard, we'll have a list of customers from where we can choose a customer we want to give a discount. On selecting a customer from the list, we can see all orders that have been made by that customer. We would also have a form that would allow us to give a percentage discount to the customer based on the total amount spent in the store by the user and set an expiration date for the discount.

You can check out the completed dashboard here 👈.

By the end of this article, you’d have learned how to build a Postgres admin panel using Appsmith. We’re going to cover core concepts such as

  • Connecting to the Postgres DB
  • Writing queries to perform CRUD operations on the database
  • Binding query data to widgets
  • Writing Javascript in Appsmith
  • Sharing your application and managing permissions

Now you’ve got a good overview of what we’re going to be building, so let’s get started!

Creating the Application

As I mentioned earlier, we’re going to be building the discount management dashboard using Appsmith. Appsmith is an open-source platform that lets you create powerful apps/dashboards/tools quickly using a simple drag and drop interface.

Head over to appsmith.com and sign in. We’re going to be creating a new application, so click on the create new button. Please do well to give this app a creative name. The best I could come up with is Discount Dashboard.

Connecting to Postgres

The bread and butter of Appsmith is that we can connect to various sources of data by using APIs or talking directly to the database. We’re going to be connecting the application directly to our Postgres database, eliminating the need for a middle-man API.

To connect to the database, click on the + icon to the right of DB Queries then + New Datasource and select PostgreSQL. On the next page give the datasource a name and fill in the connection details.

screenshot showing the database connection form
A little side note here: This application was built using the mock Postgres DB connected to every application by default. Please feel free to use this if you do not have a database of your own

Querying the Database

Since the application has been connected to the database, we can write queries to fetch data. The first query we’ll be writing would be to fetch users from the database.

Click on the + New Query button close to the datasource card to create a new query. Go ahead and give this query a name, let’s call it get_customers and it should be a select query:

SELECT * FROM public."users";

Clicking on the Run button will fetch us a table containing all customers we have on our database. Now we build a list from which we can choose a customer using the data returned from this query.

Binding data to widgets

We need to create a list of customers. Each item on the list will display relevant information about the customer such as the customers’ name, email, and picture. We’ll be using the brand new List widget to make this happen.

Head over to the widgets section, click on the + icon, and drag a list widget into the canvas. In the property pane of the list widget, rename the widget from List1 to customers_list. In the items section, delete the dummy data that was prefilled and bind in data from the get_customers query by referencing it using mustache template syntax shown below:

{{get_customers.data}}

Now we’ve connected the data from the customers’ query into the List widget. All we need to do is to use that data. To do so, we can reference the currentItem object within other widgets in the list item and use its data to build up the list item. Here’s a gif illustrating how to do it.

gif showing how to bind data to widgets within the list item

Awesome! We now have a list showing all customers.

Triggering Actions

Continuing with the requirement for the application, we’ll want to see a list of orders for the customer clicked on from the list. To do this we’ll need to run an action whenever an item is clicked on the list.

Under the actions section of the List widgets’ property pane, let’s go and add an action for the onListItemClick event. From the dropdown list, select Execute a DB Query and click on + Create Query.

The new query we’ll be creating will be fetching all orders made by the customer. So call this query get_orders and set the query to:

SELECT * FROM public."orders" WHERE "userId" = {{customers_list.selectedItem.id}};

Or we can write a slightly more complicated query that gets the product name for each order from the products table using the orderProductMap table:

SELECT o.*, p.* FROM public."orders" o
    left join "orderProductMap" op on o.id = op."orderId"
    left join products p on op."productId" = p.id
WHERE o."userId" = {{customers_list.selectedItem.id}};

Clicking on the run button will get the orders for the customer selected from the List widget. Now going back to the onListItemClick event, when the get_orders query is successful, we want to execute another database query to get discounts that have been given to the customer.

Go ahead and set up the query to get the customers’ discount. Your query should look like this:

SELECT * FROM public."discounts" WHERE "userId" = {{customers_list.selectedItem.id}};
image showing the actions section of the list widget property pane

Visualizing Data

At this point, we have a list of all customers, and clicking on a customer gets all orders made by that customer as well as the customers’ discount. It will be nice if we can neatly display the orders made by the customer.

We can neatly display the orders using a Table widget. Like we did with the List widget, go on and drag a Table widget into the canvas. You’ll also need to bind the data from the get_orders query into it and give it a nice name i.e orders_table. Your binding should look like this:

{{get_orders.data}}

Also, you can hide some columns from the Table widget so that we only have the relevant ones showing.

image showing data binding and column configuration for the Table widget

We also need to display the discount amount and expiration time from the get_discount query. A couple of Text widgets will be sufficient for this. I’ll leave you to figure it out but here’s my solution:

image showing discount amount and expiration display

Writing JavaScript in Appsmith

Finishing up with the dashboards’ requirement, we’ll need a form that will allow us to give a percentage discount to a customer based on the total amount they’ve spent on the store. We will also be able to set an expiration date for this discount.

To build this form, we’ll need a few new widgets. We will be making use of a Dropdown, Input, and Datepicker widget. We’ll also need a Button widget to submit the form and a Text widget to label the Datepicker widget.

I have mine arranged as shown below.

image showing discount form configuration

Alright, let’s move on to configuring the form.

To configure the Dropdown widget, give it a new i.e discount_dd and supply the JSON array shown below as its Options:

[
  {
    "label": "Clear Discount",
    "value": "0"
  },
  {
    "label": "10% Discount",
    "value": "10"
  },
  {
    "label": "20% Discount",
    "value": "20"
  },
  {
    "label": "30% Discount",
    "value": "30"
  },
  {
    "label": "40% Discount",
    "value": "40"
  },
  {
    "label": "50% Discount",
    "value": "50"
  }
]

The Input widget is where the magic happens. In this widget, we’ll need to sum all the amounts from the get_orders query and apply a discount based on the percentage selected in the Dropdown widget.

To do this we need to write multiline Js and this can be done with an IIFY(Immediately Invoked Function Expression). Set the Default Text of the input widget to:

{
{
  function(){
    const totalAmount = get_orders.data.reduce((acc, order) => (acc + order.orderAmount),0);
    return totalAmount * discount_dd.selectedOptionValue/100;
  }();
}
}

Thus, the value of this widget will be the calculated discount. It’s a good idea to make the Input widget disabled to prevent manually updating its value. Give this widget a name i.e calc_discount. Also, the Datepicker widget should be named expire_dp.

All we have to do now is to write a query that will save the discount when the Button widget is clicked on. To do this create a new query called save_discount having the below body:

INSERT INTO public."discounts" ("userId", "amount", "expiresAt")
VALUES ({{customers_list.selectedItem.id}}, {{calc_discount.text}}, '{{expire_dp.selectedDate}}')
ON CONFLICT ("userId") 
DO 
  UPDATE SET "amount" = {{calc_discount.text}}, "expiresAt" = '{{expire_dp.selectedDate}}'

The above query will insert or update the discount of the selected customer.

Lastly, we’ll need to run this query when the Button widget is clicked on. We’ll also need to re-fetch the get_discount query and show a message on the UI to let the admin know that the discount has been successfully applied.

To do this enable JavaScript on the onClick action of the Button widget by clicking on the JS button close to it. Then set its content to the code below:

{
{
  save_discount.run(() => {
    get_discount.run();
    showAlert('Discount Applied!','success');
  })
}
}

That’s it! We have a fully working discount management dashboard!

Sharing the application

Sharing the dashboard we just built is an easy thing to do on Appsmith. You can easily hand off the application to the management team or invite developers to work with you by using the share feature.

Click on the SHARE button at the top right of the page and you’ll be presented with a dialog to invite users to the app and set their roles or permissions.

And lastly, you can publish all changes we made to the application by clicking on the DEPLOY button. Sweet!

Wrapping off

That’s a wrap! If you found this article helpful, please do leave a Like ❤️. Feel free to share any concerns or questions you may have in the comments section. Also, we’d love you to check out our Github page here https://github.com/appsmithorg/appsmith.

Credits: Photo by Karolina Grabowska from Pexels

Using the Notion API to Build a Content Management System
21
May
2021
Tutorial

Using the Notion API to Build a Content Management System

Using the Notion API to Build a Content Management System
Vihar Kurama
0
 minutes ↗
#
apis
#
databases
#
ui
#
applications
#
open-source
Tutorial

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:

Notion App Screenshot.png
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.
Image One.png
  • 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!
Image Two.png
Image Three.png
  • 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:

Image Four.png
  • 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:

Image Five.png

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:

Image Six.png

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:

Notion App Screenshot.png

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:
Image Eight.png

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:

Image Nine.png

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.

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
1
June
2021
Product

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
Rishabh Kaul
0
 minutes ↗
#
open-source
#
github
#
community
#
general-advice
Product

It’s been only about 9 months since Appsmith became a GitHub project. Since then we’ve amassed about 4500 stars, which is a simple way for GitHub users to bookmark repositories that interest them. We’ve been very curious to learn more about these people. Who are they? What are they like? Are there things we could do to accelerate awareness and interest?

I recently came across this incredible post from Spencer Kimball (CEO, CockroachDB) based on the code that he wrote many year back and thought of running it over our Stargazers to learn more.

Why did we do this?

As a project which took an open source turn, we’ve been building in public. Most of our team members are going out and answering questions on Discord, Github, Reddit, Hacker News and Twitter. A lot of what we achieve is going to be determined by the community that we build. We like to think of stars as bookmarks and while we’re thrilled at our star growth, we also know that it’s often just one of the many indicators we’d like to consider when learning about how we’re being known in the wider technology ecosystem. The ultimate joy is going to be to see people build and use our product and there’s no replacement for that and the team is burning the midnight oil to gather feedback, observe usage and be there to help in any way we can.

That being said, given that Spencer did most of the heavy lifting, we were curious to learn more about our Stargazers and see if there’s something we could pick up from this analysis.

How did we get here?

As a project that hasn’t particularly invested in paid marketing, a lot of our outreach has been primarily through engaging with our community and writing content.

Content also has a compounding effect: we can repurpose it, we can start a thread on a new discussion board or link it back to twitter. By going through our cumulative growth in stars over the last 9 months and checking if that overlapped in any major releases or news items gave us a sense of what might have contributed to it.

Content & Community Matters, with a little help from luck.png

In our case, our first major content post which drove traffic was when Arpit (our CTO) wrote about Appsmith (on Hashnode & Dev.to).

Trending on Github gave us an initial bump, however the credit for this goes to the early community that was nurtured which allowed us to trend in the first place.

A big part of our steady growth honestly was just via our team being extremely active on public forums. This Reddit post got us a lot of traffic. As did our showcase on Hacker News . We were also featured in The Hindu (a major newspaper in India). And then sometime in April, something interesting happened, we got a couple of mentions from the community in China and Korea and that led to a lot of users from these places, which in turn led us getting mentioned in RunaCap’s list of most popular Github Projects in Q1 of 2021, as well as constantly trending on niche categories of Github.

In the meantime, we’re continuously coming up with a lot of listicles around low code platforms like this , this or this . None of these by themselves are needle moving, but together they all add up and it helps that this category is gaining traction.

Needless to say, we intend to continue to invest heavily in content, from tutorials to showcasing how our community is using Appsmith to other learnings around building software and teams.

Where are our Stargazers coming from?

In total, our Stargazers are from over a 100 countries. This data however isn’t complete since getting the exact location from a Github profile often becomes tricky. Why? For starters, only 60% of our Stargazers mentioned a location. Within these, folks have mentioned multiple locations, misspelled names or mentioned places like Mars ;)

However, from an indicative perspective, these are the top 25 countries.

Users who star_ We are one world.png

For our team at Appsmith, at the very least, it means having a global outlook towards our community, as well as keeping a lookout on certain geographies, where we might see Appsmith suddenly gain traction.

What else are our Stargazers checking out?

Starring on Github is super easy and people can go trigger happy with it. Still, analyzing the other repositories our Stargazers star gives us a directional sense of their interests. Our Stargazers starred a total of 247K repos. Of these, 222K repos had < 5 stars, which sorta points towards a power law that we’ve come to expect from social networks.

Here are the top 20 repositories

Screenshot 2021-05-30 at 8.31.26 AM.png

Our users love dev tools which should come as no surprise. Some common themes that are noticeable here: Tools that make it easy to create UI, tools that help automate workflows and tools that help on the database side of things. And since Appsmith is highly relevant to users trying to accomplish each of these things, it makes sense that these end up becoming the most correlated repos.

How much do our Stargazers contribute to open source projects?

29.1% (1310) of our Stargazers have made atleast 1 commit to a repository. repository. In total, our Stargazers made about 379K commits, of which the top 10 contributed 127K commits (or 33.5%). Spencer was kind enough to include some base criterion in his code to make the numbers palatable: only repositories with > 25 stars or 10 forks, or 10 open issues were included. This puts the average number of commits at 289 with a median number of commits at 46.

The top 20 active Stargazers had these impressive stats

Screenshot 2021-06-01 at 5.57.41 AM.png

A Networked Platform

Do our Stargazers follow each other? If so, to what extent. To make the data meaningful, we decided to go with only those Stargazers that had atleast 10 followers. This gave us a dataset of 2214 (~49%) Stargazers. Plotting the distribution bases % of shared followers, we see that for 62% of our Stargazers, there was an overlap of atleast 40% of their followers with other Stargazers of the Appsmith repo. Talk about a networked platform! And since we get followers from many countries, we can be reasonably certain that such a networked effect isn’t restricted to one or two locations.

Distribution of Shared Followers with Appsmith's Stargazers.png

Attributes of our new Stargazers

One additional thing that Spencer included in his code was to look at the follower and commit activity of Appsmith’s incoming Stargazers. Honestly, we’re not quite sure of what to make of this data except that there’s a positive (albeit weak) correlation between average follower count and average commits on Github.

Average Followers & Commits for new Appsmith stargazers.png

Why not try it yourself?

Go ahead and use the Stargazers repo yourself to analyze yours (or anyone else’s) repo’s trends. Depending upon the number of Stargazers you have, it can take some time. It took us about 7-8 hours (with a 5K/Hr rate limit).

And incase you're fed up of spending months building internal tools, dashboards, admin panels and what not or are just curious about why these 4500+ folks starred Appsmith, do check it out here !

Build a CMS for Your Company in Under an Hour
1
June
2021
Tutorial

Build a CMS for Your Company in Under an Hour

Build a CMS for Your Company in Under an Hour
Vihar Kurama
0
 minutes ↗
#
cms
#
css
#
html5
#
open-source
#
javascript
Tutorial

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.

The create_article_form

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 }};
The all_articles_page

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

  1. Add a Text widget for the title and set the value of Text to {{get_article.data[0].title}}.
  2. Add another Text widget for the subtitle and set the value of Text to {{get_article.data[0].subtitle}}.
  3. Add an Image widget for the cover image and set the value of Image to {{get_article.data[0].image}}.
  4. Add a Text widget for the article content and set the value of Text to {{get_article.data[0].content}}.
  5. Add a Text widget for the article’s author and set the value of Text to Written By {{get_article.data[0].author}}
  6. 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.
The view_article_page

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.

The new Edit button

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.

The edit_article_form

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.

The Authors table

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.

Screenshot of the view_article_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.

The Tags table

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.

The create_tag_page

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
9
June
2021
Tutorial

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
0
 minutes ↗
#
apis
#
open-source
#
growth-1
#
startups
#
javascript
Tutorial

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:

CleanShot 2021-06-09 at 01.58.51.jpeg

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:

CleanShot 2021-06-09 at 02.07.57.jpeg

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:

CleanShot 2021-06-09 at 02.22.04.jpeg

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

Launching Betasmith: The Appsmith Beta Community
11
June
2021
Announcement

Launching Betasmith: The Appsmith Beta Community

Launching Betasmith: The Appsmith Beta Community
Rishabh Kaul
0
 minutes ↗
#
open-source
#
community
Announcement

We’re thrilled to launch Betasmith: The Appsmith Beta Community .

Since our inception, we’ve relied on the community to help us decide what to build. With Betasmith, we want to involve our users even more deeply in our product development process.

Do you want to have a say on the future of Appsmith? Do you like the idea of sharing ideas to help shape the future of the product? Or maybe even be the first to test out our new features?

Well, we’d love to hear from you.

What's more you'll gain access to our previews and be able to take part in private interviews and other treats along the way. You can be a part of our Beta Community from anywhere in the world.

What can you do as a community member?

💬 Give feedback on early design concepts and prototypes. Sit back and be the judge of the future.

✏️ Participate in research sessions and workshops. Chat directly with our talented designers

🤐 Get early access to new feature previews and demos Who doesn't love being the first to get a new toy?

Ready to sign up? We can’t wait for you to help shape the future of Appsmith. ‍ Sign up here

Building an Internal Leave Management Dashboard using Google Sheets
17
June
2021
Tutorial

Building an Internal Leave Management Dashboard using Google Sheets

Building an Internal Leave Management Dashboard using Google Sheets
Vihar Kurama
0
 minutes ↗
#
startups
#
open-source
#
javascript
#
applications
#
web-development
Tutorial

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:

CleanShot 2021-06-17 at 20.48.03@2x.png

Follow the below steps to list down all our leave requests:

  1. 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).
  2. 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:

  1. 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!
  2. Next, add another text and input widget to add a Leave Note and rename the input widget to leaveNote.
  3. 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.
  4. 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}}

  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:

  1. Click on the Leave Management Data Source and hit NEW API.
  2. Rename the API as requestLeave and copy-paste the Google Sheets URL you're working on.
  3. 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:

  1. First, call the requestLeave API and submit the form.
  2. Run's the getLeavesRequested API and updates the data in the Table.
  3. Closes the leaveApplyModal Modal
  4. 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:

  1. Create a new Page by clicking on the + icon next to the pages option in the side navigation. Name it as Leave Manager Admin
  2. Now drag and drop a new Table widget onto the canvas.
  3. Now copy the getLeavesRequested from Page1 to the Leave Manager Admin page.
  4. 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:

  1. 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.
  2. Similarly, add one more column and set the label to Reject.
  3. 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.
  4. 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.
  5. 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.
  6. Set the Sheet Name as Leave Requests and Table Heading Row Index as 1
  7. 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:

  1. Now head back to Page1 and drag and drop a new List Widget onto the canvas.
  2. 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.
  3. 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:

CleanShot 2021-06-17 at 08.51.41@2x.png

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:

CleanShot 2021-06-17 at 20.59.19@2x.png

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
28
June
2021
Announcement

Announcing the Import-Export Feature for Appsmith Applications

Announcing the Import-Export Feature for Appsmith Applications
Vihar Kurama
0
 minutes ↗
#
features
#
engineering
#
open-source
#
javascript
Announcement

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.

CleanShot 2021-06-25 at 01.28.11@2x.png
CleanShot 2021-06-25 at 01.25.51@2x.png
CleanShot 2021-06-25 at 01.30.57@2x.png

And then, we’ve created a feature request on GitHub!

CleanShot 2021-06-25 at 11.31.48@2x.png

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.

CleanShot 2021-06-28 at 08.16.28@2x.png

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
29
July
2021
Announcement

Introducing the All-new SnowflakeDB Integration on Appsmith

Introducing the All-new SnowflakeDB Integration on Appsmith
Vihar Kurama
0
 minutes ↗
#
open-source
#
community
#
databases
#
ui
Announcement

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.

CleanShot 2021-06-29 at 07.13.15@2x.png

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?

CleanShot 2021-06-29 at 05.43.57@2x.png

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

CleanShot 2021-06-29 at 06.50.21@2x.png

Step #2 Add connection details for SnowflakeDB and save a data source

CleanShot 2021-06-29 at 06.51.44@2x.png

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 Our Community while Building in Public: Learnings at Appsmith
6
July
2021
Product

Building Our Community while Building in Public: Learnings at Appsmith

Building Our Community while Building in Public: Learnings at Appsmith
Akshay Rangasai
0
 minutes ↗
#
community
#
open-source
#
marketing
#
leadership
Product

User engagement is a catch-all phrase the internet uses for well...engaging with your users. But like all such phrases, it doesn’t mean much without context, especially for an open-source company like ours that builds software for developers.

At Appsmith, we’re evolving from a small project with great support on Discord to a company that is investing heavily in engaging its users. In this post, I’ll walk you through our key learnings over time, with a little bit about what our users had to say at each step of the journey.

  1. Distinguishing great support from engagement
  2. Personalizing interactions with users
  3. Discovery as a core function of engagement initiatives
  4. Using the product to drive engagement
  5. Segmenting users
  6. Seeding content in the initial days
  7. Tracking progress and engagement

Great support is just the first step

We started a Discord channel to brainstorm ideas and learn from our users. Back in January, our Discord was (and still is) active 24x7. We were helping users across time zones all day. Users loved the speed of our support. Support work has remained extremely important for us and @mohanarpit, our co-founder, makes it a point to give shout outs for support work on our internal slack.

CleanShot 2021-07-06 at 17.38.42@2x.png
CleanShot 2021-07-06 at 17.38.57@2x.png

Being available all the time for support was helpful, but we were not generating relevant content. Very rarely were users spending time discussing the product with us. We needed to do more to communicate with users around what we were doing, and had to find ways to show them that we cared about their inputs. While speaking to our users, we also learnt that they engaged with us to request features, report bugs, and plan for the future so they could continue using us. Asking for support was just one of the ways in which they could get their jobs done. Support is what gets users started with the community, but it doesn’t make them stay and get involved.

That’s when we started our newsletter and other content initiatives. In addition to our docs, Appsmith now has a wide variety of videos, tutorials and templates to get users started. We immediately saw an impact and a lot of new users loved us for it, and our non-support channels started getting more active on Discord!

Make it personal and experiment with what works

Almost simultaneously with the content initiatives, we started something we used to call “office hours”. Users could join us on Thursdays and ask questions and receive live support. Our first month was decent, but over time, fewer people joined, and most questions coming up were about future features and timelines. So, on one hand, this felt like a failure because we didn’t get the volume of activity we expected, but on the other hand, our entire team loved interacting with the users. It felt personal and we got the best feedback through these sessions. Some of these sessions also helped users decide whether Appsmith was offering them what they wanted in the near future. There was definitely a great value in having such an initiative.

CleanShot 2021-07-06 at 17.42.21@2x.png

First community call where 3 users showed up

So we furthered the initiative with Community Hours. With Intercom and Discord for near-instant support, we used the Community Hours to speak about our product roadmap, talk about releases and lift the hood around some engineering choices we made.

CleanShot 2021-07-06 at 17.43.50@2x.png

All the features voted for by the community, that we’re building right now (watch)

We had a long list of feature requests and these events helped us prioritize our features to what the community wanted. We also started streaming live demos so our users could see our new features in action while we built complex applications.

This showed us that not every initiative is a success, but if there is value in an initiative, it is worth looking at how we could get the same interactions through a different format. We were so focused on support that it took us time to realize our users were with us in this for the long haul.

Now, we have launched Betasmith to interact with users even more closely. You can join Betasmith here!

CleanShot 2021-07-06 at 17.45.23@2x.png

Discovery is important

It’s easy to ship content, but it is really hard to make it discoverable for people. It is even easier to set up a website or Discord channel, but even harder to get them to work for you.

The trick is to have easy ways to engage with your users and this sometimes means using multiple channels in tandem. We frequently inform all our users about our Discord channel in case they need support. Our intercom chat pops up a couple of times for new users helping them with tips, tutorials and asking them if they need help. Our entire onboarding email is set up to get users to succeed with Appsmith and engage with us meaningfully.

To really drive home engagement, we included an omnibar really early in the lifecycle of the product so people could find what they were looking for easily. Our content efforts were first focused on existing users vs initiatives for real growth. We focused on the problems our users were trying to solve on Appsmith and focused on it than content that was more friendly to new users on SEO. Tying back to our first point, the only reason we believe our content initiatives are successful is that we made them easy to access.

omnibar.gif

Omnibar to the rescue

Use your product

We want to be there for our users, especially while they’re using the product. To make it as non-intrusive as possible, we use Intercom for gentle nudges to help them, hear from them and figure out how to help them succeed. From our analysis, it is surprisingly effective in getting people the help they need and setting them up for success on Appsmith.

At the same time, it is important not to overuse the product for engagement and let our users use the product the way they want. It is easy to get carried away and use the real estate near the banner, navbar and other empty spaces to push for engagement (This is something we argue over every day), but it is important to understand that users don’t use the product to engage with us. Engagement is a great side effect of a good product.

Not all users are the same

This seems obvious but is hard to put into practice. Not all users want the same features or the level of support or the roadmap. Segmenting users here helps to figure out which channel is more effective to engage with them.

Our users include startup founders (who are super active on Appsmith) as well as CTOs of large companies (who use our product once in a while and don’t personally engage on the platform). We need different strokes for different folks. For example, support requests work great on discord for founders and engineers, but might not be the most optimal channel for CTOs of larger companies.

Discord was great for instant support, but it was a nightmare for users during peak hours. Repeated questions, examples and JavaScript snippets were clogging the pipeline. Before we officially launched community.appsmith.com, users had already found the website and started asking questions. We quickly realised that our users were seeking a place where they could search for pre-existing queries or have their queries answered without the hassle of Discord. This also signalled a preference for more elaborate answers to questions about the direction of our project.

We’re still in the process of getting our forums to be as active as our community, and I think we will get there fairly soon, simply because of users’ preferences in where and how they want to engage with us.

CleanShot 2021-07-06 at 18.01.47@2x.png

Seed common spaces!

The one thing I believe we definitely did right from the beginning, was seeding our forums and Discord community with content. When our users saw that there was activity, they were happier to post, argue and discuss with us across a variety of channels.

But what really helped us do this easily was that we decided that as contributors to Appsmith, we were essentially the group that set the bar on community interactions and formed the core part of the community. We operated as members of the community first, and used Appsmith to create our own internal apps, and posted questions that came up naturally in that process.

CleanShot 2021-07-06 at 18.03.14@2x.png

From a user on our forums

Track your progress:

While this is not something you do directly for the community, as a project, it is very important to see where you and the community see returns in the efforts. At Appsmith, we use GitHub for issues, discourse forums, Reddit, Discord, email and intercom as channels to engage with users, and it is really complicated to see if our initiatives are working long term, without measuring retention and engagement for the community.

Luckily, we found orbit, a product-focused on community engagement that helps us figure out how users are interacting with various touchpoints in the community and the engagement of our users. We can now keep track of important metrics like messages on Discord and posts on discourse along with the number of returning members, and tie it with product metrics to improve user experience and engagement.

CleanShot 2021-07-06 at 18.03.55@2x.png

Orbit Dashboard for Appsmith

CleanShot 2021-07-06 at 18.04.48@2x.png

Tracking messages on Discord to measure the engagement

Some things to keep in mind:

While these ideas have worked for us at Appsmith, by no means will it work for everybody across the board. Also, one obvious engagement tool I haven’t touched upon in this article is email. Email is how most engagement starts, and there is tonnes of content about using email and making engagement effective online. The other problem with email, is there is a fine line between engagement and spam and thus we use email judiciously with a cap of one email a week and not more. We’re always thinking about how we can cut down the email we send our users and engage with them without spamming their inboxes.

But in the spirit of ticking all the boxes, you can check out our live demo on how we email users who are churning out. As we have scaled, we have also used Appsmith to build a ton of our internal engagement tools, to great effect.

This article provides an overview of the initiatives we’ve undertaken at appsmith to drive user engagement and build a community. We hope some of these initiatives will be useful for your context. Do let us know what you think!

Embed Anything! Introducing the New iFrame Widget
19
July
2021
Announcement

Embed Anything! Introducing the New iFrame Widget

Embed Anything! Introducing the New iFrame Widget
Vihar Kurama
0
 minutes ↗
#
open-source
#
community
#
ui
#
javascript
Announcement

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.

Iframe Issue.png

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!
Iframe Peek.png

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.

Up.png

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
20
July
2021
Tutorial

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
0
 minutes ↗
#
open-source
#
marketing
#
social-media
#
automation
#
javascript
Tutorial

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:

  1. Click on Create New under your organization, and this will create a new Appsmith application.
  2. Rename the application to Social Broadcaster by simply double-clicking on the existing one.
  3. 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.

  1. 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.
  2. Resize this container widget based on our UI preferences. Next, find the Text widget and drop it inside the Container widget.
  3. 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.
  4. To write the post content, let’s use a Rich Text Editor Widget. Drag and drop it inside the Container Widget.
  5. 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.
  6. 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:

CleanShot 2021-07-06 at 03.59.26@2x.png

Now, let’s create a workflow that’ll broadcast messages onto different social platforms. Follow these steps:

  1. 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.
  2. 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.
  3. 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:

CleanShot 2021-07-20 at 17.07.39@2x.png

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
21
July
2021
Tutorial

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

Self-host Appsmith in Just a Few Minutes on Digital Ocean
Vihar Kurama
0
 minutes ↗
#
open-source
#
digitalocean
#
javascript
#
deployment
Tutorial

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.

CleanShot 2021-07-21 at 13.25.34@2x.png

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.

CleanShot 2021-07-21 at 13.35.19@2x.png

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!

#open-source

Build a GitHub Dashboard and Track Any Open Source Project
10
August
2021

Build a GitHub Dashboard and Track Any Open Source Project

Build a GitHub Dashboard and Track Any Open Source Project
Vishnupriya Bhandaram
0
 minutes ↗
#
github
#
open-source
#
app-development
#
ui
#
javascript

Did you know that Appsmith is a fully remote distributed organization? We have colleagues in 5 countries! This makes total sense for us as an open-source platform with contributors from over 100 countries (take a look at our activity on Github). It’s also why we think of ourselves as learners; we read, talk to people, and love feedback. And in that spirit, every new team member makes an app on Appsmith in their first week upon joining us! And there is only one rule, that there are no rules! These apps range from functional to fun to downright silly!

This week, we’re featuring our colleague, Favour Ohanekwu’s app. Favour is a front-end engineer from Ibadan in Nigeria. Over the years, he has been actively involved in building web applications across several industries ranging from health, agriculture, and IoT. You can follow his work here.

First steps

Favour toyed around with a few ideas before landing on a final app idea. Some of these app ideas were:

  • An application that allows employees to review their team members and view reviews about them from their fellow team members.
  • An application that shows the current availability status of each employee at any time of the day. On this application, employees will be able to set their status (Active, Busy, Away) and be able to see the current working status of other team members.
  • A dashboard that reports the company's GitHub repositories and compares them in terms of several metrics.

Favour chose to work on the third idea to build a Github Dashboard to view and track several projects, using Github’s REST API.

Click here to see the app!

We’ll outline the steps involved in making this app, and you’ll see how easy it is to build this application in few simple steps using Appsmith!

Getting Started

This short tutorial uses the cloud version of Appsmith. However, you can always export and import Appsmith apps to different environments (cloud, self-hosted, local). The recommended way to use Appsmith is to use Docker; follow the documentation here for detailed instructions if you want to build locally.

  1. Create a new account or sign in with an existing account, redirecting it to our dashboard.
  2. Click on Create New under your organization, and this will create a new Appsmith application.
  3. Rename the application to GitHub Organisation Dashboard (or any name you’d like) by simply double-clicking on the existing one.
  4. On the left, find the entity explorer; this is where you can manage all the widgets and data sources of the entire application.

Now you can build a simple UI with Appsmith widgets to build the dashboard and display all metrics crucial to your project!

Fetching Data from Github Organisation

Now that you’ve configured the app, you will need to configure a data source that will fetch all the repos from a Github organization. To do this, follow the steps below:

  • Click on the + icon next to the Widgets, find the input widget, and drag and drop it on canvas. The idea is to enter the organization name and dynamically fetch all the repos created under that organization.
  • Next, click on the + icon next to Data Sources, and create a new API as a data source. Rename the API as get_organization_repos and paste the following in the URL:
https://api.github.com/orgs/{{Input1.text}}/repos
  • Here as you can see, we’re dynamically passing the organization name to the GitHub API from the input widget.
  • Go back to the canvas, and drag and drop a new Select widget; now paste the following snippet to pollute the options with repos in the select widget from the API.
    {{
    get_organization_repos.data.map((repo)=>     ({
        "label":repo.name,
        "value": repo.name
    }))
    }}
  • Drag and drop a new button widget and set the onClick action to Execute a Query and select the get_organization_repos
  • With this, whenever you enter a new organization name, the select widget automatically populates it with all the repos from that organization.

Additionally, you can drag text widgets and add some context regarding the same for the dashboard. Here’s how it looks:

Screenshot 2021-08-10 at 11.10.52 PM.png

Fhere

Fetching Data and Events of a Particular Repository

Displaying Core Metrics

Now that the repositories are listed on the application, you can fetch the data of a single repository and display all the crucial information such as network count, forks, subscribers, and a few more.

  • Click on the + icon next to the Data Sources and add a new API and set the URL to the following:

https://api.github.com/repos/{{Input1.text}}/{{home_select_repo.selectedOptionValue
  • This URL will fetch the repo details; we’ll name it as get_organization_repo_details
  • Similarly, add one more API data source and name it as get_repo_events with the following URL:
https://api.github.com/repos/{{Input1.text}}/{{home_select_repo.selectedOptionValue}}/events
  • For both of these data sources, we send the repo name from the Select widget, which is named as home_select_repo, and the selectedOptionValue property will help access the selected option from it. You need to create a UI for displaying all the core repositories based on the selected option. For this, drag and drop a few text widgets onto the canvas, and set the Value property to the following:
TextWidget1 Value: {{get_organization_repo_details.data.network_count}}
TextWidget2 Value: {{get_organization_repo_details.data.forks_count}}
TextWidget3 Value: {{Get_organization_repo_details.data.subscribers_count || "-"}}
TextWidget4 Value: {{Get_organization_repo_details.data.open_issues_count }}
TextWidget5 Value: {{Get_organization_repo_details.data.watchers_count}}

Additionally, you can add more text widgets and a container widget to organize this more beautifully.

Here’s how Favour did it:

Screenshot 2021-08-10 at 11.11.47 PM.png

Displaying Repository Events

In this section, you can display a table widget to show all the events for a repository. In this way, you can monitor who is creating pull requests, pushing new changes, etc.

Follow the steps below to do this:

  • Drag and drop a new table widget onto the canvas.
  • Open the property pane of the table widget, and set the following in the Table Data property.
{{
        get_repo_events.data.map(event => ({
            "Date": moment(event.created_at).format("LLL"),
            "Type": event.type.match(/[A-Z][a-z]+/g).join(" "),
            "Actor": event.actor.login,
            "Avatar": event.actor.avatar_url,
            "View": event.actor.url
        }))
   }}

With this code snippet, you can display all the data from the get_repo_events API and bind it on the table widget. Following is how the output looks like:

Screenshot 2021-08-10 at 11.13.25 PM.png

Displaying Statistics

Last, you can add a couple of charts that will help you visualize the number of repository forks and the number of watchers for the repository by following the below steps:

  • Drag and drop a chart widget onto the canvas.
  • Set the title to Number of Repository Forks
  • Choose the Pie Chart under the Chart Type property.
  • Now create a new series and set the title as Repository Forks and add the following under `Series Data
{{
Get_organization_repos.data.map(repo=>({
  "x": repo.name,
  "y": repo.watchers
}))
}}
  • Similarly, add more chart widgets, set the chart type to Bar Chart, and set the Series Data to the following:
{{
Get_organization_repos.data.map(repo=>({
  "x": repo.name,
  "y": repo.watchers
}))

Following is a screenshot:

Screenshot 2021-08-10 at 11.14.50 PM.png

Now, wasn’t that easy to do with Appsmith?

Have you made something using Appsmith? Write to me (vishnupriya@appsmith.com), and I would love to feature you on our blog!

If you’re interested in building an app on Appsmith, sign up today. We have docs, and tutorials and live help, and a vibrant discord community to help you along the way. So go ahead, put your ideas out there!

Do you want to join Appsmith? We’ve got a bunch of openings; take a look here and apply!

Don’t forget to join our community and sign up for live events.

Appsmith Round-Up: Three New Widgets, Slash Commands, and Improved Navigation
18
August
2021
Monthly Round-up

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

Appsmith Round-Up: Three New Widgets, Slash Commands, and Improved Navigation
Vihar Kurama
0
 minutes ↗
#
community
#
open-source
#
javascript
#
app-development
Monthly Round-up

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!
26
August
2021
Announcement

Generate a CRUD App from Any Database with One Click!

Generate a CRUD App from Any Database with One Click!
Vihar Kurama
0
 minutes ↗
#
crud
#
databases
#
ui
#
open-source
#
javascript
Announcement

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.

UI.png

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:

  1. If you’re an existing user sign in to your account or you can sign-up here for free.
  2. 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.
  3. 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.
  4. 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.
  5. Next, under the active data sources click on the GENERATE NEW PAGE option.

You’ll see the following options:

Options.png

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.

Build Tools for Your Fitness Start-up
27
August
2021
Tutorial

Build Tools for Your Fitness Start-up

Build Tools for Your Fitness Start-up
Vishnupriya Bhandaram
0
 minutes ↗
#
open-source
#
developer
#
development
#
developer-tools
Tutorial

This week, we’re back to feature apps made by Appsmith’s newest team members! Each new team member has to make an app on Appsmith as part of the hazing welcoming ritual! 😬 We’re a fully remote distributed organization with colleagues in more than five countries, and this is a fun and educational way of onboarding new members onto the team. And of course, it makes sense for people working on making Appsmith better to use it, understand it, and know the framework’s shortcomings. These apps made during the onboarding process can range from functional to fun or straight-up silly!

This week, we’re featuring our colleague Ashit Rath’s app. Ashit is a Sr. Frontend Engineer from Bhubaneswar in India. He has experience in building scalable web applications, and he loves to travel. You can follow his work here.

Ashit decided to make a simple food nutrition app to list items, and it would show you the nutrition details. Ashit’s recipe analyzer is an excellent example of the range of applications you can make on Appsmith.

During the app-making process, Ashit found the following things great about Appsmith:

  • Composing UI widgets was very intuitive
  • Adding API data source was super easy
  • Good performance overall

In the next part of the blog, Ashit has listed the steps to build the recipe analyzer.

Getting Started

This short tutorial uses the cloud version of Appsmith. However, you can always export and import Appsmith apps to different environments (cloud, self-hosted, local). The recommended way to use Appsmith is via Docker; follow the documentation here for detailed instructions if you want to build locally.

  • Create a new account or sign in with an existing account, redirecting it to our dashboard.
  • Click on Create New under your organization, and this will create a new Appsmith application.
  • Rename the application to GitHub Organisation Dashboard (or any name you’d like) by simply double-clicking on the existing one.
  • On the left, find the entity explorer; this is where you can manage all the widgets and data sources of the entire application.

There are three parts to building this Recipe Analyzer app:

  1. API for nutritional data
  2. Connecting the form to get the data from API
  3. Crunching numbers to show the nutrition

API for nutritional data

‍ The API that we have used here comes from Edamam. They have a robust API for any kind of food/recipe/ingredient level search.

Sign up for their Nutrition Analysis API as a Developer account to try out without a subscription. The Developer account might give out less information than it should, but it should be fine for our use case.

Once signed up, we need to generate the API key from here.

  1. Click the "Create New Application",
  2. Select "Nutrition Analysis API"
  3. Fill out the form and hit "Create Application"
  4. Once the application has been created; you would be greeted with the application API details page. Keep "Application Keys" and "Application ID" in place. We would need it in the next step.

Connecting the form to get the data from API

‍ We have the API key from the previous step, so now we will use that to make API calls to Edamam for our searches.

Now head over to Appsmith to create a data source.

  1. Create a new Datasource by clicking the + button on the sidebar.
  2. Click "Create new" for a new data source
  3. Click "Create new API"
  4. Change the API Name to nutrition_api, it would be "Api1" by default.
  5. Click on the "GET", a dropdown should open up and select "POST".
  6. Add the following to the URL bar; replace with the "Application ID" and with the "Application Keys" that we got from the previous step

https://api.edamam.com/api/nutrition-details?app_id=<application id>&app_key=<application key>

This should create our data source for fetching the nutrition data.

Let's create a new input and connect it to the data source to fetch.

  1. Add a new text widget and name it as FoodInput
  2. Resize the text widget according to need and add the following to the Placeholder property
1 cup rice

1/2 cup dal

100gm chicken
  1. Now add a new button widget; on clicking this, we need to trigger an API request (to the API we added in the previous section).
  2. Open the button widget properties and scroll down to Actions section; there would be an onClick property. Click the JS and a blank text box should open up
  3. Add the following lines to the text box opened in the previous step
{{

(function () {

        if (FoodInput.text.trim()) {

            const foodInputArray = FoodInput.text.split("\\n")

            storeValue('foodInputArray', foodInputArray)

            const onSuccess = () => {}

            const onFailure = (response) => {

                showAlert('Invalid quantity or name.', 'warning')

            }

            nutrition_api.run(onSuccess, onFailure)

        } else {

            showAlert('Please enter something to analyze', 'warning')

        }

})()

}}

This code basically takes the FoodInput text, modifies into proper API request format (array of string), stores the value in global storage using (setValue) and triggers the nutrition_api (nutrition_api.run)

That's it; we have connected our API and our form to send requests and get our awesome nutrition data!.

Crunching numbers to show nutrition values

Now we create the part where we display the data from Edamam and show it in a neat format.

All of the data points are calculated in a similar fashion, so we will demonstrate the only one just to get the idea behind it.

Let's consider Total Fat, the value for it can be derived by having the following code in the text property.

{{(function() {

    if (!nutrition_api.data.totalNutrients?.FAT?.quantity) return "-";



    return parseFloat(nutrition_api.data.totalNutrients.FAT.quantity).toFixed(2) + nutrition_api.data.totalNutrients.FAT.unit

})()}}

This first checks if totalNutrients.FAT.quantity exists or not; if not, then we display "-.” If it exists, then parse the value and append the unit to it

So "10.12520" becomes 10.12 gm (gm comes from nutrition_api.data.totalNutrients.FAT.unit)

Similarly, the Total Fat Daily Percentage can be displayed using the same logic.

{{(function() {

    if (!Api1.data?.totalDaily?.FAT?.quantity) return "-";



    return parseInt(Api1.data.totalDaily.FAT.quantity) + "%"

})()}}

We build the whole UI by adding similar code but changing the key from FAT to whatever macro/micronutrient is required to be shown.

Wasn’t that simple?

This recipe analyzer can be used as part of the many tools a fitness company/studio can give its members. We took the recipe analyzer a few steps further and envisioned the various other things to help a fledgling fitness studio tech up.

See the screenshots below to get a better idea:

Screenshot 2021-08-25 at 1.37.50 PM.png
You can make a fully automated system to keep track of progress for clients, with our modal widget, you can automate payment collections etc. Just connect your data source to get started!
Screenshot 2021-08-25 at 1.38.52 PM.png
Connect your database from Airtable or Google Sheets and start building!

For a detailed tutorial on how to build dashboards and admin panels, follow this link.


Have you made something using Appsmith? Write to me (vishnupriya@appsmith.com), and I would love to feature you on our blog! If you’re interested in building an app on Appsmith, sign up today . We have docs, tutorials, and live help on our vibrant Discord community to help you along the way. So go ahead, put your ideas out there!

Building an Expense Manager for your Startup!
6
September
2021
Tutorial

Building an Expense Manager for your Startup!

Building an Expense Manager for your Startup!
Vihar Kurama
0
 minutes ↗
#
javascript
#
open-source
Tutorial

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.

CleanShot 2021-09-03 at 13.20.45@2x.png
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:

  1. Create a new account on Appsmith (it’s free!), if you are already an existing user, log in to your Appsmith account.
  2. Create a new application by clicking on the Create New button under the Appsmith dashboard.
  3. We’ll now see a new Appsmith app with an empty canvas and a sidebar with Widgets, APIs and DB Queries.
  4. Click on the + icon next to the APIs section and choose the Google Sheets option.
  5. Next, click on the New Datasource button and set the scope to Read and Write and click Authorise.
  6. 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.
  7. 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.

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

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:

  1. First, let’s add a container component to wrap all the widgets on the canvas.
  2. 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.
  3. Add the following widgets onto the form widget that’ll allow us to collect all the data to request a reimbursement.
  4. 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:

  1. Create a new page by clicking on the + icon next to the pages and rename it to Admin View.
  2. Add a container widget across the canvas to group all the widget’s Copy the getReimbursement query from Page1 to Admin View page
  3. 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:

CleanShot 2021-09-03 at 13.20.45@2x.png

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

Test and Deploy your APIs Using These Open Source Tools
28
July
2021
Resources

Test and Deploy your APIs Using These Open Source Tools

Test and Deploy your APIs Using These Open Source Tools
Vyom Srivastava
0
 minutes ↗
#
apis
#
open-source
#
testing
#
app-development
Resources

Testing an API is one of the most important phases of the API development lifecycle. It ensures that the API you’re deploying on the server is bug-free and highly optimized. But the testing phase can be very complex as it involves different types of testing, such as load testing, regression testing, security testing, etc. There are a lot of challenges developers and testing teams face during the testing of API. Let's discuss them first:

Why is API Testing a Difficult Task?

We all know that APIs involve a lot of modules that have a lot of functionalities. Let’s take a simple example of an e-commerce application. You’re going to have many endpoints such as /login, /logout, /cart, /wishlist, /profile, and so on. You need to ensure that each endpoint is delivering what it is supposed to. For example, /cart should only show products associated with a particular profile and shouldn’t mix with other products.

An application like the one mentioned above can have about 300-400 endpoints or sometimes even more! On top of that, you need to make sure that the validations are working fine, response time is low or at least optimized, there’s no bug in the API, and good performance even when 1000s of requests are being made simultaneously. You also need to ensure that the API returns an appropriate status code such as 20x, 40x, 50x, etc. All this makes API testing not only tricky but also a time-consuming task.

To reduce the complexity of the whole testing and deployment process of the API, there are a lot of open-source tools available on the internet (if you prefer non-open-source tools, you can check out Postman or Firecamp ). These tools not only save a lot of time but also give you insights like the response time of the API, among others.

Once you’re done with testing, you can deploy the API on a server. Deployment is the process where you’re ready to go live with the API and need to move it to the live server. Every time you make a change to the API, you need to redeploy the API on the server (after testing, obviously! 😬)

Here's our list of open source tools that you can use to test and deploy your API:

SoapUI

Screen Shot 2021-07-27 at 10.54.02 PM.png

SoapUI is another API tool that allows you to test and deploy your APIs. This is one of the most matured and trusted API testing tools. One of the unique features of this tool is, it supports SOAP APIs too. The tool is mainly used for QA and API testing. It also allows you to connect external data sheets to retrieve data for executions.

Soap UI also allows you to send multiple API requests; triggering a single test case and supports a wide variety of testing such as load testing, functional testing, security testing, etc.

Pros

  • Easy to define variables and pass them in parameters.
  • Support for SOAP API

Cons

  • Slower to perform tests on complex APIs
  • Not completely free
  • UI takes a little bit of getting used to

Apache Jmeter

Screen Shot 2021-07-27 at 10.58.03 PM.png

Apache Jmeter is an open-source testing tool that not only tests APIs but scripts too. You can create your own test cases, and it’ll perform different types of testing like module testing, regression testing, etc.

The UI is quite simple and easy to use. You can test the APIs in two ways: either use direct API requests or write a code to make the requests to an API endpoint. The tool is entirely written in Java and supports multiple languages such as Python, C, Java, etc.

It also comes with a marketplace where you can just download the plugins to expand the platform’s functionalities. It supports multiple protocols such as FTP, HTTP, LDAP, SOAP, etc. JMeter also supports graphs and charts, so the results can be visualized easily. To perform UI testing, you can run Selenium test cases as well.

Pros

  • Free to use and completely open source
  • Can be connected to third party platforms like Jenkins
  • Can be scaled easily
  • Marketplace is a unique feature

Cons

  • Very slow
  • UI is dated

Hoppscotch

Screen Shot 2021-07-27 at 10.59.48 PM.png

Hoppscotch, previously known as Postwoman, is another popular open-source API development and testing platform. It has a dark UI and a minimalistic design scheme. It is one of the fastest API testing tools allowing you to send requests and copy responses in real-time.

It comes with a variety of themes and you can even install it as a PWA (Progressive Web App) on your mobile device. The tool also lets you make a full-duplex communication channel over a single TCP, in other words you can make Websocket connections. Another big feature of this tool is that you can also test GraphQL queries.

Pros

  • Support for Websocket
  • PWA
  • Easily create documentation

Cons

  • Comes in web variant only
  • It doesn’t support testing like regression, load, etc

Karate

Screen Shot 2021-07-27 at 11.07.24 PM.png

This platform has been developed by Intuit and is used for multiple purposes like API testing, deployment, creating mock test servers, web browser automation, etc. It is written in Java but doesn’t require the end-users to write anything in Java. It’s so easy to use that even non-programmers can write the test cases. It supports YAML as andV, so you can easily use them to write data drives tests. You can also perform cross-browser-based Web UI testing.

Pros

  • Support for multiple testing
  • Includes a lot of functionalities

Cons

  • It doesn’t have a great UI so you might have to write a lot of code

Insomnia

Screen Shot 2021-07-27 at 11.08.14 PM.png

Insomnia is another open-source tool that lets you track the development and deployment of API endpoints very easily. It uses a Swagger-inspired editor, so if you’re familiar with it you’ll be able to easily use this tool.

It allows you to import API specs from OpenSpec API as well as Postman. It also comes with a CLI tool called Inso, which lets you go in-depth with the API testing. You can also connect version control software like GitHub, Bitbucket, SVN, etc.

Pros

  • Support for .env files
  • Support for Gitsync

Cons

  • Process to test the API is a bit lengthy

What’s Next?

Now that you’re equipped with your APIs, you can use Appsmith to create full-fledged applications by connecting your data to our extensive repository of pre-built UI widgets like forms, buttons, lists, maps and so much more. And since Appsmith is a GUI based platform, you can drag and drop these widgets to create your applications. You can also invite your colleagues to collaborate with them and then deploy it to be shared with internal or external users.

Psst! You can connect your data on Appsmith either through APIs or through our native integrations with popular databases like Postgres, MongoDB, and Snowflake, among others, as well as apps like Google Sheets!

610002bbe68fa271933cee6e_ABK8x87Kne_y4oROzmhaoMwpShsXIcXMr_VubVdsoztQaUGrIxFdgKnwTNUm_Pb4vEDGDNjuVk1t0UgKWrOWSKaZ5pF1HIWNdqm4kqNg6_nPuTZTgaXEAJepVbZKRuW3SHAdmi4u.png

Also, by running CURL commands directly on the platform, you can test and deploy your apps easily and quickly.

Are you interested in building something with Appsmith? Take it for a spin. Join our vibrant community on Discord. To get regular updates on what we’re up to, follow us on Twitter!

Say Hello to Our New ArangoDB Integration
28
July
2021
Announcement

Say Hello to Our New ArangoDB Integration

Say Hello to Our New ArangoDB Integration
Vihar Kurama
0
 minutes ↗
#
open-source
#
graph-database
#
javascript
#
developer
Announcement

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!

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

CleanShot 2021-07-28 at 18.43.09@2x.png

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:

  1. On the Appsmith dashboard, create a new application by clicking on the Create New button under any organization.
  2. Find the Datasources option on the left navigation pane, click on the + icon next to it.
  3. 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.

CleanShot 2021-07-28 at 18.44.17@2x.png

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.

  1. Click on the + icon next to the data sources on the side navigation.
  2. Find the ArangoDB data source and click on NEW QUERY
  3. 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.

CleanShot 2021-07-27 at 14.14.24@2x.png

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!

Five Open Source Database Managers to Connect Your Data
4
August
2021
Resources

Five Open Source Database Managers to Connect Your Data

Five Open Source Database Managers to Connect Your Data
Vyom Srivastava
0
 minutes ↗
#
databases
#
open-source
#
mysql
#
mongodb
Resources

The database is one of the most critical parts of an application. Why? All the information you receive is stored in the database; the app pulls up that information in the way you want it. So the first step to building an app would be to connect your data. It’s no wonder that databases dominate the world of apps.

Some of the proprietary databases can be expensive and tend to offer limited technologies for data storage; however, you can always choose to go with open-source databases for your next project. You can self-host open-source databases and configure them as you like since the source code is available. Not just this, open-source databases are very flexible as well as cost-effective. There are a lot of applications that use more than one technology for data storage. For example, to deal with real-time data like (for example, data of real-time visitors), MySQL is not a good choice because it is not designed for high concurrency as it takes a lot of time to run multiple queries at the same time. App developers tend to go with a database like MongoDB as it supports a high level of concurrency. However, there could be a situation where the data science team for the same application would probably use MySQL for running complex queries. See how developers can use more than one database technology to connect and perform CRUD operations.

Why should you use a database manager?

  • It helps you to manage multiple databases at the same time.
  • It helps you to optimize your queries by providing meaningful insights such as query execution time, size of the data, etc.
  • You can easily update your databases.
  • They’re safer to use since the credentials are being encrypted first and then stored.

There are many database managers available out there, but only a few of them support multiple database technologies. Any good database manager should be able to support multiple databases and the following features:

  • Code linting
  • Error Highlight
  • Persistent Database Connection
  • Ability to store multiple credentials in a secured way
  • Ability to generate raw code if required

Of course, needless to say, the more the merrier! The ones I’ve mentioned above are the minimum standard across leading open-source database managers.

We’ve curated a list of some of the popular database managers for your next project. Dive right in!

OmniDB

Screen Shot 2021-08-04 at 4.44.00 PM.png

Omnidb is an open-source database manager which provides a collaborative environment for developing and managing your database. It comes in two variants: a hosted version and a stand-alone app version.

It’s powered by WebSockets and allows you to run multiple queries on multiple databases in the background efficiently. The application is built keeping simplicity in mind, making it one of the most user-friendly database managers.

It also supports multiple tabs, which allow you to write clean code and make multiple database connections in one session. It also has a smart SQL editor, which comes with linting, auto-complete, beautifies, etc.

Pros:

  • Support for multiple database technologies like MariaDB, MySQL, Oracle, PostgreSQL.
  • Dark theme support
  • Support for SSH terminal.
  • Monitoring dashboard: it provides a graphical interface to monitor all your configured units using Python scripting and other configuration files.
  • Auto-complete

Cons:

  • Doesn’t support NoSQL databases

HeidiSQL

Screen Shot 2021-08-04 at 5.02.18 PM.png

HeidiSQL is another open-source database manager which is extremely user-friendly and lets you connect multiple databases. It is one of the most potent database managers out there and enables you to create tables, logs, and manage users on MySQL databases and other database technologies.

This database was initially developed to make connections with MySQL only. However, it was extended to the MS SQL server, and now it also includes PostgreSQL support. HeidiSQL’s UI is pretty clean and allows you to create multiple connections. Once you install it, a setup screen follows, collecting essential information like IP, port, username, and password.

You can also export your data in CSV, Excel, CSV, HTML, SQL, LaTex, Wiki Markup, and PHP array. You can also edit multiple tables together by using the bulk edit option. Not just this, The monitor allows you to kill the costly processes.

Pros:

  • Supports multiple database technologies.
  • Export data in multiple formats.

Cons:

  • HeidiSQL's UI is minimal, and there's definitely room for improvement, but you can create multiple connections seamlessly.
  • Doesn’t support NoSQL databases

RockMongo

Screen Shot 2021-08-02 at 11.19.35 PM.png

RockMongo is an open-source MongoDB GUI tool that is written in PHP and is an entirely web-based application. It looks very similar to PHPMyAdmin and comes with a classic 90s UI (Windows 98 style buttons and a non-responsive layout). It supports all the common standards that make it easy to work with the collections, stats, etc.

Like the ones above, you can connect and store the credentials of multiple MongoDB servers, but it doesn’t support tabs. This means you can only work on a single MongoDB connection at a time.

Another drawback of using this tool is the dependency on the PHP server. To run and execute queries on this tool, you need to install and run a PHP server.

Pros:

  • Very light-weight
  • Easy to use

Cons:

  • Dependency on PHP server.
  • Doesn’t support multiple tabs.

Robo 3T

Screen Shot 2021-08-04 at 5.04.23 PM.png

Robo 3T, formerly known as RoboMongo, is another open-source MongoDB GUI client. The application is available for platforms like Ubuntu, Mac, and Windows. It comes embedded with the default MongoDB shell and allows you to run complex queries in a much faster way.

Robo 3T is one of the most popular projects on Github, which means there's an experienced community to help you out. Since it uses the default MongoDB shell, the consumption of resources is likely to be relatively low.

Pros:

  • Auto completion
  • MongoDB shell
  • One of the fastest database managers.

Cons:

  • The UI becomes cluttered sometimes.

Navicat

Screen Shot 2021-08-04 at 5.05.12 PM.png

Navicat is another powerful database management and design application that supports multiple drivers and databases. It comes in a standalone application for Mac, Windows, and Linux and allows you to manage drivers like MySQL, MariaDB, SQL Server, SQLite, Oracle & PostgreSQL DB very easily.

This application comes with a lot of functionalities like export to excel, stored procedures, scheduling out of the box, and data transfer. One of the interesting features is data transfer, it allows you to transfer tables from one database to another even if they’re not on the same server.

Pros:

  • Support for multiple databases and drivers.
  • Data transfer functionality.
  • Available on all platforms.

What’s next?

Once you're done with your database development and design you’ll need a platform to work with the data right? You can use Appsmith and easily connect your databases. Let's say you’re building an API, you can use Appsmith to connect the database and deploy your APIs. Or let's say you want to fetch data from a database and plot a graph using the data. You can very easily use our drag-and-drop widgets to create a graph and deploy it.

Guess what, you can also connect your data on Appsmith either through APIs or through our native integrations with popular databases like Postgres, MongoDB, and Snowflake, among others, as well as apps like Google Sheets!

610a2b25eaeb381bf46cab45_Da_9-DEJByCND9d3I8Nn7edxWsIMG3pMfle3l7q3p-SGYp4ha7_g5WaDabixDg5p7fKc0WOBzyVXL5vaHhg0vvRxUkzOmePdvSNOkWJ7isz9sDTmZyCp_yqBfUxNlk39ebouSEH2.jpeg

Are you interested in building something with Appsmith? Take it for a spin. Join our vibrant community on Discord. To get regular updates on what we’re up to, follow us on Twitter!

How We Made Connecting Data to Widgets Much Easier
6
August
2021
Engineering

How We Made Connecting Data to Widgets Much Easier

How We Made Connecting Data to Widgets Much Easier
Vishnupriya Bhandaram
0
 minutes ↗
#
open-source
#
ui
#
ux
#
navigation
Engineering

What do we want our users to do on Appsmith? The obvious answer is that we want them to build fantastic internal apps for their organizations super fast. But what we're doing solves a more significant and perhaps intangible problem: avoiding repetitive and tedious grunt work. Developers don't want to do this, and we want to enable them to get to solutions faster. For this, Appsmith needs to be smarter and better too. The first step is to have a smooth onboarding experience — it's good for our users and great for us!

However, we noticed that users couldn't easily find critical elements essential to understanding how Appsmith works.

image.png

Our data connectors were hidden, and there were no obvious means of accessing them. There were a few more glaring pain points; for example, we felt that our widgets with pre-filled data, discouraged users from playing around with the platform. And even if our users were landing on the queries section, the flow was confusing and switching between data queries and widgets was non-intuitive. The product was not hitting the intended direction; to address all this confusion and more, we changed the navigation experience.

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

In this blog, we will talk about Appsmith's new navigation experience and how our design and platform pods went about the production process. Hopefully, you'll also get an inside look into the collaborative engineering and design practices here at Appsmith!

Merging APIs and DB Queries under Datasources

When a user is in an exploratory stage, what do they do first? Build UI or connect data sources? For us, it was a little bit of a chicken and an egg situation. We wanted to limit the fields to not overwhelm users with too many options and manage the flow into smaller edible nuggets.

Having APIs as a separate entity was counterintuitive. Merging it under data sources makes it easier for discovery and helps the user understand that all data comes from a data source — whether it's an API or a database query.

Along with this, we've also added subtle nudges and prompts such as this:

image.png

This reinforces the importance of connecting data sources to get apps working. ‍

The Right Widget for Your Data ‍

If you're confused about finding the best way to represent available data (a chart or a table?), the Appsmith platform can now predict the best widget based on your data.

image.png

This feature helps users narrow down options based on the type of data they have, speeding up the process of building an app. Earlier, users had to add the data source, write the query, go back to the canvas, scout for the right widget, (deep breath), drop it, and then bind it. With the new and improved flow, users can add data sources, write queries, select recommended widgets. Appsmith does everything else!‍

Clarity on Entity Relationships‍

Once you're inside a widget, it's essential to see how your data is linked to each other. We realized that when there are multiple data sources and queries on your application, sometimes it might be hard to navigate between data sources. So, we’ve added a way to be able to see entity relationships more clearly. With the upgraded new navigation experience, all the defined queries are listed on the widgets under incoming entities; you can directly choose (what) without writing JS bindings. When the widget performs any actions, for example, when a button is clicked, or a row is selected, these queries can now be seen under the outgoing entities section.

image.png

Make things more obvious

If there's one thing we've come to believe in after spending almost two months on this update, it's that keeping things simple tends to go a long way. This reflects even in the copy

Bind Data — Connect Data

APIs and DB Queries — Datasources

We introduced slash commands as a quicker and simpler way to connect widgets to a data source. Now you can trigger commands by typing "/" and use it anywhere you're writing Javascript (within moustache bindings) on Appsmith.

image.png

Slash commands also give a heads up for developers to start from somewhere. They become the way to initiate writing custom code and our auto-complete feature speeds up the process!

Our efforts with this new navigation experience were to make things simple and enable our users to find and understand features easily. As an open-source organization, we will always be a work in progress powered by our incredible community. We will strive to keep improving Appsmith!

‍If this new navigation experience helped you do let us know! As always, we would love to learn more about you and what you're building using Appsmith; please feel free to email me (vishnupriya@appsmith.com).

Become a Betasmith
Have a say in shaping Appsmith's future!‍

Join our community‍ Contribute or generally hang out with us!‍

Sign up for Events‍ Stay up to date on new features, live demos, etc.

Appsmith Roundup: Build CRUD Apps with one-click, Move Multiple Widgets, New Icon Widget and Omnibar
7
September
2021
Monthly Round-up

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

Appsmith Roundup: Build CRUD Apps with one-click, Move Multiple Widgets, New Icon Widget and Omnibar
Vihar Kurama
0
 minutes ↗
#
open-source
#
community
#
app-development
#
javascript
#
ui
Monthly Round-up

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:

  1. If you’re an existing user sign in to your account or you can sign-up here for free.
  2. 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.
  3. 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.
  4. 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.
  5. Next, under the active data sources click on the GENERATE NEW PAGE option.

You’ll see the following options:

sdHNRHrKK.png

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.

Build a Custom Application using Slack API
10
August
2021
Tutorial

Build a Custom Application using Slack API

Build a Custom Application using Slack API
Vishnupriya Bhandaram
0
 minutes ↗
#
open-source
#
applications
#
slack
#
app-development
#
javascript
Tutorial

I recently joined Appsmith, and I am one of the few non-technical employees here! And as part of the onboarding process, all new team members have to build an app on Appsmith! It doesn’t matter if you’ve studied journalism and anthropology, have no experience in coding or JavaScript, no excuses! The brief was that it could be fun or functional, and anything under the Sun! Anxiety and panic were having a field day while I thought about what to build and where to start and finally decided on making something fun yet functional for Appsmith.

We have a vibrant channel on Slack called the #reading-club, where channel members can share and discuss books they have read. I expect (and hope) that this channel will have a high volume of messages, and the members are likely to grow. Even though there are only 26 members in the channel right now, one has to scroll up to get to earlier recommendations! It can be pretty frustrating to do all that when you’re not checking the channel every day, and it can be confusing to go through different recommendations by different members. The channel is a great way to share your thoughts, but there is no way of organizing those by name. To this end, I created the Appsmith Reading Club App, and here’s what I hoped it would do:

  • A way for non-members to also keep track of book recommendations
  • Be a one-stop-shop to see what Appsmith colleagues are reading without the clutter of the group chat

To build the app, here’s what I did:

Building a Rad UI

As a 'visual person,' and I feel most comfortable mapping out the elements and figuring out a flow. It helps me get a clear idea about what each component looks like and sets the scope.

I wanted one part of the app to be a list of names of the channel members, a button that could filter out their messages and display them in chronological order. Here are the widgets I used to build my UI. It took me under 10 minutes to put this together.

  • A table widget
  • A list widget
  • Text widgets
  • Image widgets

It's the next steps which are unfamiliar for a non-technical user like me: connecting a data source, writing code, and ensuring my app works! For this part, I enlisted my colleague, Vihar's help.

‍Here's a short tutorial!

‍Connecting Slack API‍

To pull information from a channel on Slack you need to work with the Slack API.

You have to then create an app and then generate OAuth tokens; to be able to do this, you need admin access to your organization’s Slack.

‍Here’s what our oauth configuration looks like:

oauth_config:
 scopes:
    user:
      - channels:history
      - channels:read
      - files:read
      - identify
      - users.profile:read
      - users:read
      - identity.basic

Next up, you have to link this configuration to your Appsmith application. This short tutorial uses the cloud version of Appsmith. However, you can always export and import Appsmith apps to different environments (cloud, self-hosted, local). The recommended way to use Appsmith is to use Docker; follow the documentation here for detailed instructions if you want to build locally.

In the next step, you will connect to the Slack API that will return all the users from the entire organisation. Since this is a secured API, we need to use the bearer token from the slack developer application to use it.

Follow the steps listed below:

  1. Click on the + icon next to the Data Sources.
  2. Select Authenticated API under the APIs section.
  3. Name the Query as completeList
  4. Use the following endpoint to fetch all the users from the slack organization: https://slack.com/api/users.list.
  5. Set the Authentication type to bearer token and copy the key here from the slack app. Hit RUN on the top right to execute the query.
image.png

Now in the response pane, you should be able to see all the users from the Slack organization. However, since our goal is only to fetch the users from a particular slack channel; in my case, this was #reading-club. For this, you have to write one more API that fetches details of a specific slack channel.

To do this, follow these steps:

  1. Click on the + icon next to the Data Sources.
  2. Select Authenticated API under the APIs section.
  3. Name the Query as filteredIds
  4. Use the following endpoint to fetch all the users from the slack organization: https://slack.com/api/conversations.members?channel=C01H8CPUVUK&limit=100.
  5. Set the Authentication type to bearer token and copy the key here from the slack app.
  6. Hit RUN on the top right to execute the query.

Here, as you can see, we’ve sent an additional parameter, which is channel-id. You can find this by clicking the details of the slack channel.

image.png

Now, to fetch all the messages from the slack channel, create a new query called getMessages. Follow the same steps, and replace the endpoint with the following:

https://slack.com/api/conversations.history?channel=C01H8CPUVUK&limit=1000

image.png

Here, you can limit the number of messages by sending an additional limit parameter. Now that we have everything, you can start building the UI for the app.

First step is to show all the members of the slack channel using a Table widget; when clicked, it will show all the book suggestions and other messages on a different List widget.

Follow these steps:

  1. Click on the + icon next to the widgets, find the Table widget, and drag and drop it onto the canvas.
  2. Open the table’s property pane by clicking on the cog icon on the table.
  3. Now, under the Table Data property, paste the following JS code snippet:
{{ 
function() {
    let all = completeList.data
    let filtered = filteredIds.data
    const result = all.members.filter(({
        id
    }) => filtered.members.includes(id));
    return result
}()
}}

In this snippet, we first fetched profiles of all the members in the slack organization and filtered them by user_ids with the selected slack channel. You can use a map function to return all the details of the users.

Next, we configure columns in the table by clicking on the cog icon for each column. For example, to render images from the API, we’ll need to access the profile key. Hence, we set the column type to image and set the column computed value to the following:

{{profile.image_original }}
image.png
image.png

With all the connections in place, the application will be fully functional. To take a look at my app, click here

‍It took me approximately 30-40 minutes to make this! My next steps would be to refine this app and add a few more elements, for example, displaying the date and time the messages were sent, images, and replies, filtering out system-generated messages, etc. While my experiments with Appsmith and this world of low code tools may have started with my soft spot for books, I quickly thought of other use-cases that can be implemented via the same app, such as automating other critical conversations/task-management on Slack channels or any other messaging applications. These would make my day-to-day job much easier! :)

It’s a pity that the world of internal apps is not given due attention simply because it’s not always customer-facing. Shifting our perspective to consider all users as customers can be a significant first step in building great internal apps. And low code is the future — internal applications can be tailor-made in a fraction of the time and cost while helping businesses focus on what matters most to their growth. ‍

I love hearing from our users and contributors. If you’re interested in building something on Appsmith or are currently building something, I'd love to pick your brain, please email me: vishnupriya@appsmith.com

How to Build a Meeting Scheduler (Calendly Clone) in 30 Minutes
24
February
2021
Tutorial

How to Build a Meeting Scheduler (Calendly Clone) in 30 Minutes

How to Build a Meeting Scheduler (Calendly Clone) in 30 Minutes
Nikhil Nandagopal
0
 minutes ↗
#
open-source
#
reactjs
#
showhashnode
#
howtos
Tutorial

> The post you are reading is based on an old version of Appsmith. Please use our template for the updated configuration.

We've been a long-time Calendly user, an app that lets others block our time and schedules meetings. And we love how much time it saves me. But we've needed a few additional features that were only available on their premium plans. Instead of upgrading it, we've decided to build our own that can be easy to use and fully customisable!

Calendly Clone on Appsmith

Unfortunately, there's one problem here. We'll have to pick technologies, write lots of code, build UI, deploy them from scratch. Which is again time-consuming. To skip all of these, we used Appsmith for the UI, APIs by Google Calendar and Zoom for video-call services.

"✨ Appsmith is a cloud or self-hosted open-source platform to build admin panels, CRUD apps and workflows. With Appsmith, you can build everything you need 10x faster. ✨ "

You can build this, too, in just under 30 minutes! Click here to try. Block the time for a live demo. Here's a quick sketch of what we'll be going through in this guide:

  • Connecting Your Google Calendar
  • Listing our Events from Google Calendar
  • Displaying Free Slots
  • Creating Calendar Events
  • Setting up Zoom for Video Conferencing
  • Final step

Let’s get started!

Connecting Your Google Calendar

Our first task is to connect our Google Calendar and list down all our calendar events. For this, we’ll have to use Google APIs and OAuth authorization to authenticate the user from Appsmith.

If you're an existing user, you can sign in to Appsmith or sign up for a new one (it's free!). We’ll walk through different steps to list our events!

  1. First, you’ll have to create a new application on Appsmith.
  2. A new application opens up an application titled Untitled Application 1; you can rename it by double-clicking on the existing one.
  3. Next, you’ll have to create a new data-source to interact with Google Calendar: To do this create a new API by clicking on the + icon on the left navigation.
  4. Add a new API and save it as a data source with the following URL: https://www.googleapis.com/calendar
  5. You can also set the name of the data source; in this case, we’ll call it GCalender.
  6. Now, navigate to the GCalender data source and set the following configuration: Authentication Type: Oauth 2.0 Grant Type: Authorization Code
  7. Add Access Token URL: https://oauth2.googleapis.com/token this token allows users to verify their identity, and in return, receive a unique access token in return.
  8. Add the Client ID and Client Secret from Google Cloud Platform
  9. Lastly, set the following config:
  10. Scope: https://www.googleapis.com/auth/calendar
  11. Authorization URL https://accounts.google.com/o/oauth2/v2/auth
  12. Add Auth params prompt: consent, access_type: offline
  13. Save and Authorize the first time around!

Awesome! We've now had the authorization to access our google calendar.

Listing our Events from Google Calendar

Our next step is to create an Appsmith App and fetch all the calendar events.

Let’s create an API to fetch events from our calendar and call it fetch_calendar_events. Use the following CURL command:

curl --location --request GET 'https://www.googleapis.com/calendar/v3/calendars/primary/events?timeMin=%3CMIN_TIME%3E&timeMax=%3CMAX_TIME%3E&singleEvents=true&orderBy=startTime'

Let's make these parameters dynamic by adding some javascript. To do this, we'll use Javascript and moment.js, both of which can be used in Appsmith by writing {{ }} in any field.

// Replace MIN_TIME 
{{moment().format("YYYY-MM-DDT00:mm:ss+05:30")}} 

// Replace MAX_TIME
{{moment().add(1,"days").format("YYYY-MM-DDT00:mm:ss+05:30")}}

Now replace the placeholders with the above js snippets and hit run to fetch your calendar events! Below is a screenshot explaining the same.

Updating Params


Awesome! This will now display all your calendar events.

Displaying Free Slots

Now that we have all the events from our calendars, we need to build a UI to display these events. Appsmith has a simply DnD interface to build UI. We can use the Table to display our events, a date picker to select which day we should fetch events for, and a dropdown to select the meeting duration we'd like our users to schedule. My UI looks like this, but you can get creative and built something that feels intuitive to you. Be sure to name your widgets well. The naming I'm following in this post is

  • durationDropdown for the dropdown widget
  • slotDatePicker for the date picker widget
  • eventsTable for the table widget

With an idea of the layout and inputs we need, we can configure our Table to display the events our API is returning using JS. Now, set the table data to : {{fetch_calendar_events.data.items}}

Now, this is how our app should look like:

Alt Text

No surprise our table doesn't look very readable because APIs are rarely built to work with views out of the box! Now with a little Javascript, we can transform the ugly API response into something human-readable and add some logic to show us the free slots instead of the calendar event. The following code goes into the table data property of the eventsTable.

{{
function() {
let bookings = fetch_calendar_events.data.items;
let bookingIndex = 0;
const startHour = 10;
const endHour = 20;
let startingTime = moment(slotDatePicker.selectedDate, "DD/MM/YYYY");
startingTime.hour(startHour);
startingTime.minutes(0);
const hr = startingTime.hour();
let slots = [];
const slotDuration = Number(durationDropdown.selectedOptionValue);
while (startingTime.hour() < endHour) {
  if (startingTime.isBefore(moment())) {
    startingTime = moment();
    if (startingTime.minutes() > 30) {
      startingTime.minutes(0);
      startingTime.hour(startingTime.hour() + 1);
    } else startingTime.minutes(30);
  }
  const booking = bookings[bookingIndex];
  let bookingStart = undefined;
  if (booking) {
    bookingStart = moment(booking.start.dateTime);
  } else {
    bookingStart = moment(DatePicker1.selectedDate, "DD/MM/YYYY");
    bookingStart.hour(endHour);
    bookingStart.minutes(0);
  }
  const slotNum = Math.floor(Math.round(moment.duration(bookingStart.diff(startingTime)).asMinutes()) / slotDuration);
  for (let i = 0; i < slotNum; i++) {
    const slotStartTime = startingTime.format("HH:mm");
    startingTime.add(slotDuration, "minutes");
    const slotEndTime = startingTime.format("HH:mm");
    slots.push({
      startTime: slotStartTime,
      endTime: slotEndTime
    });
  }
  startingTime = booking ? moment(booking.end.dateTime) : startingTime.hour(endHour);
  bookingIndex += 1;
}
return slots.map((slot) => {
  return {
    slot: slot.startTime + " - " + slot.endTime
  }
})
}()
}}

The above logic was really the hardest part of building this application and took the longest to get right (but also the most fun part). The code declares a self-invoking function that iterates over the response of the fetch_calendar_events API and adds free time slots to array slots that are returned by the function. It begins iterating from 10 am to 8 pm (again hardcoding my workday for convenience) and uses the value in the durationDropdown to determine the number of free slots of selected duration that can fit between the current available time and the next calendar event. It then skips to the end of the next busy calendar event and continues this till it reaches the end of my workday!

Creating Calendar Events

To schedule a meeting, we can create a button on the table and configure it to open a modal once it is clicked. The modal UI can also be custom-built using DnD to capture a user's name, email, and purpose of the meeting.

Name the inputs as nameInput, emailInput and purposeInput so we're able to use them in our API. Let's import the following CURL and name the API create_event:

{{nameInput.text}}

In the above API, we need to accept dynamic values from our app, so we need to replace some of the params and headers.

_USERNAME:

{{nameInput.text}}

_STARTTIME:

{{moment(slotDatePicker.selectedDate+" "+eventsTavble.selectedRow.slot.split(" - ")[0], "DD/MM/YYYY HH:mm").toISOString()}}

_ENDTIME:

{{moment(slotDatePicker.selectedDate+" "+eventsTavble.selectedRow.slot.split(" - ")[1], "DD/MM/YYYY HH:mm").toISOString()}}

DESCRIPTION:

{{purposeInput.text}}

TITLE:

{{nameInput.text + " Meeting with Nikhil"}}

EMAIL:

{{emailInput.text + " Meeting with Nikhil"}}

With this, our API is reading values from the eventsTable and the slotDatePicker to create the right event for the selected slot (eventsTable.selectedRow). We can now bind the onClick of the confirm button to call the create_event API and close the modal onSuccess.

Setting up Zoom for Video Conferencing

Finally, there's one more thing. We need to send out a Zoom link for every event to integrate Zoom's APIs and create a zoom link for the calendar events. (This is one of the things I love about Calendly) To integrate with zoom, we have to fetch a JWT to authenticate our application requests with zoom. We'll follow this guide. With a JWT in hand, it became as easy as importing another CURL and naming it create_zoom.

curl --location --request POST 'https://api.zoom.us/v2/users/5IrMmK-8Rv-dFkX1kbk22w/meetings' \
--header 'Content-Type: text/plain' \
--data-raw '{
  "topic": "",
  "type": 2,
  "start_time": "",
  "duration": ,
"timezone": "Asia/Kolkata",
  "settings": {
    "registrants_email_notification": true
  }
}'

Replace the following variables as shown:

JWT with your JWT token

TOPIC:

{{nameInput.text + "<> Name"}}

STARTTIME:

{moment(slotDatePicker.selectedDate+" "+eventsTable.selectedRow.slot.split(" - ")[0], "DD/MM/YYYY HH:mm").format("yyyy-MM-DDTHH:mm:ss")}}

-DURATION:_

{{durationDropdown.selectedOptionValue}}

We also have to update our create_event API to save the zoom link returned by this API in the calendar event. Update the description field to

{{purposeInput.text + "\n Zoom Link: " + create_zoom.data.join_url }}

Now let's call our create_zoom API before we call create_event and close the modal. To do this, we can easily convert the onClick configuration to javascript and write a neat little workflow using callbacks.

{{ create_zoom.run(() => 
    create_event_event.run(() => 
      fetch_calendar_events.run(() => 
        closeModal("Modal1")
      )
    )
  )
}}

Now hit deploy, make your application URL public by clicking the share button, and share it with anyone you need to meet. You can try my meeting scheduler here. Soon we’ll be having a fork app feature on Appsmith so that we can directly fork this one and customise accordingly within no time. All we’ll have to do is update the forked app with the new API keys.

If you like what we've built, star our ⭐️ Github Repo. Also, we’re an open-source company.

Also, do let us know your thoughts on this article in the comments section.

Appsmith Project Now Has 1000 GitHub Stars
12
November
2020
Announcement

Appsmith Project Now Has 1000 GitHub Stars

Appsmith Project Now Has 1000 GitHub Stars
Arpit Mohan
0
 minutes ↗
#
open-source
#
github
Announcement

I announced the Appsmith project on Dev.to for the first time on Aug 21st. While stars don't reflect the quality of a project, seeing 1K stars on our GitHub project makes me happy. 😺

Check out the project at: https://github.com/appsmithorg/appsmith

A few reviews from developers:

Alt Text
Screenshot 2020-11-12 at 5.47.17 PM.png
Alt Text
Screenshot 2020-11-12 at 5.50.06 PM.png

In the past two months, we've seen thousands of users from 65 countries who've used Appsmith for building all sorts of internal apps and admin panels. We've also seen over 40 contributors who've reported issues and code.

We built Appsmith because there is no open-source platform that helps you build custom and beautiful internal tools or admin panels. Today Appsmith ships with 17 UI components, 7 database integrations, and a REST API connector. There's a lot more coming soon.

When should you use Appsmith?

An Appsmith user said this: "This tool is perfect when you need an admin panel that needs to query multiple data sources in the same UI, update values from one with the other, and even use values retrieved from both to query external APIs."

Try Appsmith at appsmith.com

Hacktoberfest Week 1 Update
6
October
2020
Announcement

Hacktoberfest Week 1 Update

Hacktoberfest Week 1 Update
Arpit Mohan
0
 minutes ↗
#
open-source
#
hacktoberfest-1
#
hacktoberfest2020
Announcement

It's been a busy week at Appsmith, thanks to Hacktoberfest. There's no better way to end this week than by thanking all the developers who chose to contribute to Appsmith during this period. We are a small team of developers and this ❤️ means a lot to us.

Over the week, we've merged in 16 Pull Requests from contributors. That's insane!

"If you'd like to get in on the action, Appsmith is running a special challenge during the month of October where you not only get swag for contributing a valid PR but also a customized mechanical keyboard; for inviting other users to contribute to our repository."
"Check out details of the Appsmith Challenge here."

Here are the contributors (in no particular order) that I'd like to mention & thank.

Also, a lot of folks improved our documentation. We've merged 20 PRs just for our docs. Some of the top contributors to our documentation are:

Thank you everyone for being a part of this project. Look forward to more pull requests & contributions.

Happy Hacking!

PS: Join our Discord channel and participate in the Appsmith Challenge and become a part of a welcoming community.

Hacktoberfest Kickoff Event
1
October
2020
Announcement

Hacktoberfest Kickoff Event

Hacktoberfest Kickoff Event
Arpit Mohan
0
 minutes ↗
#
open-source
#
hacktoberfest2020
#
hacktoberfest-1
Announcement

Hacktoberfest is a month-long celebration of open source software. As developers, we stand on the shoulders of giants. Each year, in the month of October, as a community, we pledge to feed this giant.

Contributing to open source projects is fun and rewarding. At times, it can even be daunting to get started. Lots of people believe that only code that implements large features matter. That's not the truth. No contribution is too small — bug fixes and documentation updates are valid ways of participating.

I'm doing a livestream on Appsmith's Discord channel today at 8:30 AM PST / 9 PM IST to help you get started and show you how to open your 1st PR. This 30 minute stream is a tutorial for new and seasoned developers.

The agenda for the livestream will be:

  1. How to find the right projects to contribute to
  2. How to open PRs
  3. How to communicate to ensure your PRs get accepted
  4. Best practices when contributing to open source

As the lead maintainer of Appsmith, I'll use our repository as an example of how to contribute.

Register for the event here. See you on the stream!

Shameless plug: Appsmith is an open source low code product to build custom internal tools and admin panels. We are a welcoming community & have lots of issues that first time contributors can pick up.