March Round-up: Templates, JSON Form, and More Product Updates
7
April
2022
Monthly Round-up

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

March Round-up: Templates, JSON Form, and More Product Updates
Vihar Kurama
0
 minutes ↗
#
announcement
#
applications
#
community
#
Templates
Monthly Round-up

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

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

A Headstart for Your Apps!

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

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

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

Read the full announcement here.

All-New JSON Form Widget

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

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

Read the full announcement here.

Promises in the Table Buttons

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

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


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


New JS Powers to Icon Button Widget

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

CleanShot 2022-03-31 at 11.51.51@2x.png

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

Product Updates

Updated Shortcuts for Ease

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

CleanShot 2022-03-31 at 12.05.33@2x.png
Smart Substitution for known MongoDB Datatypes

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

CleanShot 2022-03-31 at 12.17.48@2x.png

Following are the MongoDB types that can be handled:

  • ObjectId
  • ISODate
  • NumberLong
  • NumberDecimal
  • Timestamp
Email Notifications on Comments

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

CleanShot 2022-03-31 at 12.46.58@2x.png

New Collaborations, Technical Content, Videos & Tutorials

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

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

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

If you’re interested in using a database not listed on our website as an integration, please let us know about it by raising a PR on Github, and we will do our best to include it at the earliest.

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

Introducing JSON Forms in Appsmith
21
April
2022
Announcement

Introducing JSON Forms in Appsmith

Introducing JSON Forms in Appsmith
Somangshu Goswami
0
 minutes ↗
#
announcement
#
app-development
#
applications
#
widgets
Announcement

Forms are a core part of most internal tools since its one of the major ways in which data is created or updated. Today, we're introducing the JSON Form Widget (documentation), which allows for a fantastic form creation experience and has been one of our top requested features.

The JSON form widget is helpful for quickly generating (dynamic or otherwise) forms from JSON fields.

Here are some highlights of this widget:

Generate Forms from Database Queries, APIs, or JS Objects

Once you drag a new JSON form widget, you will see a default form rendered with some details. You can update the source data field to infer data and then generate the form. This can be bound to any query or variable containing JSON data, such as DB queries, APIs, or JS Objects. The JSON Form widget can be bound to any other widget in Appsmith as well.

Auto Generate Form When Your Data Changes

The form fields are generated according to the source data when you enable an auto-generated form. Fields are generated according to the key-value pairs in the source data. Whenever there is a change in the source data, the form fields get updated automatically.

Configure Fields As You See Fit

Field configuration shows all the fields generated automatically in the forms. You can edit the fields to tweak properties like the field type and default value and bind specific actions by using editable properties. Most fields use the underlying data type-specific widget's properties to allow a full level of customization just like the widget would. For example, if the input type is text input, the editable properties are similar to the input widget in Appsmith.

  • Array Fields allows you to add, remove, and update a group of fields together.
  • Object Fields allow you to group fields together.
  • Add New Field, disable invalid forms (and control them further with JS), and control a widget's visibility on the app page to create highly customized dynamic forms.

Some of the ways that we've seen our users use the JSON form are:

  • Customer service executives select a form template and customize it for a customer. This is stored in a database and then sent over to the customer.
  • Users can create dynamic sign-up forms, as having both the Sign-in and Sign-up forms on the same page. Conditional switching between forms is effortless because you don't need to create two forms; you only need to change the JSON data.
  • Marketing teams are using the JSON form to create personalised form-based campaigns and much more!
Note: It’s live on the cloud app and will be live on the self-hosted version very soon.

Want to explore the JSON Form in detail? Head over to the JSON Form documentation page to learn more.

Templates: A Simple Way To Get Started With Appsmith
7
April
2022
Announcement

Templates: A Simple Way To Get Started With Appsmith

Templates: A Simple Way To Get Started With Appsmith
Rahul Kochar
0
 minutes ↗
#
Templates
#
announcement
#
applications
#
community
Announcement

Today we’re launching Templates, an easy to use, ever-growing forkable library of pre-made applications across use-cases that speeds up onboarding for new users, and makes application development faster for existing users.

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

Here’s what you can do now:

  • Filter through the list of templates and get a feature-rich app with one click.
  • Discover new features in action by seeing them in these templates.
  • If you’re unsure of what to build, get inspired by the list of templates.

And here’s what we have in store for the immediate future:

  • Use Templates in an existing Application

Today, templates help you kick start an application from a blank canvas. But with V2 (launching in a month), you can add templates to an existing app.

  • Investing in a long tail of templates

We plan to add new templates every week, and are always looking for more ideas. If you have an idea for a template, you can create a GitHub issue.

  • Theming

Control the styling of all your widgets globally from a single place, helping you build amazing visual apps with just a few clicks.

💡 Pro-tip: Templates are also a great way to get buy-in from your team to adopt Appsmith. You can quickly show the templates to your colleagues, team leaders, or even the CEO and quickly give them an idea of the power of low-code.

We’re so excited to be launching templates and can’t wait to see what you do with them.

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms
12
November
2021
Tutorial

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

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms
Vihar Kurama
0
 minutes ↗
#
applications
#
code
#
announcement
#
automation
#
community
Tutorial

Automation has become the ‘it’ thing in the world of business. The need for organizations to cut costs has forced them to improve internal processes to provide improved service while also conserving time. Unfortunately, it's not always easy for teams to streamline everything internally because they often seem like complicated processes - but there are ways around this. Using Appsmith, developing internal tools can cut costs, time and even improve your workflow by connecting services across specialized platforms with Zapier.

Zapier has thousands of apps and services that can meet almost all your business automation needs. Integrating Appsmith into the mix opens up a whole new dimension. In this way, you'll have a more efficient system in which you can connect anything from, say, a MailChimp email campaign to a Google form with data from your ERP or CRM systems delivered within the app!

In this blog, we will be looking at adding automation to Appsmith applications using Zapier.

Let’s get started!

Building Internal Tools with Appsmith

Appsmith is a powerful platform to build admin panels, dashboards, crud apps, and internal tools. It allows us to create these applications with little to no coding required. We can build apps that integrate with just about any service you can think of. Today, Appsmith has more than 15+ data source integrations; a few popular ones include Postgres, MongoDB, Google Sheets. That's one of the best things about Appsmith -- it's completely customizable. But if you want to build apps with Appsmith, you will likely be doing some coding in JavaScript. Yes, we can use JS anywhere across the Appsmith applications to bind, transform and create actions to the data. In terms of UI, Appsmith provides more than 25 widgets with a wide range of styling options. While it's not hard to use Appsmith to build apps, you will need to start building them to get to the next level with Appsmith.

Now, let’s build a simple newsletter application that can help collect contacts from Appsmith and send Emails using Sendinblue via Zapier.

Building UI on Appsmith

The idea of our newsletter is to collect emails from users and to maintain campaigns on Appsmith. Let’s get started by following the below steps:

  1. Create a new account on Appsmith (it’s free!), if you are 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 two directories: Datasources and Widgets.
  4. Click on the + icon next to the widgets section and drag and drop a container widget onto the canvas.
  5. Next, bring in a form widget inside the container and two input widgets inside the form.
  6. We can configure widgets and their properties by clicking on the cog icon on the top right. This will open a property pane where we can update all the widgets settings.
  7. Now set the form labels to name and email.
  8. Additionally, you can add a text widget to add aesthetics to our application; the following is how the UI looks like:
CleanShot 2021-11-09 at 16.21.52@2x.png

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

Set Up Zapier with Appsmith

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

  • First, create a free account on Zapier and select create custom workflow option from the dashboard.
  • On Zapier, every action on the workflow is named on Zap; to establish a connection between Zapier and Appsmith, let’s create a Webhook.
Webhooks are essentially a way to create a communication channel. It allows you to listen to an event and run a command or take any action you want. Here, the event will be triggered by an API call from Appsmith.
  • Now open the Appsmith app, click on the + icon next to the Datasource section from the sidebar, and choose Create New API.
  • Copy the webhook URL from Zapier and set the request type to POST. For ease, let’s also rename the query to addContact.
  • Here, we also need to send the data from the Form widget we had created earlier; now, let’s use their names to collect data and pass them in the Webhook.
  • Navigate to the Body tab on the API and paste the following code snippet:
{
"name":"{{Input1.text}}",
"email":"{{Input2.text}}"
}
  • This code snippet will send the information from the Input widgets to Appsmith.
  • Lastly, set the button onClick property to execute a query and set it to addContact.
  • Now, on Zapier, hit the test button and send a request by filling the form on Appsmith and hitting the API. We should see the successful response on Zapier.
CleanShot 2021-11-09 at 16.38.03@2x.png
  • Next, click on the + icon beneath the zap to add a new workflow. Select the SendInBlue Zap from the list.
  • We will need to authenticate with SendInBlue from Zapier to access the workflow; for this, you can either create a new account or log in with your existing credentials.
  • Next, set the Action type to Add or Update in Sendinblue and fill in the details related to Email; here, we can also use the data sent from the Webhook. In the following screenshot, we select the EMail field data to be the email received from the webhook.
CleanShot 2021-11-09 at 17.16.35@2x.png
  • Similarly, you can add a Send Transactional Email in Sendinblue action to the workflow using the Seninblue Zap.

With this, whenever a new user subscribes to the Newsletter, he receives a confirmation Email and will be added to the contact list on Sendinblue.

And just like that, we could configure and build an entire Newsletter manager without writing code. This application can be extended in multiple ways, such as creating new email campaigns, filtering contacts, blocking users, and many more! The entire demo app of this tutorial can be found here. This is just one example of how you can automate your apps on Appsmith!

We hope that you will have a better idea of how to leverage automation in your Appsmith applications. For more information on automating your Appsmith applications, please contact me anytime at vihar@appsmith.com.

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n
8
November
2021
Resources

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

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n
Vihar Kurama
0
 minutes ↗
#
applications
#
community
#
crud
#
automation
#
beginners
Resources

Developers spend quite a bit of time building internal tools, admin panels, and applications for back-office tasks that help automate everyday essential business processes. These involve multiple efforts, from maintaining a special database to writing lots of frontend and backend code. But, what if we told you that you could utilize a modern stack to build such applications that can help with your backend, frontend and automation tasks? Sounds good right? It is!

We’re happy to introduce a great new stack to build applications: The Supabase, Appsmith and n8n stack (SAN Stack) for developers to build and maintain modern custom internal tools.

What is the SAN Stack?

SAN stands for Supabase, Appsmith and n8n, after the three emerging and notable software that makes up the stack.

Supabase: The open-source firebase alternative to creating a backend in minutes. Start your project with a Postgres database, authentication, instant APIs, real-time subscriptions and storage.

Appsmith: An open-source framework to build custom business software with pre-built UI widgets that connect to any data source, and can be controlled extensively using JavaScript.

n8n: An extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your custom functions, logic and apps.

This stack lets you build any application within minutes. You can use Supabase for the database and backend, Appsmith for UI and adding functionality, and n8n for automating background tasks.

One of Appsmith’s co-founders and head of product, Nikhil Nandagopal broke down the basics of app building into three steps.

CleanShot 2021-11-08 at 11.20.37@2x.png

This has gained quite some traction among developers, especially those looking to build internal tools or applications.

Why Supabase, Appsmith, and n8n?

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

Build a Simple Ticket Manager Using SAN Stack

There are so many tools and applications that can be built across the SAN stack. Here are a couple of examples: An Employee Survey Dashboard and a Ticket Management Admin panel.

Using the SAN stack, you can build any dashboard in just minutes.

As an example, I will show you how to create a support dashboard manager application.

Using this application:

  • Users will be able to create or raise new tickets for a particular query
  • The support team will be able to see these tickets and assign them to engineers
  • When the tickets are resolved, we will be sending an automated email to the users
CleanShot 2021-11-08 at 12.20.33@2x.png

Let's get started!

Set up your Backend on Supabase

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

  1. If you are new to Supabase, you can create a new account (it's free!) or sign in with your existing credentials.
  2. You will be redirected to the Supabase dashboard; here, you can manage all your projects.
  3. Create a new project, and set the name to Support Dashboard. Create a new table by clicking on the Create Table option on the side navigation.
  4. Supabase gives us many ways to add data to the tables, from writing queries to creating schemas using UI to simply uploading CSV files; developers can choose any option.
  5. For our support dashboard, we will be creating a table by uploading a CSV file on Supabase.
CleanShot 2021-11-08 at 12.21.48@2x.png

The DB is now set up; let's use Appsmith to connect this PostgresDB and build UI for the application. For this, we might need to note down the connection info from project settings on Supabase. Following is how it looks like:

CleanShot 2021-11-08 at 12.22.58@2x.png

Build UI on Appsmith and Writing Queries

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

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

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

  • Click on the + icon next to widgets and drag and drop a Tab widget. We can configure using the property pane by clicking on the cog icon on the top-right corner.
  • As seen in the below screenshot, we have added four tabs to support the dashboard.
CleanShot 2021-11-08 at 12.24.46@2x.png
  • Now, we will add a button that should open a modal and have a form to raise a new ticket when clicked. For this, just drag and drop a new button widget from the widgets section and move it on canvas.
  • Add a few input widgets and a button to submit the form; this is how the form looks after the UI is complete:
CleanShot 2021-11-08 at 12.25.29@2x.png
  • We now have the UI to create a ticket. Let’s write two queries on Appsmith that will allow us to create tickets and list tickets. To do this, click on the + icon next to the data sources and use the Supabase connection here to create a new query.
  • Rename the query to create_new_ticket under the query pane; here we can write SQL that can collect inputs using moustache bindings. Following is how it looks like:
INSERT INTO PUBLIC."tickets"("id","createdAt","user","updatedAt","description",
"status","priority","category","assignedTo")
VALUES('{{appsmith.store.ticket.id}}','{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_user.text}}', 
'{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_description.text}}','{{c_status.selectedOptionValue}}',
'{{c_proporty.selectedOptionValue}}',
'{{c_category.selectedOptionValue}}','{{c_assignee.selectedOptionValue}}');
On Appsmith, we can use moustache bindings anywhere across the app to bind data or write javascript code to customize and add functionalities to your widgets.
  • Lastly, we now set the onClick property for the button to execute a query and select the create_new_ticket. And just like that, we should be able to create new tickets on the application.
  • Now, let’s write one more query where we could list all the tickets that users create. We will name this query get_tickets; the following is the SQL snippet.
SELECT * FROM public."tickets";
  • Now, drag and drop a table widget onto the tab widget under the Assigned To Me tab. Open the property pane and add the following snippet to bind the tickets:
{{get_tickets.data.filter(t => t.assignedTo === 'confidence@appsmith.com' && t.status !== 'closed')}}

Fantastic, we should be able to see all the tickets assigned to the specific user! It’s that’s simple to write custom JS to configure our internal applications on Appsmith. Now let’s use a webhook and build automation that sends Emails from the ticket using n8n!

Building an Extendable Workflow on n8n

If you want to build an internal tool that requires sending emails, then n8n is the way to go. n8n is a tool that can be used to automate workflows between your favorite web apps (such as Slack, Google Drive, Dropbox, etc.). However, n8n can be used to connect almost any two web apps that you use. Now, let's create a workflow and use a webhook to send requests to n8n from Appsmith.

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

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

  • On the appsmith application, click on the + icon next to the data source and create a new API.
  • Set the API type to POST and paste the API webhook URL,
  • Now paste the following code snippet under the body tab to collect input from the dashboard.
{"message": "({this. params. message})","email": (this. params. email})","ticket": "((appsmith. store. ticket. id}}"}
  • Next, connect a Gmail node to the webhook and authenticate with your Google ID.
  • To pass the data from the webhook to the Gmail node, configure the message property by using the variable selector nodes on the left pane.
  • Lastly, make sure you set the workflow state to active.

And just like that, we should be able to send Emails using n8n without writing any piece of code.

CleanShot 2021-11-08 at 12.28.38@2x.png

Building this app from scratch, including writing snippets of code, is likely to take 30 minutes! Isn’t that fast?

If you're looking for a modern approach to building internal applications, check out Supabase, Appsmith, and n8n! These tools are straightforward, powerful, and can help you build apps faster than ever. So what are you waiting for? Start building your next internal app today.

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support
2
November
2021
Monthly Round-up

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

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support
Vihar Kurama
0
 minutes ↗
#
announcement
#
applications
#
app-development
#
community
#
crud
Monthly Round-up

We’re back again this month with updates from the last 30 days. We like to work hard! We’ve shipped many features, fixed bugs, and launched Hacktoberfest with a series of fun events. You can check them out here.

Widget, UI, and UX Improvements

#1 Menu Buttons on Table Widget 

Tables on Appsmith are one of the most loved widgets, and yes, we’ve upgraded them again! We can use menu buttons inside the table widget on any particular column to create menus and customize them. Open the column settings from the table’s property pane and set the column type to the menu button to see them in action! And just like that, we should be able to see a menu button on our table. Additionally, you can add more items to this by configuring the Menu Items property. That’s not all, and you can further customize the items to have icons, border radius, box shadows, and more!

#2 A New Sparkling White UI

Notice anything new? Yes, we have improved our whole design system to help developers focus more on their application editing on Appsmith. Right from searching through apps on the dashboard to building them using queries and widgets, everything is white! 

#3 Option to Hide/Unhide Properties from Property Pane

At Appsmith, we consistently focus on adding new properties and features to widgets, and sometimes it can get a bit overwhelming to see all of these at the same time! To make it less cumbersome, we’ve added an option to hide and unhide a few properties. Developers can concentrate on what’s important. To use this feature, toggle the dropdown arrow inside the property pane. You will see an option to collapse the various options within the pane. For example, in the picture below, only the header option has been made visible.

New Appsmith Functions!

You can bid goodbye to refresh buttons! Developers had to use refresh buttons on Appsmith Appsmith to be able tore-run the queries. We recognized this pain point. Now there’s a cool new feature to periodically run APIs and DB queries. You can configure these by using the  setInterval and clearInterval functions!

The setInterval function executes a trigger callback at a given interval. Here’s how you can use it while dynamically binding queries onto widgets:

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

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

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

Appsmith Deployments

#1 Helm Chart Support

Helm charts are now added for Appsmith deployments on Kubernetes deployments. These include application deployments with basic default support. Additionally, developers can add custom configuration for persistent volume data, custom ingress controller and secure with TLS certificate

#2 Support for Deploying Appsmith on ARM Architecture 

Previously, many developers had reported issues regarding docker-based installation of Appsmith on ARM architectures. Now, we had rectified them and had added extensive support for M1 MacBook users.  Following are the changes that we made to the scripts for docker installation:

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

Quit Buggin! Cheers to our Updated Debugging Experience

We have improved the debugging experience by adding hint and errors messages for different cases when working on queries and binding them onto widgets. To make these messages more efficient, we added a new attribute named readableError to the ActionExecutionResult object, returned to the client post after actions are executed. With this, we should be able to understand and solve complex errors quickly. Not just that, we have seen many APIs failing because of using duplicate headers or query parameters, so we have added a few hint messages to help you debug faster.


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

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

Learn How to Push Content from Multiple Sources to Discord in One Go
20
October
2021
Tutorial

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

Learn How to Push Content from Multiple Sources to Discord in One Go
Vihar Kurama
0
 minutes ↗
#
community
#
applications
#
dashboard
Tutorial

Every job has a set of critical and essential tasks that can feel mundane to execute. As a developer advocate, I love talking to developers and new users and helping them out on their journey with Appsmith. While I am busy doing this work, some tasks often slip into the basket of “I’ll get to it soon.” These tasks often include pushing out information about our new content in specific channels on Discord. This is crucial work and helps us, but it gets deprioritized when there are many other things to do. For social media, a tool like Hootsuite has been a game-changer for us. We also built our custom social media scheduler with Appsmith and automated it using n8n. We also wanted to solve this for our community on Discord. And that’s when we came up with our comprehensive push messaging system, which automatically pulls up content from various channels like our blogs, Twitter handle, and Luma events. We can just share it with users on our Discord server in just one click!

The Discord Message Pusher has been an excellent internal tool for us; the entire content and marketing team uses it, and guess what? No more pending tasks on our to-do lists! In this blog, I am going to discuss the steps involved in building this application on Appsmith. And hopefully, like me, you can make a customizable internal tool for your content team.

Let’s start! 

Connecting Data Sources (APIs) on Appsmith

In the first step, we will be creating a new application on Appsmith and integrating it with different data sources like Twitter, Youtube (YT), and Webflow. We’ll be using APIs to fetch all the information and render them on the Appsmith widgets. First, let’s set up a new application to get started!

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

Fantastic, the app is now set up, now let’s fetch all the information from a particular YT channel and render them onto a list widget.

Setting up Youtube <> Discord Push Messaging System

In this step, we’ll be connecting to YouTube using APIs. Appsmith provides an easy-to-use IDE-based environment to connect to APIs and configure them. Now follow the below steps to fetch all the Youtube video links and their information.

  • Click on the + icon next to the data sources section and choose the Create New under the APIs section.
  • Paste the following URL:
https://www.googleapis.com/youtube/v3/search?key=APIKEYHERE&channelId=UCMYwzPG2txS8nR5ZbNY6T5g&part=snippet,id&order=date&maxResults=20
  • This API will allow you to fetch all the videos from a particular channel using its ID. We’ll need to create an API key from the Google Console account to put it in use.
  • Rename the API to getYTData by double-clicking on the existing one. 
  • Additionally, Appsmith automatically parses the URL and adds them into the parameters tab, where you can update the ID and the API key. Following is the screenshot of how it looks like: 
  • Here, we can configure all the settings for this API. Additionally, we can turn on pagination settings if we’re working with massive sets of data.

We now have all the videos on Appsmith Youtube Channel (Appsmith YT ID: UCMYwzPG2txS8nR5ZbNY6T5g). Now, let’s use this query to render all the information on the application by following the below steps:

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

> The tabs widget allows us to create different navigation tabs. We’re using this as it’s more suitable for adding navigation between social platforms.

  • Next, open the property pane of the tabs widget by clicking on the cog icon on the top-right corner of the device. This is where we can configure the entire widget.
  • Here, under Tabs property, we’ve added found different tabs to navigate between our social contents. Also, the `Default Tab` property is set to Youtube.

Listing all the Youtube Information to List Widget

We have our tabs ready. We’ll display all the videos from the Appsmith channel to the List Widget under the Youtube tab. Follow the below steps:

  • Drag and drop a new list widget inside the Youtube tab, adjust the width to half so that the other half can be used to write the messages to push them on Discord. 
  • Open the List widget property pane and set the List Items property to:
{{getYTData.data.items}}
  • Initially, we see the list widget already populated with pokemon data. To make changes to them, we just need to edit the first item, and the others automatically get populated. 
  • Delete all the widgets on the first item on the list widget, and add one image widget and three text widgets. Now set the following properties to these widgets:

Image Widget Value : {{currentItem.snippet.thumbnails.high.url}}

Text Widget 1 Value: {{currentItem.snippet.title}}

Text Widget 2 Value: {{moment(currentItem.snippet.publishedAt).format("LL")}}

Text Widget 3 Value:

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

Here, we’re accessing the currentItem, which evaluates the element in the list values. On the first text widget, we’re displaying the Title of the Youtube Video; the second widget corresponds to the time it was published. On Appsmith, we can use moment to display the DateTime field in the necessary format. Cool right? Lastly, we display the YT video URL and add the id to the end of the URL.

Here's how the list widget looks like:

Excellent, next. Let’s learn how to push messages from Appsmith to Discord. Follow these steps:

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

Here, in the code snippet, we have a default message; this will help us push it directly to Discord. Also, we’re accessing the title and youtube video id from the list widget. Therefore whenever a new list item is clicked; the message automatically gets an update for you.

Let’s now use a Webhook to push these messages on a discord channel. For this, you’ll need a discord server and a dedicated channel.

Now follow these steps:

  • Navigate to the channel on Discord and click the cog icon next to it. 
  • Click on Integration and choose webhooks, and copy the given URL.
  • Click on the + icon next to data sources and click create new. Add the copied URL and set the request method to post. Now open the `Body` tab under the API configuration and paste the following:
{"content":"{{Input1.text}}"}
  • Here, we’re sending the contents from the Input widget to this particular request. Now, as soon the API is called, the data is to the Webhook, and the contents will be posted on this specific Discord channel.
  • Rename this API to pushYTVideo
  • Lastly, let’s go back to the page and configure the button onClick to call this API. Open the button widget property pane and set the onClick property to call a query, and choose pushYTVideo

Awesome! When you choose or select a video from the list widget, the message automatically updates from the default value and will be pushed to the discord channel. 

Setting up Twitter <> Push Messaging System

This part is almost similar to how we’ve listed all the videos from Youtube and drafted a custom message; the only thing that changes is the data source. Instead of YouTube, we’ll be using the Twitter API.

Now, let’s copy-paste all the widgets from the YouTube tab to the Twitter tab; for this, select the YouTube tab, hit CTRL/CMD + A, CTRL/CMD + C, open the Twitter tab, and hit CTRL/CMD + V. This will copy the list widget, the buttons, and the inputs.

Just like that, all our widgets will be copied to the tab. Now, let’s add the functionality to fetch all the tweets and push them to the Discord channel by following the below steps:

  • Click on the + icon next to Datasources and hit Create New, rename the API to getTwitterData, and add the following URL:
https://api.twitter.com/2/users//tweets
  • We’ll need to add the Authorisation key to the API. For this, we’ll need to have a developer account on Twitter and create the API keys. 
  • We can configure this under the API settings.

Following is the screenshot:

Now let’s update the widget properties. 

To show all the tweets on a list widget, open the property pane and set the Items value to {{getTwitterData.data.data}}. Next, add two text widgets to the list widget and set the Text Value to the following:

Text Widget One: Tweet ID {{currentItem.id}}

Text Widget Two: {{currentItem.text}}

On the right, in the Discord Push Message Input placeholder to following:

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

This is how the application looks like now:

With this, we should be able to schedule/push our social posts from Appsmith to Discord. In case if you’re using other services like Webflow, you can utilize APIs to fetch objects from CMS and use the same template. Building this app from scratch, including writing snippets of code, is likely to take 30 minutes! Isn’t that fast?

If you liked this tutorial, and are planning to build this, let me know. I’d love to help you make it as complex as you’d like.

Write to me at vihar@appsmith.com.

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform
18
October
2021
Announcement

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

Our New JS Snippets Feature Helps You Write JavaScript in the Appsmith Platform
Vihar Kurama
0
 minutes ↗
#
announcement
#
beginners
#
applications
#
app-development
#
features
Announcement

Building an app on Appsmith is great fun. Why? Because it takes minutes to build a clean and consistent UI, and less than a few hours to make data connections.  We might be tooting our own horn, but what we love about Appsmith (ask our in house devs!) is that we can use JavaScript anywhere on the platform to add additional transformations, functionalities, and actions using the moustache syntax. We’re aware that not everyone is a JavaScript enthusiast, everyone prefers a language of their choice! So we’ve come up with our new feature: “JS Snippets.” With this, you can get some help with writing JavaScript inside Appsmith. In this blog, I will tell you how we made this feature and how you can use it!

The story!

We often see many questions in our community forums and discord channels seeking help with binding nested APIs, write data transformations, configure chained actions. Hence, we thought of building a library of snippets inside Appsmith applications that you can use directly and customize based on your data source. 

Initially, we thought of the issue in a straightforward way, but at Appsmith, we always like to go the extra mile. So, we brainstormed this idea multiple times and decided to extend it to customize and add snippets particular to widgets and data sources. But, in order to do this kind of customization, we need a database application that validates and filters these snippets. So we built an internal Appsmith app that manages all the JS Snippets. This is how the application looks like:

Here, as we can see, on the left, we see a list of all the available snippets today. When these are clicked, we will see the details of the snippet and have options to verify it and publish it live directly to the JS Snippets library.

To customise these snippets, we define three formats for each of them. 

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

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

Snippet:

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

Args:

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

Here’s a screenshot of how the snippet is rendered on Appsmith:

Users can now directly copy this snippet onto the widget, or customize the arguments, test it out, and use it in the widget.

How to use JS Snippets on Appsmith

We can find JS snippets inside the Appsmith applications from Omnibar. Click on the Search/Omnibar from the top navigation and choose the `Use snippets` option. Here, you can filter snippets based on data sources and UI widgets. 

The other easy way is to access snippets from the slash commands. Just type in / inside the bindings, and choose the insert snippet option. 

Special credits to Arun Vijayan, Sumit Kumar, Ajinkya, and Nikhil Nandagopal who had worked so hard on this feature!

Hope you’ll build some super cool applications using the JS Snippets on Appsmith! If you do, don’t forget to tell us about it, we would love to feature your work! Your contributions and feedback help us make Appsmith better and we really appreciate it.

Join the community! Come chat with us on Discord, or jump in on Github directly!

You can also follow us on Twitter and Linkedin.

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

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

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

We’re back again this month with updates from the last 30 days. We like to work hard! We’ve shipped many features, fixed bugs, and launched Hacktoberfest with a series of fun events. You can check them out here.

Powerful Widget Options

From grouping widgets to copy-pasting them to undoing or redoing them on the canvas, we’ve got everything covered for you to customize your applications on Appsmith. This makes your app-building experience much more accessible, smoother, and of course, fun!

To use the widget grouping feature, you have to select all required widgets on the canvas with your pointer. This will create a widget group highlighted in a rectangular dotted box; next, you can drag the rectangular box anywhere across the canvas to move them all in one go. Additionally, widget groups can also be duplicated and copied, or deleted. You can find all these options on the top-right corner of widget groups.

There’s no such thing as error-free creation; it’s common to make mistakes while building apps. Often,  we accidentally delete widgets while building the UI and have to redo everything. With the new undo-redo feature, you can make changes in the canvas using simple keyboard shortcuts. 

Undo - Command / Control + Z

Reo - Command / Control + Shift + Z

We also resolved some critical issues for copy-pasting widgets. Now, the widget won’t overlap, and all the functionalities such as deleting them, customizing them would be working as expected!

New Widgets and Customisation Options

We got four more new widgets last month! A stat box widget to display all the metrics on your dashboards, a checkbox widget to configure multiple checkbox inputs, a beautiful audio recorder widget to record audio on your applications, and finally, a tree select widget for selecting options in a nested tree-like structure. Cool right? Here are the quick previews of these new widgets.  

Additionally, we’ve upgraded all the widgets styling options to give developers more control over customization. Now, you can add background color, shadows, borders, border radius to almost all the widgets where there is a chance of customization. Of course, we’ve tried them. We have a new product designer who joined us recently who had built this beautiful dashboard on Appsmith.

Don’t forget to chat with us on our discord channel if you want to see more such internal tools and designs!

Configuring Page

We’ve added a new option to configure all your pages in the application in one place. Using this, you can rename, reorder, duplicate, and delete pages within few simple clicks. To access it, click on the application name and select the page option from the dropdown to configure pages under the application. Below is a screenshot that shows how easy it is to manage your application pages on Appsmith!

Introducing JS Snippets!

JavaScript is like fuel at Appsmith. We can use JS anywhere across the application, from binding data to writing functions to implement complex JS transformations using the moustache bindings. But not everyone is a JS expert; even we sometimes google to get stuff done. Hence to make it handier we’ve introduced a super cool feature, the JS Snippets. Some common use-cases can help you with fundamental transformations, functions, binding, and many more. 

Here’s how you can access this:

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

Before you use them, you can also test them out with your connected data. 


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

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

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.

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

Using the Notion API to Build a Content Management System

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

At Appsmith, we use Notion to manage our content calendar. We also work with a few external agencies and freelancers for some of our content. It is impossible to create granular access control and develop a workflow on Notion to run the process smoothly and thus, as soon as Notion released their API, we decided to build an application that helps us manage our entire content management in one place while giving our collaborators the necessary access only.

Our application uses our Notion (mock) Table as a data source and lets you plant, submit and edit articles on the application, while at the same time has a provision for integrating with an email service of your choice (we use SendGrid here) to send reminder emails or updates to people in the project.

In this tutorial, we’ll build an essential Content Management System, which will let you:

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

Check out the live demo here. Here's a screenshot of how the app looks like:

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

Let’s dive right in!

Configuring the Notion API

Notion API lets us connect to Notion Pages and Databases. Now, let's look at how we can set up the API, gather all the required keys and connect to Appsmith.

  • Firstly, choose the workspace you want to work with on your Notion. If you want to test it, feel free to create a new workspace.
  • Now, open the workspace setting by clicking on the Settings and Members option on the left navigation bar. We should see a new modal with all the settings.
  • Find the select the Integrations option under Workspace options in the settings modal. This will redirect to the integrations tab.
  • Next, choose the Develop your integration option. Now we'll be redirected to our integration page.
Image One.png
  • On the integrations page, select the New integration option and add a name and associated workspace you want to work with and hit submit. This will create us a new secret key!
Image Two.png
Image Three.png
  • Now head back to our workspace, choose a specific page and click on the share option (we can find this on the top-right corner)
  • Next, hit the invite button, a new modal opens, here we can find our created integration. Select the integration and confirm the invite.
  • With this, we should be able to add an integration to a Notion page; also, make sure to save your integration key; we’ll have to use it for using the Notion API
In Notion, integration has a secret key; when added to a workspace, we could perform all the actions (create, read, update). We'll use the secret key of the integration to connect with third-party applications.

Setting up a Notion Page

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

  • On your page, add a new table with the following fields that are required for our content manager:
Title: Text Field
Description: Text Field
Author: Text Field
Category: Text Field
Status: Dropdown Field
Notes: Text Field
Deadline: Date Field
Author Email: EMail Field

You can also use this Notion page of ours, which can be used as a mock database. You can click on this link duplicate to one of your workspaces. Also, make sure to add the integration to this page to use the Notion API.

Now that we have our page and integration-ready, we’ll start building an App on Appsmith.

Querying Data from Notion API

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

  • Firstly, we should have an Appsmith account; if not, sign-up here (it's free)! Next, create a new application under an organisation by clicking on the Create New button.
  • We’ll now find Widgets, APIs, and DB Queries on the left navigation; we can use these features to build our application. We’ll start by creating a Notion API.
  • Click on the + icon next to the APIs and click on Create new and name the API as query_data_from_database
  • Now, add the following in the URL for the API:
https://api.notion.com/v1/databases//query
  • Here, db-id is the database id for a notion page. To find this, we’ll have to open our Notion Table as a page and pick the database id from the URL.
  • Following is an example URL showing the id of a Notion page.
https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                  |--------- Database ID --------|
  • Next, add the following keys under the Headers tab.
	Authorization: 
	Notion-Version: 2021-05-13
	Content-type: application/json

Below is a screenshot of how the configuration looks like:

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

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

Binding Notion APIs onto Appsmith

Now that we have an API containing data from the Notion Table let’s bind this onto a list widget to display all the details. Follow the below steps:

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

Here, we’re using the query_data_from_database and mapping it to return item properties. This how the response looks like:

Image Five.png

Awesome, now let’s add some widgets onto the list widget and show the details from the Notion API. Drag and drop six text widgets and set its Text property to the following:

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

Add six more text widgets next to them, where we’ll be binding their corresponding values from the Notion API.

Now in the text widget next to the Title text widget, set the Text property to the following:

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

Here the currentItem corresponds to a unique item in the list widget, and next, we access the Title property from the Items on our list and parse the JSON. Below is the screenshot of how the response looks like:

Image Six.png

Great, we can now see our Titles from the Notion API on items of our list widget; similarly, let’s set the Text property of other text widgets to show the contents from the API:

  • Description text widget set the Text property to:
{{currentItem.Description.rich_text[0].text.content}}
  • Status text widget, set the Text property to:
{{currentItem.Description.rich_text[0].text.content}}
  • Author text widget, set the Text property to:
{{currentItem.Author.rich_text[0].text.content}}
  • EMail text widget set, the Text property to:
{{currentItem["Author Email"].email || "Not Added"}}
  • Deadline text widget set, the Text property to:
{{currentItem.Deadline.date.start}}
  • Category text widget set the Text property to:
{{currentItem.Category.rich_text.map(row => {return row.plain_text})[0]}}
The code for parsing through items changes based on the API response from the Notion API.

We’ve added some additional styles and added a button widget at the end so that admins can send Emails to the authors directly from Appsmith. Below is how the App looks like after we parse all the data from the Notion Table onto the Appsmith List widget:

Notion App Screenshot.png

We can also add a refresh button to the query_data_from_database query. For this, drag and drop the Button widget onto the canvas, set the Label property to Refresh. Next, open the onClick property, click the Call an API option, and select the query_data_from_database API. Now, whenever we click the refresh button, we should see all the new data updated on the Notion page.

Adding an Item into Notion Database

For our content calendar, we can list all the details from the Notion Table. Now let’s add a feature to add new items on the table from Appsmith. Follow the below steps.

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

Following are the fields we’ve created for reference:

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

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

Let’s create a new API that’ll add a new value to the Notion page when making submissions from the Appsmith form. Follow the below steps:

  • First, create a new API under the Author Submission page and name it as add_an_item_to_database
  • Next, add the following keys under the Headers tab.
Authorization: 
Notion-Version: 2021-05-13
Content-type: application/json
  • Now in the body tab, paste the following code:
	"parent": { "database_id": "" },
 "properties": {
           "Author": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{authorInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Author Email": {
          "type": "email",
          "email": "{{emailInput.text}}"
        },
        "Category": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{categoryInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Status": {
          "type": "select",
          "select": {
            "name": "Not Started",
    "color": "blue"
          }
        },
        "Description": {
          "type": "rich_text",
          "rich_text": [
            {
              "type": "text",
              "text": {
                "content": "{{descriptionInput.text}}",
                "link": null
              }
            }
          ]
        },
        "Deadline": {
          "type": "date",
          "date": {
            "start": "{{dateInput.selectedDate}}",
            "end": null
          }
        },
        "Title": {
          "type": "title",
          "title": [
            {
              "type": "text",
              "text": {
                "content": "{{titleInput.text}}",
                "link": null
              }
            }
          ]
        }
      }
  }

This is how Notion API allows us to add new items to a database. Here we'll also have to add the database id in the place of <db-id>. If we observe the body inside each property's content field, we added a moustache operation from which we'll take the input from the Appsmith input forms.

Now open the Submit button’s property pane, update the onClick property to Call an API, and choose add_an_item_to_database API. With this, we should add new data to the Notion table using the Appsmith form!

Send Grid Email Integration

Our content manager now shows all the data and also has a feature to add new content ideas. Now let’s add an email integration to communicate with Authors via Appsmith. We’ll be using Sendgrid to achieve this.

Creating a Modal for sending emails:

  • First, create a new modal when the Send Mail button is clicked on the list item. We can do this by setting the onClick property to Open Modal and selecting Create New.
  • Set the modal type to Form modal by toggle the option in the property pane.
  • Inside the Modal widget, let’s add some text widgets and input widgets from which we should send Emails.
  • Following are the fields we’ve created for reference:
Sending To: Input Widget
Email subject: Input Widget
Email content: Rich Text Editor Widget
  • Now, let’s name these widgets (so that we can use them to refer in the POST API method) to the following:
Sending To: emailInput
Email subject: subjectInput
Email content: contentInput

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

Image Nine.png

Configuring the SendGrid API:

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

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

Authorization : Bearer 
Content-Type : application/json
  • Lastly, set the body to the following:
{"personalizations": [{"to": [{"email": "{{emailInput.text}}"}]}],"from": {"email": "test@example.com"},"subject": "{{subjectInput.text}}","content": [{"type": "text/plain", "value": "{{contentInput.text}}"}]}

This is the default configuration from SendGrid that lets us send Emails, but here we are dynamically passing the to-email, from-email, subject and content field from the widget’s we’ve created on the Modal. Now, set the onClick property of the form to Call an API and choose the send_email query. With this, we should be able to send Emails from Appsmith successfully!

Conclusion

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

We've seen how easy it is to build an application on Appsmith, specifically a CMS with Notion as a backend. This guide covered how to create a CRM and connect it to a Notion API and how to create and read data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

We have made a slightly more robust application public here; try it out and let us know what you think. You can also check the live demo of our app here.

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.

Build a Custom Application using Slack API
10
August
2021
Tutorial

Build a Custom Application using Slack API

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

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

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

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

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

Building a Rad UI

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

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

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

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

‍Here's a short tutorial!

‍Connecting Slack API‍

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

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

‍Here’s what our oauth configuration looks like:

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

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

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

Follow the steps listed below:

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

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

To do this, follow these steps:

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

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

image.png

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

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

image.png

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

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

Follow these steps:

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

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

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

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

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

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

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

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

How to Build a User Waitlist Manager on Appsmith
28
December
2020
Tutorial

How to Build a User Waitlist Manager on Appsmith

How to Build a User Waitlist Manager on Appsmith
Ravi Vyas
0
 minutes ↗
#
guide
#
applications
#
tools
#
tutorial
Tutorial

Waitlists are a powerful way to test your app or feature with a small group of users.

In this guide, we’ll build a waitlist manager that integrates with a SQL DB to provide access control. If you are new to Appsmith, read about Appsmith's core concepts before following this guide.

Features of the waitlist manager

Our app will access data from a MySQL DB that stores all user data.

  • Add or edit users on a waitlist.
  • Turn on beta features by version number
  • Enable/disable logging.
  • Provide a few KPIs, like the number of users by version

The application consists of 3 pages: A dashboard that lists a few useful metrics, an Add users page, and a Manage Users page. The 3 pages will be powered by 7 queries.

This guide will walk you through the structure of the database & the queries used. It won’t dive deeper into how the product will access this data. We assume your product can already talk to your backend, if not you can build APIs using solutions like PostgREST or build your own with NodeJS, Express & Sequelize.

Requirements

Database

This uses a Mysql DB with a single table, Users, as described below.

Column NameTypeDescription
Email IDtextUser’s identifier in our product
NametextUser’s full name
Unique_idintUnique identifier for each user
Enable_BetaBooleanA value that is 1 for users with access to beta and 0 for the rest
From_Version_codeIntThe version number when the user got access
LoggingBooleanA boolean that enables logging for the user
created_atDateUser Creation Date
updated_atDateDate User was last updated

Queries

This application requires seven queries listed below.

List All users Rather than running a select(*) we are listing all columns with human-friendly names. Query:

SELECT id as ID,
  name as name,
  email as Email,
  logging as Logging_Enabled,
  from_version_code as From_Version,
  enable_beta as Enabled_Beta,
  created_at as Created_on,
  updated_at as Last_Updated
FROM waitlist_manager

Add User

This insert query adds users to the waitlist and sets enable_beta & logging to false. The function NOW() set Created_at & Updated_at to the current date. You can modify this behavior if needed.

INSERT INTO waitlist_manager (
    name,
    email,
    logging,
    enable_beta,
    created_at,
    updated_at
  )
VALUES (
    '{{ input_name.text }}',
    '{{ Input_email.text }}',
    false,
    false,
    NOW(),
    NOW()
  );

Update User

This query updates all the properties of the user based on the update form. This dynamic query sets the status of from_version_code to the given value if enabled_beta is set to true, else from_version_code is set to null. The updated_at column is set to NOW() to capture the date of the update.

UPDATE waitlist_manager
SET enable_beta = { { Dropdown_enable_beta.selectedOptionValue } },
  from_version_code = { { Dropdown_enable_beta.selectedOptionValue == = "true" ? Input_version_code.text :null } },
  email = '{{Input_email.text}}',
  logging = { { Dropdown_logging.selectedOptionValue } },
  updated_at = NOW()
WHERE id = '{{ text_user_id.text }}';

List Users By Version

This query provides the number of users per beta version

SELECT from_version_code as Version,
  count(id)
from waitlist_manager
where from_version_code is not null
group by 1

Dashboard Queries

This set of 3 queries will help us build a set of KPIs to monitor:

Total Users Query

SELECT count(id) as count FROM waitlist_manager

Beta Enabled Users

SELECT count(id) as count FROM waitlist_manager where enable_beta = true

Logging Enabled User

SELECT count(id) as count FROM waitlist_manager where logging = true

Interface

Add Users Page

This page is a form with two input fields, for the user’s name and email address. On submit, we add the user to our database using the Add_User query.

image1.png

To make sure the user is entering a valid email, we set the field type to email.

image3.png

Manage Users Page

This page is the workhorse of this application. The table widget lists all the users and the form updates the user details & permissions for the selected user.

image6.png


The page is dynamically modified based on certain states.

1. To provide a better user experience, The form is hidden when the table does not have a row selected. To hide the form, set the Visible JS property to

{{table_users.selectedRow.ID > 0}}
image10.png

2. The “Beta Enabled” dropdown disables the “Beta Version” field when set to No.

To achieve this, set the Disabled JS property to

{{Dropdown_enable_beta.selectedOptionValue === "false"}}

as shown below.

image9.png

Finally, we connect the update button to the update_user query.

image5.png

Set the onSuccess property of the form to run the All_users query to refresh the table on any modifications.

Quick Dashboard Page

This page provides the following metrics.

  • Total users
  • Users who have beta enabled
  • Users who have logging enabled
  • Count of users by beta version.
image8.png

For the three metrics, connect the three labels to the three aggregation queries listed above. Unlike a table, setting a label to the result of the query needs to point to a single value rather than an Array. Here it is set to {{kpi_count.data[0].count}} as the queries will always return a single row and a single column named count.

image4.png

Finally, add a table and connect it to the List Users By Version query described above.

This completes the application. You can deploy the application by clicking on the deploy link on the top right. Once deployed, it will be visible to everyone in your organization.

For more details on sharing, you can refer to the Access control documentation.

You can play around with it using the link provided below. A few possible extensions are also listed below for you to try out.

Demo Application

You can try the application out here.

Possible Enhancements

As an exercise, you can clone the application and try to extend it. Here are some possible directions you can take.

Add more Features to the current application.

Control more features by adding more columns. For example add an Enable_Premium column, to give the user access to premium features.

Separate Features table

A possible larger refactor of this application is moving the features out of the Users table. The sample table diagram below shows a possible structure.

image7.png


This enables the addition of another form to add new features if needed.

Add More Charts

Since we are capturing the creation date of users, you can add a chart that shows the number of new users added each day.

Create a Public User Submission page.

Making the Add users form public allows users to direct join the waitlist. The best way to do this would be to create a separate application with just the Add users form.