Building an Appsmith Dashboard with Cube
24
January
2022
Tutorial

Building an Appsmith Dashboard with Cube

Building an Appsmith Dashboard with Cube
Vyom Srivastava
0
 minutes ↗
#
community
#
tutorial
#
dashboard
#
javascript
Tutorial

Every project contains several moving parts. We developers call them features. They can be dashboards, performance overviews, a blog, or web pages that include forms. Features take time to develop from scratch. That can impact delivery and deadlines.

In this article, I want to create a metrics dashboard with Appsmith. I'll use API endpoints generated from Cube with a public dataset from the Museum of Modern Art (MoMA).

Here's what the end-product will look like:

dashboard-image

I want to showcase how it would be more efficient for your team to have a tool to create custom dashboards for internal metrics. A huge bonus point is that it can be used by anyone, including non-devs in your team. This is where low-code tools come into play.

Appsmith is an open-source low-code platform that lets you create web applications like dashboards and admin panels by using drag-and-drop widgets. With Appsmith, you can connect multiple data sources like MySQL, MongoDB, REST API, Google Sheets, and perform CRUD operations.

I'll be using a hosted Cube deployment on Cube Cloud to get data from the Museum of Modern Art (MoMA) dataset.

A Quick Look at Appsmith

You don't need to be a developer to create metrics dashboards using Appsmith. It comes with a set of drag-and-drop widgets for forms, charts, images, and more, that you can use in your application to enhance its functionalities.

A few of the benefits of Appsmith include:

  • The ability to create apps without development knowledge
  • Saving the developer team's time
  • Saving your company's money by saving man-hours
  • Increased productivity
  • Drag-and-drop widgets

However, keep in mind that despite all of its functionality, Appsmith can't compare to the customization level of a custom-built app.

A Quick Look at Cube

Cube is an open-source analytics API platform that lets you connect with data sources and then access the data through an API. You can connect to data sources like MySQL, AWS Athena, and Google BigQuery, among others. It's agnostic for visualization tools, meaning you can connect to any front-end charting framework and build your own customized UI.

The Cube API lets you sort, group, and filter through the dataset itself. It acts as a centralized back-end metrics layer for any dataset. The multi-staging query system allows Cube to handle trillions of data points.

Creating a Dashboard with Appsmith and Cube

You're going to display a public dataset from the MoMA on the dashboard you're creating on Appsmith. The MoMA is one of the largest and most influential museums in the world, with around 300,000 books and catalogs, and more than a thousand periodic files.

This is how your dashboard will look:

dashboard-image

You'll use db4free.net, a free database service, to upload and host the database. After uploading the data to the database, you'll connect to the database using Cube. You'll be able to integrate the API generated through Cube into the different widgets of Appsmith.

Prerequisites

  • Any public dataset (in this case we're using one from MoMA)
  • A Cube account
  • An Appsmith account
  • Any database service; this tutorial will be using db4free.net

1: Clone the Dataset and Host It on Your Database

Once you clone the dataset, use the PHPMyAdmin or the cPanel of the database hosting service and import the data via CSV.

2: Connect Cube to Your Database

Now log in to your Cube account and click Create deployment. Give the deployment a name; the images in this example will use Appsmith Dashboard.

setup-1

On the next screen, select MySQL from the data source list. If you're using some other data source like Google BigQuery or AWS Athena, select the option accordingly.

step-2

Now, just fill in your database credentials, and you're good to go!

step-3

Once you've generated the data schema of your dataset, you can create REST APIs.

3: Get API Credentials and API Endpoints from Cube

Once you have created a deployment, you'll be redirected to the overview page of the deployment.

overview-page

Copy the API endpoint and click How to connect your application to get the Authorization key.

And you're done creating Cube's API. It's time to move ahead with Appsmith to create your dashboard.

4: Set Up Appsmith

Log in to your Appsmith account, create a new application, and select Build with drag & drop.

create-app-1

5: Create the First Widget

Once you see an empty canvas, click the + button next to Datasources in the sidebar. Select Create new API.

create-app-2

You should see the following page:

create-app-3

For the URL, paste the REST API endpoint, and in the Authorization header, paste your API code. In the case of this tutorial, the REST API endpoint is https://fuchsia-shark.aws-eu-central-1.cubecloudapp.dev/cubejs-api/v1/load.

Pass the following JSON as a GET param:

{
  "dimensions": [
    "Artists.begindate",
    "Artists.displayname"
  ],
  "timeDimensions": [],
  "order": [
    [
      "Artists.begindate",
      "desc"
    ]
  ],
  "limit": 10
}

In this code block, you're asking the REST API to return the top ten begin dates and display name. The rows are in descending order.

Once you start to get the data, you'll see a list of widgets on the right side of the page. Select Table from this list:

A table will appear in the canvas.

6: Create the Second Widget

Repeat the previous step but with a different query. Just add another API data source with the following query:

{
    "dimensions": [     
        "Artists.nationality"   
    ],   
    "timeDimensions": [],   
    "order": {     
        "Artists.count": "desc"   
    },   
    "ungrouped": false,   
    "measures": [     
        "Artists.count"   
    ] 
}

This query will return the count of artists according to country.

Again, select Table from the widget list. Your canvas should look something like this:

create-app-6

7: Add Different Widgets as Per Your Requirements

In this example, I've experimented with different widgets and data customizations. I've added three more charts using this query.

Query 1

This query will return the count of all artists with their begin date.

{   
    "dimensions": [     
        "Artists.gender", 
        "Artists.begindate"   
    ], 
    "timeDimensions": [],   
    "order": {     
        "Artists.count": "desc"   
    },   
    "ungrouped": false,   
    "measures": [     
        "Artists.count"   
    ], 
    "filters": [
        {
            "member": "Artists.gender",
            "operator": "set"
        },
        {
            "member": "Artists.begindate",
            "operator": "notEquals",
            "values": [
                "0"
            ]
        }
    ]
}

Query 2

This query will return the gender breakdown of the complete dataset. I have used the data coming from this API in the pie chart.

{
  "dimensions": [
    "Artists.gender"
  ],
  "timeDimensions": [],
  "order": {
    "Artists.count": "desc"
  },
  "measures": [
    "Artists.count"
  ],
  "filters": []
}

Query 3

This query will return the count of artists from each country listed in the dataset.

{
  "dimensions": [
    "Artists.nationality"
  ],
  "timeDimensions": [],
  "order": {
    "Artists.count": "desc"
  },
  "limit": 10,
  "measures": [
    "Artists.count"
  ],
  "filters": []
}

You can use this query with any widget to represent the data efficiently.

Create Your Own Internal Apps with Appsmith

In this article, you learned how to create a metrics dashboard with Appsmith and Cube to display data from the public dataset from the Museum of Modern Art (MoMA). You now know how to use low-code tools to save time and money on development.

Check out the live example here and try adding some more widgets to your metrics dashboard with Appsmith.

I think Cube and Appsmith are a great match. With Cube, you focus on creating business value without wasting time and effort on maintaining infrastructure.

Appsmith lets you focus on creating business value with metrics dashboards with minimal effort to both create and maintain.

You can register for Cube Cloud right away, and check out Appsmith as well!

I'd love to hear your feedback about building metrics dashboards with Cube Cloud in the Cube Community Slack. Click here to join!

Until next time, stay curious, and have fun coding. Also, feel free to leave Cube a ⭐ on GitHub if you liked this article. ✌️

Write More Code & Create Reusable Functions with Our New JavaScript Editor
6
December
2021
Announcement

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

Write More Code & Create Reusable Functions with Our New JavaScript Editor
Vihar Kurama
0
 minutes ↗
#
javascript
#
developer
#
community
#
features
Announcement

What’s better than some space? More space. We’ve cleared out the clutter and developed a brand new full-fledged code editor to make the coding experience on Appsmith smooth like butter. Our Github repository is home to many feature requests, and whenever we ship out a new feature, it’s cause for a mini celebration 🎉.

JS editor is one such feature that was in the making for a while. This new feature enables users to write reusable JavaScript variables and functions as JS Objects. These JS Objects can be used anywhere across the Appsmith platform using the moustache bindings.

In this blog post, we will discuss our efforts to ship this much-needed feature and how you can get the most out of it.

The Story

Appsmith is one of the most loved open-source internal tool builders for developers. Today Appsmith sits with ~9000 stars on GitHub. We are proud of the love we receive from the community. One of the main reasons for Appsmith's success is the simplicity and customization it provides while building internal tools. We can use JavaScript anywhere on the platform to handle bindings, transformations, actions, workflows, and many more using the moustache syntax. However, all this had to be done in the small input boxes on Appsmith's property pane. This was somewhat cumbersome, especially when writing larger blocks of code. Here’s a screenshot to show you how things used to be:

CleanShot 2021-11-23 at 18.39.03@2x.png

It’s hard for any developer to write code on this small property pane, and code reusability was also not possible. However, the input editor on the property pane still served its purpose well, with its excellent auto-complete, slash commands, linting, and debugging features. However, we take developer experience seriously and constantly work towards improving it.

Our primary goal was to create a full-fledged code editor to help developers write JavaScript with access to all the supported libraries without any distractions. To achieve this goal, we broke down this problem into three ideas:

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

We began the shipping process for the JS Editor around mid-July 2021. As strong proponents of building in public, we posted all the design previews, issues, ideas on our community channels and took community feedback into account while making this feature.

CleanShot 2021-11-23 at 19.18.35@2x.png
CleanShot 2021-11-23 at 19.17.59@2x.png
CleanShot 2021-11-23 at 19.17.23@2x.png
CleanShot 2021-11-23 at 19.16.56@2x.png

How did we build this?

Appsmith has a highly modular code-base, so adding new widgets, integrations, and custom styles are easy. But, for a new feature like the JS editor, things needed to be stitched from scratch. Our engineers and product folk brainstormed multiple times before getting started on it to ship a scalable solution around this.

Here are a few thinking points that we started with:

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

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

JS Editor and Objects in Action

Appsmith's JS editor is quick and easy to use, and it lets you create objects with a single click. Just open the application, search for JS Objects from the entity explorer (left sidebar), and click on the + icon. We will be navigated to a new file, as shown in the screenshot here:

CleanShot 2021-11-23 at 20.50.51@2x.png

Here, myVar1, myVar2 are two variables, and myFun1, myFun2 are two functions defined in the JS Object which are exposed in default export. Currently, we don’t support exposing functions using named exports. Now, let’s define a new random variable and try to access it onto a widget, for this, update the Code contents of JSObject1 to the following:

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


To test this function, use the run icon from the appsmith console below:

And voila! Just like that, we should see our output; in case of errors, the console will return all the instructions options that will help you debug the issue.

Now, click on the + icon next to widgets and drop a new text widget onto the canvas. Open the property pane of the text widget by clicking on the widget name, and update the text property to the following:

{{JSObject1.myRandomNumber()}}


Now click the + icon next to widgets and add a new text widget onto the canvas. Open up the property pane of that new text widget by clicking on its name and updating the Text property to:

{{JSObject1.myRandomNumber()}}


With this, we should be able to see a new random number bound onto the text widget:

The next question that comes to mind is, what if there's an error in the JS object's code? Does it work the same as a JS compiler does? The answer is yes! If you make a mistake in JavaScript syntax while writing your code, the JavaScript Editor will highlight the error using a red-colored lint below the possible position of the error. Here’s a screenshot for reference:

CleanShot 2021-11-24 at 11.26.15@2x.png

Not just that, we can see all the logs; we can also see the history of each update and execution of your function under the Logs tab.

CleanShot 2021-11-24 at 11.37.12@2x.png

What’s Next for the JS Editor?

Following are a few features, we will be extending to the JS Editor, keep an eye our, or join us on Discord to stay up to date :)

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

We hope you’re as excited about the JS editor as we are. If you’d like to give feedback on this feature or have a say in the roadmap, join the Betasmith program today.

Thanks to Apeksha, Hetu, Ajinkya, Nidhi, Parth, Aakash, Saptami, Prappula, Nikhil, who worked hard on shipping this feature out!

Building a Store Catalogue Management System using Appsmith and GraphQL
8
April
2021
Tutorial

Building a Store Catalogue Management System using Appsmith and GraphQL

Building a Store Catalogue Management System using Appsmith and GraphQL
Vihar Kurama
0
 minutes ↗
#
javascript
#
graphql
#
web-development
#
ecommerce
Tutorial

Catalogue management is hard. But building a catalogue management app for your company is harder. Not only does the application have to connect to multiple tables/API, and pull data on inventory, price and even offers, but the application also needs a robust UI that lets the user manage this catalogue easily.

Not only does this take a lot of time to build and maintain, but direct access to the database or an API endpoint that could return private information could also prove to be a problem. GraphQL helps solve these problems inherently in the way it returns only what it is queried for.

Because of these benefits, GraphQL is a great interface to develop an internal application on and to make development and maintenance easier, a low-code tool like appsmith can be very useful and will help speed up the process of development.

In this tutorial, we'll learn to create an application to manage a games store's catalogue running a GraphQL backend. We'll be using appsmith to build the application and implement CRUD operations on the database. Here's the link to the final application.

Game Catalogue App Screenshot
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets including charts, tables and forms for building a UI really fast.

Initial Setup

To build this application, first, we’ve collected a dataset from Kaggle that has a list of games, their prices, rating, average playtime and genre they’ve belonged to. We’ve created a mock database out of this, hosted it on Hasura and exported them as GraphQL APIs. Below is an image showing some of the attributes of the dataset.

Mock Data hosted on Hasura

Here, as we can see, the response consists of data of games in a JSON format. Next, we’ll use Appsmith to utilise this database and build a Store Manager by writing different GraphQL queries.

Getting started with Appsmith

To begin, we'll need to sign up for Appsmith (it's free!), if we don't already have an account. We can also deploy a Docker image on a server. For this tutorial, we're going to create an application on Appsmith cloud.

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

Below is a screenshot of the application:

Initial App Setup

Connecting to the Database and Creating the first UI View

To work with Appsmith, you need a database. This can be in the form of an API or a database. Appsmith supports MongoDB, MySQL, and PostgreSQL, among others. In this case, we’ll be connecting to Hasura, as it'll be our GraphQL backend server. To establish a new connection, follow these steps:

  1. Make a connection to a database by clicking the plus icon near APIs on the sidebar under a page.
  2. Now, rename your API to FetchGames
  3. We’ll write a POST request and use GraphQL query to list down all the games in the database.
  4. Next, use the following URL as the data source to access the mock database hosted on GraphQL: https://mock-as.hasura.app/v1/graphql
  5. We’ll have to set headers in order to access the database. Set content-type to application/json and x-hasura-admin-secret to qpN7KbsgIoKcuuC1sL3xiaIN2eegukvPPweg6MW1RkM8KUkaHAi85U3FOVj0Zkxm
  6. Next, we’ll have to write a GraphQL query in the request body to list all the database games. This will require an object with query as key and the GraphQL query value associated with it to fetch the games.
{
  "query": {{JSON.stringify(`
    query {
        steam_games(limit: 100, order_by: {appid: asc}) {
            name
            appid
            average_playtime
            genres
            price
        }
    }
  `)}}
}

Here, we have the query stringified with moustache syntax to ignore all the line breaks. Inside the query, we have the table name we want to query steam_games with a limit parameter set to 100 and an ordey_by parameter to order all the games by the appid ascending order using the asc keyword. Inside the query, we’ll have to use the fields we want to fetch. Now hit Run to run the query. You should see a list of games in a JSON field in the response tab.

FetchGames API Response

Awesome! You now have your store catalogue with all the games and their prices. Let’s now build a UI to display all these games on a beautiful table.

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

This will pull data from the FetchGames API we’ve set up in the previous section.

Beautiful! We now have our catalogue displayed on a table. Next, we’ll create a form where we can add new games to the database.

Implementing Create Operation on Database

In this section, let’s look at how we can add new values to the database by building a simple UI. For this, let’s create a new Form on Appsmith that takes in all necessary fields to post in our game store database.

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

Name : nameInput

AppId : appIdInput

Average Play Time : avgPlayTimeInput

Genres : genresInput

Price : priceInput

You can simply do this by going to the input widget’s property pane and double-clicking on the existing widget name.

Below is a screenshot how the form should look like,

Game Post Form

Perfect, we now have our UI ready; let’s create a GraphQl API to post data into the Database.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to InsertGame.
  2. Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:
{
    "query": {{JSON.stringify(`
    mutation ($object: steam_games_insert_input!) {
        insert_steam_games_one(object: $object) {
            appid
            name
            average_playtime
            price
            genres
        }
    }
    `)}},
    "variables": {
        "object": {{JSON.stringify({
            appid: appIdInput.text,
            name: nameInput.text,
            average_playtime: avgPlayTimeInput.text,
            price: priceInput.text,
            genres: genresInput.text,
        })}}
    }
}

Here, we have an object consisting of a query key that holds the GraphQL query and a variables key with all the variables that need to be posted to the database.

Now, in the query, we have a mutation that lets us modify the server-side data. Inside the mutation, we’ll send the object that references the data we will be querying. The insert_steam_games_one allows us to post one object to the database. Inside this query, we can add the attributes we need to post. Next, we’ve associated the variables to the object from the created UI input widgets. The .text on the input widget name helps us get the text written inside the input.

One last thing now that you’re API is ready, we’ll have to call the API when we submit values from the Form. Now go back to the form, open the property pane of the submit button and set the onclick action to call an API. You’ll now find the list of APIs we’ve created, select the InsertGame API. Below is the GIF explaining the same.

Awesome, now that we have our POST request ready, we can try adding a new game to the store using the form we’ve created.

Updating the Store Item on Database

In this section, let’s look at how we can update the database’s values by building a simple Modal. For this, let’s create a new column consisting of a button in the table; once the button is clicked, we should see the modal with existing values and modify it after submitting it.

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

Name Input: nameEditInput

Default Text: {{Table1.selectedRow.name}}

Average Playtime Input : avgPlayTimeEditInput

Default Text: {{Table1.selectedRow.average_playtime}}

Genre Input : genresEditInput

Default Text: {{Table1.selectedRow.genres}}

Price Input: priceEditInput

Default Text: {{Table1.selectedRow.price}}

The default text will allow us to display the selected row data on the table.

Now, let’s create an API that performs update operations on the data.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to EditGame.
  2. Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:
{
 "query": {{JSON.stringify(`
     mutation ($object: steam_games_set_input!) {
         update_steam_games(where: {appid: {_eq: "${Table1.selectedRow.appid}"} }, _set: $object) {
             affected_rows
         }
     }
 `)}},
 "variables": {
     "object": {{JSON.stringify({
         name: nameEditInput.text,
         average_playtime: avgPlayTimeEditInput.text,
         price: priceEditInput.text,
         genres: genresEditInput.text,
     })}}
 }
}

Here, we have an object consisting of a query key that holds the GraphQL query and a variables key with all the variables that need to be posted to the database.

Now, in the query, we have a mutation that lets us modify the server-side data. Inside the mutation, we’ll send the object that references the data we will be querying. The steam_games_set_input allows us to update an object in the database. Next, we’ve associated the variables to the object from the created UI input widgets from the Edit Modal. The .text on the input widget name helps us get the text written inside the input.

Now we’ll have to call the EditGame API after the modal is submitted, hence open the button’s property pane and add the following code snippet under the onclick action:

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

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

Deleting the Store Item on Database

This section looks at how we can delete the database’s values by building a simple button on the table. For this, let’s create a new column consisting of a button in the table; if clicked, the selected item should be deleted.

Open the Table Property Pane, and click on the Add New Column option. Now set the column type to Button and the label to Delete.

Now let’s write a Delete API and link it to the created button.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to DeleteGame.
  2. Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:
{
    "query": {{JSON.stringify(`
    mutation {
        delete_steam_games(where: {appid: {_eq: "${this.params.appid}"} }) {
            affected_rows
        }
    }
    `)}}
}

Now, in the query, we have a mutation that lets us modify the server-side data. The delete_steam_games allows us to delete an object in the database based on the selected appid. The appid from the table is referenced using this.params.appid.

Lastly, let’s call this API, after we click the delete button, go to the delete button property pane and select the Call an API action in the actions and select the DeleteGame API.

To refresh the table, after deleting an object, you can add custom JS in the button's onclick property:

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

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

Conclusion

You've seen how easy it is to build an application on Appsmith, specifically a catalogue dashboard. This guide covered how to create an application and connect it to a GraphQL, as well as how to create, read, update and delete data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

Building a dashboard with Appsmith is a fast way to build admin tools. Check it out if you’d like to save your developers time and get internal tools launched faster.

Cover Image: Photo by Charisse Kenion on Unsplash

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

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

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.

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.

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

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!

Build Your Admin Panel Without CSS or HTML
5
April
2021
Tutorial

Build Your Admin Panel Without CSS or HTML

Build Your Admin Panel Without CSS or HTML
Adeyinka Adegbenro
0
 minutes ↗
#
javascript
#
html5
#
css
#
tools
Tutorial

An admin panel usually refers to the set of tools available to the administrator of a web application for overseeing the app. The administrator is usually an owner or superuser who has permission to create, edit and delete certain components of a web page normally hidden from a regular user. The admin panel usually provides all the settings and tools used for system administration.

It’s not uncommon for web apps with sophisticated, complex, and beautiful user interfaces to have pretty bland admin panels. This is because the admin panel is hidden from the app's primary users and usually isn’t considered a priority. They’re also not very much fun to build because of the amount of repetitive work that goes into creating one.

In cases like this, developers would benefit from a tool that makes the process of building an admin panel easy without the need to write code. This would of course drastically reduce the amount of time and number of developers needed to work on building the admin panel. This is where Appsmith comes in.

Appsmith is an open-source framework that helps developers build dashboards, workflows, pages, and CRUD apps with little to no code. You can connect to APIs or databases like MongoDB, PostgreSQL, or MYSQL, as well as get access to charts, widgets, and other customization tools for building a UI.

In this article, you’ll learn how to set up Appsmith locally. You’ll create a new application, connect an API to it, and build an example admin panel using widgets and pages.

Getting Started with Appsmith

To begin, you'll need to sign up for Appsmith (it's free!), if you don’t already have an account. You can also deploy a Docker image on a server. For the purposes of this tutorial, you’re going to create a local instance of Appsmith using Docker.

  1. Read the instructions here to set this up for your operating system.
  2. Visit localhost in your browser to see the local version of Appsmith.
  3. Create a local account to log in.
  4. Click Create New to create a new application and name it Posts Admin Panel. This takes you to an empty workspace with a sidebar.
  5. On the sidebar, you should see items like Pages, API, and DB Queries in a folder-like structure. Under Pages, a new page, Page1, already exists. Rename it as All Posts.
Creating an application in Appsmith

Connect to a Data Source

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.

  1. Make a connection to a database by clicking the plus icon near DB Queries on the sidebar under a page.
  2. Click New Datasource to see a list of different database options.
  3. Select your preferred database option and provide the relevant configuration details required to connect to your database server. As for connecting to APIs from Appsmith, you can hit any REST API endpoint available on the internet.

For the purposes of this guide, we'll connect to a fake API service called JSON Placeholder.

  1. On the sidebar, under All Posts, click on the plus icon near APIs. Click Create New, and you should see a new API page.
  2. On the upper left corner, change the API name from Api1 to all_posts and paste https://jsonplaceholder.typicode.com/posts as the URL.
  3. Click RUN to test run the API. In the Response Body section, you should see some data. This is the data you’ll display on the All Posts page in the coming section.
All Posts API data

Create the First UI View

Go to the previously created page All Posts. On this page, you’ll display a list of posts on a table using the Table Widget.

  1. Add a table to the page by clicking on the plus icon near Widgets.
  2. Drag and drop Table to the page workspace.
  3. Click the gear icon to configure the table.
  4. Change the table name from table1 to post_table.
  5. In the Table Data section, erase the dummy data and paste {{all_posts.data}} into it. This will pull data from the all_posts API you set up in the previous section.

Now you should see all of the posts on the table, with their respective columns and rows. The table comes with filtering, pagination, sorting, and a search bar.

Table with All Posts

Next, add a button that will create a new post. Once the button is clicked, you want it to open a new page that contains a form for creating a new post.

  1. Drag the BUTTON widget to the bottom of the table and label it Add New Post.
  2. Click the gear icon of the button, in the ACTIONS section.
  3. Click the onClick dropdown and choose Navigate to. The Page Name box should appear.
  4. Type in New Post as the page name.
Placing a button under a table in Appsmith


Create the Second UI View

In this section, you’ll create a New Post page.

  1. Create a new page and rename it New Post.
  2. Go back to the All Posts page. You should notice that clicking the Add New Post button takes you to the New Post page. On this page, you’ll create a form that can be used for adding new posts.
  3. Drag the Form widget to the workspace.
  4. Rename the form text Create Post.
  5. Click the gear icon on the form and change the name from form1 to new_post_form.
  6. Add a Text widget and label it User ID:.
  7. Drag the Input widget in front of it and change its name from input1 to user_id.
  8. Set the data type as Number and toggle the Required checkbox as checked.
  9. On the next row, add a Text widget and label it Title:.
  10. Drag the *Input widget in front of it and rename it title.
  11. On the next row, add a Text widget and label it Body:.
  12. Drag the Rich Text Editor widget in front of it and rename it body.
A completed form on Appsmith

CRUD Records in UI

In this section, you'll see how to configure the application to add and delete records using the fake API.

Adding Records

The form has two buttons at the bottom that controls how the form works:

  • Reset clears the form of filled-in data.
  • Submit is meant to handle the submission of the form.

To configure Submit to submit the form data, follow these steps:

  1. Click the gear icon on Submit.
  2. Go to the Actions section.
  3. Select onClick and choose the action Call an API.
  4. Select Create API. This takes you to the API interface.

Define the API that adds posts in this section by doing the following:

  1. Change the API name from Api1 to create_post.
  2. Change the method from GET to POST and paste the URL https://jsonplaceholder.typicode.com/posts.
  3. On the Body tab, define the JSON that will be sent to the fake API:
{
"userId": "{{new_post_form.data.user_id}}",
"title": "{{new_post_form.data.title}}",
"body": "{{new_post_form.data.body}}"
}

In the above sample, new_post_form refers to the form you created in the New Post page, while .data refers to the form's filled-in values.

Appsmith allows you to access all the data on the form by referring to the widget's unique name. To see the data being sent:

  1. Go to the new_post_form, fill in the table with data, and submit it.
  2. Navigate to _New Post > APIs > createpost on the sidebar.
  3. Click the Request tab. You should see the last sent request body and how the data variables previously defined are now substituted with the real values you just entered when you submitted the form.


A create_post request

You've now configured the form's Submit button to call the create_post API when the form is submitted. You can also define the action to take after submission. To do this:

  1. Go to the New Post page and click the gear icon on the Submit button.
  2. Click onSuccess.
  3. Select the action Navigate to.
  4. In the page box, type in All Posts. This means that when the form submission is successful, you want the page to redirect to the All Posts Page.
  5. Test this by filling in the form with data and submitting it. The page should redirect to the All Posts page.
Settings for the Submit button

Delete Records

To demonstrate how to delete a post using the Appsmith tools, go to the All Posts page and add a Delete button to the last column of the post_table:

  1. Click the table's gear icon and click Add a new column.
  2. Rename the column Action.
  3. Click the gear for the new column and change the Column Type to Button. Rename the button label as Delete.
  4. Change the button colour to Red.

Let's define a new API called delete_post.

  1. On the sidebar, under All Posts, create a new API and name it delete_post.
  2. Change the API method to DELETE and paste the URL as https://jsonplaceholder.typicode.com/posts/{{post_table.selectedRow.id}}. {{post_table.selectedRow.id}} refers to the post_table on the All Posts page, while selectedRow.id refers to id of the selected row about to be deleted from the table.
  3. Go back to the post_table settings and click the gear icon for the column Action.
  4. In the onClick section, select the Call an API action from the dropdown and select the delete_post API.
  5. In the onSuccess section, select the action Show message, then type in Post Successfully deleted! in the message box.
  6. Choose Success as the type.
  7. In the onError section, select the action Show message, then type in Failed to delete Post! in the message box.
  8. Choose Error as the type.
The Delete button settings

Clicking the Delete button would send an API request using delete_post and then show the success message.

Of course, the selected post does not really delete since we’re using a fake API. But it does demonstrate how you would configure deletion with a real API on an admin panel.

The delete_post API

Conclusion

You've seen how easy it is to build an application on Appsmith, specifically an admin panel. This guide covered how to create an application and connect it to a database, as well as how to add and delete data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

Building an admin panel with Appsmith is a fast way to build admin tools. Check it out if you’d like to save your developers time and get internal tools launched faster.


Author Bio: Adeyinka is a software engineer based in Lagos, Nigeria, currently at BriteCore. She loves researching and writing in-depth technical content.

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

Why You Should be Using Low-Code Apps to Build Internal Tools
30
March
2021

Why You Should be Using Low-Code Apps to Build Internal Tools

Why You Should be Using Low-Code Apps to Build Internal Tools
James Konik
0
 minutes ↗
#
javascript
#
code
#
tools
#
apps

You’ve probably heard the story of the enthusiastic developer who worked night and day for two weeks on a shiny new internal tool, only to find Bob in accounts had built pretty much the same thing in thirty minutes with a no-code app builder or a massive, macro-filled Excel spreadsheet. Bob’s software may not have been as stable, scalable, or pretty, but it was delivered quickly and cheaply.

Situations like these leave developers asking some important questions like, when is the best time to actually build software?

Today you’re going to find out why you should be using low-code apps to build internal tools. By leveraging the speed and cost benefits of the new range of low and no-code tools available, you can use your expertise to deliver applications faster than ever before.

As a developer, low-code apps may seem to take away a lot of the legwork and ownership of your applications. After all, you can’t beat the feeling of building an app from scratch, crafting every feature yourself.

But, the positive side of that is that they can handle the repetitive coding you don’t like, enabling you to focus entirely on refining and delivering your vision as quickly as possible.

Understanding these tools and knowing when to use them will help you to deliver value to your clients and co-workers. It will level up your game.

Today, I’ll tell you what “low-code platforms” are and discuss the pros and cons of using them for internal application development. After reading, I hope you are inspired to try some of them and learn for yourself what they have to offer.

What is a Low-Code Platform (LCP)?

You may have heard the terms low-code and no-code floating around and pictured them as something similar. That’s a mistake. Low-code is not the same as no-code.

No-code apps let you develop applications with no coding whatsoever. That’s great for people with no development skills at all, but it means you’re strictly limited to the features provided for you, usually in the form of a drag and drop interface.

Low-code development still requires code but handles the bulk of the application for you, enabling you to concentrate on implementing the task-specific logic you need. With low-code, you can rely on the platform to deal with common tasks that you don’t need to customize and focus your efforts on the core functionality or differentiated business logic.

What are Internal Applications?

Internal applications are the apps you use within your organization for everyday business. There are all kinds of these. You may have apps for planning your office schedule, tallying marketing costs, or tracking leads and sales.

Studies suggest an average of eight apps are used by a typical enterprise employee every day. In larger organizations, there can be hundreds of internal tools used by various departments.

In the US alone, companies spend around $300 billion per year on internal apps. Building and maintaining those is a lot of work, so anything you can do to make it quicker is a plus.

Reasons to use Low-Code in Internal Applications

There are many advantages to using low-code apps for your internal tools and applications.

Speed

First, it’s typically faster to develop low-code applications than traditional software. With much of the application built quickly using visual tools, and common features added at the touch of a button, it takes much less time to get up and running. Research suggests a 50-90% decrease in development time compared to traditional applications.

Tools like UI Bakery have a whole set of templates you can use to get started, so your app gets some structure from the beginning. You just have to adjust it according to your specific needs.

Cost

Since low-code apps are quicker to develop, they are usually cheaper because the biggest cost of a software project is developer time. While you may pay a monthly fee to the toolmaker, it rarely eclipses the thousands of dollars per month that each developer on your team is paid. This cost argument is especially helpful if your management team needs persuading. Show them the figures and see their faces light up.

An Appsmith screenshot, showing a database query and some code guidance

Maintenance

The built-in features that low-code apps include will be updated along with the platform. That saves you from having to do maintenance. If you need a security fix or need to accommodate an API change, you can just build your app using the latest iteration of the software, and all should be good.

Being able to integrate quickly with other platforms is also a big plus. Many low-code apps let you quickly share data with other software. This could include Zapier, Airtable, Discord, or a whole host of other applications. Integrating with these yourself can take time, so being able to do it with a few clicks can save you a lot of headaches.

Rapid Iteration

Returning to the speed point, if you’re not sure which service to work with, low-code apps can let you make changes so quickly it becomes cost-effective to experiment until you find a service that fits what you are trying to build.

This rapid iteration allows you to take risks and improve your app through trial and error on a scale that would be much more expensive with traditional development.

It also makes low-code solutions ideal for prototyping. You can test out the basic functionality of a new idea, then shift to building a full application if you like it, and want to take full control.

Building things, using them, and improving them is a virtuous circle and participating in it is its own reward. If you like making things, you can do so quicker with low-code applications.

Support

If you do get stuck while building a low-code application, you can take advantage of their support offerings. While these vary depending on which tool you choose, most platforms will at least offer support forums that are more focused and friendlier than Stack Overflow.

The level of guidance can also make low-code perfect for newer developers. If your senior developers are all working on customer-facing products, you might be able to deploy some of your more junior engineers to work on low-code apps meant for internal applications.

Fun

Finally, developing low-code apps quickly is a lot of fun. Most developers look forward to building and crafting their ideas and are less keen on the accompanying drudge work involved in many long-term software projects.

"I'm having a lot of fun playing with @roamhacker's smartblocks

A low-code tool in my second brain 🥳
— Samuel Bars 𐃏 (@samuelbars) December 11, 2020

Low-code applications let you focus on the core experience. If you really want to customize the rest, there’s nothing stopping you from using what you’ve built as a starting point for a full project in another language.

Happy developers can realize their ideas quickly and can learn more in the process. The big picture experience that comes through working on multiple projects can also be acquired faster.

Limitations of Low-Code Platforms

So, how about the drawbacks? There are a few, and you need to be aware of them when picking a technology to use.

Limited Scope

The key limitation with low-code platforms is that they can’t do everything you can with regular code. Having things done for you is great, but if you want to deviate from what’s offered, you might not always be able to.

You’re effectively working in a box. It may be a nice box, but there’s only so much you can do inside it. As low-code tools improve though, the boxes are getting bigger and better.

Generic Feel

Drag and drop components might look great but have a cookie-cutter feel. If you want to make your UI look distinct or offer functionality that is tailored to your needs, not all low-code tools will work.

The same goes for integrations with other tools and platforms. You’ll get a fixed set of available options, which can be added quickly and easily. When you want to move beyond those, you might not have the option, or you might have to build the integration yourself.

Cost

The cost was in the positives too, but you also need to check the cost before making a decision. The goal is to save money, after all.

That can add up quickly if you have a large team and could start to outweigh the cost of building a small app yourself.

Just because low-code is potentially cheaper doesn’t mean you can ignore the business side of things altogether, so weigh your options carefully. Don’t assume it’s cheaper in every situation.

Final Notes

The creativity and problem-solving abilities developers possess can be turbocharged by using low-code apps effectively. If you’re new to this booming area, take a look. You might find yourself hooked. You might also find yourself delivering value to your customers at a rate you didn’t previously think possible.

Appsmith screenshot showing visual controls and colourful animated shapes

A great option if you want to dip your toe in the water is Appsmith. You can sign up in a few seconds, and the tutorial will show you the ropes in a few minutes. After that, you have a drag and drop interface letting you add UI elements quickly, and, of course, you can alter the core behaviour via its code.

Play around with it and see for yourself what these tools can do. The gap between an idea and its realization is getting smaller every day. Take your first steps on the journey. Who knows where it will take you?


Author Bio: James Konik, Uncertain if he's a coder who writes or a writer who codes, James tries to funnel as much of this existential tension as possible into both of his passions but finds it of more benefit to his writing than his software. When occasionally hopping out from behind his keyboard, he can be found jogging and cycling around suburban Japan.

Cover Photo by Luke Chesser on Unsplash

Building an Admin Panel with MongoDB using Appsmith
24
March
2021
Tutorial

Building an Admin Panel with MongoDB using Appsmith

Building an Admin Panel with MongoDB using Appsmith
Vihar Kurama
0
 minutes ↗
#
javascript
#
dashboard
#
mongodb
#
tools
#
code
Tutorial

Many companies and organizations rely on internal dashboards or admin panels that are connected with different data sources. In this guide, you’ll learn how to integrate a MongoDB data source with Appsmith and build creative dashboards.

Building an Admin Panel with MongoDB

Usually, building an admin interface over MongoDB is a time taking process and a lot of configuration has to be made. Also, for database management, schemas and queries have to be maintained on a different platform. While the UI client would be needing one more server. But with Appsmith, you can have everything under one roof and you can build UI within no time. Let’s see how by connecting to MongoDB on Appsmith. Below is a screenshot of how our dashboard is going to look like:

Screenshot

If you prefer a video tutorial, check out our video on How to Build a MongoDB Admin Panel in 5 Minutes!

Connecting to a MongoDB Data Source

Usually, MongoDB clusters are hosted on the cloud. Now let’s connect to one of the example clusters that’s on MongoDB cloud and list out all the data that’s present inside the database.

"The database we’ve worked on is a collection of product and sales information. You can find the finished admin panel app here."
  • First, you’ll have to create a new application on Appsmith.
  • A new application opens up an application titled Untitled Application 1; you can rename it by double-clicking on the existing one.
  • Now click on the DB Queries and create a New Data Source button. Since we’ll be using MongoDB, select the MongoDB option listed there. Below is a screenshot of how the settings look like:
mondog.png
  • You’ll also have to white-list Appsmith on the Mongo Server if you had any IP restrictions on your Mongo instance.
  • Next, set the Connection mode to Read/Write, Connection Type to Replica set.
  • Now you can add the host address, you can find this under your MongoDB cluster settings. In this guide, we’ll be using cluster0.d8mtn.mongodb.net
  • Next, click on the Test button to verify if the credentials are configured correctly or not. Once verified you can save the data source and then start working on your queries.
  • Finally, we’ll create a new query to fetch items from the product collections by clicking on Create Query. Use the following code snippet to fetch products from the products collection:
{
"find": "products",
}
  • Let’s name this query get_products and hit run to view the query response.

Displaying the Data onto UI

You have your data-source connected, and also a query that can fetch all the product items for you. Now, let’s put these on a table and render all the data. To do this, you’ll have to navigate to the Page, find the Table Component under the Widgets section, drag and drop it to the canvas. Next, open the table’s property pane by clicking on the cog-wheel on the table. Now under the Table Data property, add the following snippet:

{{get_products.data}}

Here, you’re using the get_products DB query and rendering the data from it onto a table.

"Appsmith allows us to parse javascript using the moustache syntax {{ }}."

Update an Item on MongoDB with Appsmith

Not just reading data, with Appsith you can perform all CRUD operations on the MongoDB. Now on our dashboard/page let’s create a form that allows us to update any selected value on the table.

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

To build this form, we’ll need to drag over a form widget, a bunch of text widgets, an input widget, and a date picker widget to the canvas. The form should look like this after setting up the UI:

2.png

Once we have the form setup, we would need to link the form to the table so that when a product is clicked on the table, the corresponding information is pre-filled on the form.

Appsmith provides us with an easy way to hook into a widget’s state. You can configure the text widget to show the name of the product selected on the table by setting its Text property to:

{{Table1.selectedRow.name}}

You can do the same for the date picker and input widget so that the default text is set based on the item clicked on the products table. For example:

{{Table1.selectedRow.quantity}}

Also, don’t forget to set the Data Type of the input widget to Number.

Lastly, you’ll need to write a query that grabs data from the form and updates the product selected on the table when the submit button is clicked. To set this up, click on the cogwheel on the submit button. Then set the onClick to execute a DB query and then click on create a query:

Let’s call this query update_product and configure it this way:

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

The update_product query shown above updates the item with _id selected on the table with quantity and expires_at gotten from the input and date picker widgets. Clicking the submit button on the form triggers this query.

You’ll now have a functional dashboard that displays product information with a form that allows us to update an individual product.

Displaying Data in a Chart Widget

Additionally, you can display data using charts. We have a sales collection that lists sales data of a particular product. It’s a good idea to display this data in a chart.

To build this functionality, we need to go back to the table widget and configure the onRowSelected action to execute a DB query and then, click on create a new query.

Let’s name this query get_product_sales and configure it like this:

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

The above query filters sales information on the sales collection for the product with the _id selected on the table. Also, this query will run whenever a row is selected on the table.

Lastly, we need to display the data from this query in a chart widget. So drag in a chart widget and configure the Chart Data to be:

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

And we can see the chart widget re-rendered with the sales data for the selected product on the table. You can go ahead and tweak the widget as you see fit.

Deploying the MongoDB Admin Panel

To deploy the admin panel, hit the deploy button at the top right corner. You can share the admin panel by clicking the share button and toggling the switch to make it public or only invite people you want to have access to the app (i.e people in your organization) via email.

Kudos! Your admin panel is now up and running!

with inputs from Confidence Okoghenun

One Open Source Project for Admin Panels, CRUD Apps, and Internal tools
21
August
2020
Product

One Open Source Project for Admin Panels, CRUD Apps, and Internal tools

One Open Source Project for Admin Panels, CRUD Apps, and Internal tools
Arpit Mohan
0
 minutes ↗
#
news
#
showhashnode
#
javascript
Product

We’ve all spent time on building internal tools which could be CRUD apps, admin panels, or complex workflows. These kind of internal tools are used for:

  1. Analytics and reporting
  2. Customer data views for sales & support teams
  3. Configuration managers for client-visible UI used by technical and non-technical people
  4. Multi-step data workflows which involve multiple participants(like content moderation tools or customer KYC at fin-tech startups)

These tools often aren’t very interesting to build because of the repetitive work involved like building UI, writing CRUD APIs, setting up authentication, & managing deployments.

Creating Admin Panels, CRUD Apps, and Internal tools quickly!

I decided to create Appsmith because I couldn’t find a project which did most of the work for me and also easily customizable.

How does Appsmith work?

1. First setup Appsmith using Docker. Read instructions here for a 2 min setup process.(docs.appsmith.com/quick-start#docker). Or try our online sandbox

2. Go to localhost or your machine’s public IP to see the login page. online sandbox.

3. Create a new application and name it.

Create an application

4. Connect to a database or API. Today MySQL, Mongo, Postgres, and REST apis are supported. The gif below shows me connecting to an API.

API creation

5. Go to the canvas section and choose a UI widget. Appsmith ships with 16 components like tables, different charts, map viewer, forms, etc. In the example below I’ve used a table component.

6. Modify the table property to display your query results by writing {{queryname.data}}. You can code in JS and use Lodash functions inside {{ }}.

7. Trigger an action through events like onClick, onTextchange, onSelectedrow, etc for CRUD operations.

Event trigger

1. Click deploy to see your app in a URL. (You can set up a custom domain in the setup script)

Deploy

2.Invite users after assigning them a role. They can sign up via a form login or with their Google/Github accounts. Make your app publicly viewable to allow access without a login.

Share & invite

So this is how you build a simple app in less than 10mins. Access an app I built on Appsmith here.

Appsmith is the first open source project to build internal tools. If you like the project, please star our GitHub project.

What features should we add to Appsmith?

TL;DR: Appsmith is an open source framework to build apps for analytics, workflows or CRUD operations. Replace all your internal tools with one project. See GitHub repo or try an example app here.