How to Use Appsmith, Airtable, and Notion to Build a Video Sorting Tool

The popularity of video content rose even before the pandemic, but the pandemic certainly has accelerated consumption. According to Forbes, 82% of content generated this year is likely to be video.

Video is ruling the social media landscape and will stay for a while. Marketing companies especially take advantage of this trend by incorporating video content production into their strategy.

There have to be tools that take the idea into motion with all great ideas. Video approval tools are a great way to quickly organize workflows and ensure seamless creation, production, and publication of video content.

In this article, I will teach you how to make a video approval workflow using Airtable, Notion, and Appsmith.

As a low code, open-source framework Appsmith makes it simple to create internal apps as support for any platform, like the collaborative workspace Airtable.

Let's deal with a specific case: The marketing office has to manage a list of videos uploaded on Airtable by an external supplier.

This is what the workflow could be:

1. The videomaker uploads a new video on Airtable.
2. The marketing employee views it, writes notes for the supplier, and changes its status.
3. The marketing head needs a synthetic view of the video's progress on Notion.

The Video Approval App

Let's see the app first, then I'll show you how to build it in the next section.

With this app, you can review, edit details, and approve uploaded videos in one place.

In the following sections, I will go through the app's different features.

There would be a record for each video uploaded; we can view these videos on the box on the left by clicking on one of the uploaded videos.

It is also possible to filter the list just using the filter functionality.

The description field is editable.

With the 'Approve' button, you can approve the video and see changes in the status.

Get Data and Updates in Airtable

A new video that the video maker has uploaded shows up on the Appsmith desk to review immediately.

After the approval of a video, the information instantly flows to Airtable in the same way.

Change Video Status, Leave Comments

After selecting the video, users can 'Request a new update' and change the status. Users will also be able to leave comments.

Download the Data in CSV or Excel Format

Each table can be exported in CSV or excel format by simply clicking on the 'download' button.

Customize the template by adding any data visualization modules to connect other third parties:

To monitor the approval activity, Appsmith provides data visualization modules that you can customize.

Imagine that the marketing chief needs to be informed instantly of the video approval process; in particular, they want to know how many and which videos have 'approved' status.

You can connect your Appsmith platform with the third party you prefer. For example, you can do it with Notion.

To see the Applications in action, you can follow this link.

How to Build the App:

Let's keep a few basics in place.

• Create a new account on Appsmith (it's free!), if you are an existing user, log in to your Appsmith account.

• In Appsmith, create a new application. You will see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources and Widgets.

• In another tab, open Airtable. If you don't have an account created, create an account and log in.

• In another tab, open Notion. If you don't have an account created, create an account and log in.

  
  

Now, let's begin building the app. Open Appsmith and go to the following sections: Widgets, Datasources, JS Objects.

Create an API interface

Appsmith can be used to test API, as it can be done with tools like Postman, but with Appsmith, it is possible to prototype the frontend in the meantime. I think this is a powerful feature!

As you can see in the box below, the app has a list of API calls executed on Airtable and Notion API. Each one performs a different action in our Video Approval App.

To do this, you have to login into Airtable, create a workspace, and then create three tables that represent the information needed that needs tracking. In this example, we name them 'log', 'sailingvideotable' and 'countRowStatus'.

These tables are supposed to be used by dedicated users.

Table 'log' is used when someone wants to leave a comment on a particular video, it has the following data structure:

• 'id' as 'single line text' type

• 'Name' as 'long text' type

• 'Reason' as 'reason' type

• 'Status' as 'single line text' type

• 'Date' as 'long text' type

  
  

Table 'sailingvideotable' is used to collect information related to the videos that have to be approved, it has the following data structure:

• 'myid' as 'single line text' type

• 'Status' as 'single line text' type

• 'Name' as 'single line text' type

• 'Description' as 'long text' type

• 'Attachments' as 'attachment' type

• 'hook' as 'link to another record' type

• 'hook' as 'lookup' type

• 'isApproved' as 'formula' type

• 'isNotApproved' as 'formula' type

• 'isOngoing' as 'formula' type

• 'isNew' as 'formula' type

  
  

Table 'countRowStatus' is a rollup of 'sailingvideotable' and it is used to get an insight on the status of the approval process, it has the following data structure:

• 'hook' as 'single line text' type
• 'sailingvideotable' as 'link to another record' type
• 'isApprovedTot' as 'rollup' type
• 'isNotApprovedTot' as 'rollup' type
• 'isOngoingTot' as 'rollup' type
• 'isNewTot' as 'rollup' type
• 'Total' as 'formula' type

When the tables are ready, we can start adding videos in 'sailingvideotable.' Videos have to be attached manually by Airtable in the attachment field and paired with a unique ID.

Then you have to write the word 'sum' in hook fields. In this way, we are creating the rollup for 'countRowStatus.'

After uploading a list of rows with video files, we need to visit the API page of Airtable.

On this page, you can test the Airtable API and find the CURL links.

Appsmith allows you to import the curl link and find a Postman-like page automatically pre-configured.

As an example, if we want to get the record inside the 'sailingvideotable', as shown below, in the section 'List record' of Airtable API, you will find the curl link. Copy it.

Then go back to Appsmith. In the 'data source' section, paste the curl link by clicking on the 'CURL Import’ button.

Now you see the pasted curl link.

Once you've imported the curl link, you can go to the 'Params' section. Click on 'Run' to see the API call parameters.

The same can be done with the following connections used in the Video Approval App. The table below shows the list of API calls, the call type, what it does, and on what table it acts.

When a video is approved, we want to create a card on the Notion dashboard. To do this, we need a final API call that posts a card onto the board.

Let's create a page in the Notion app; Here's an example.

Create a Board; you will see two views: 'Default view' and 'Board.'

Notion names the fields of a table as properties.

For example, you can create four properties, with the following data structure:

• 'Name' as 'Title' type

• 'Status' as 'Multi select' type

• 'Description' as 'text' type

• 'url' as 'URL' type

  
  

Now, find the 'database_id' in the URL of a Notion page and save it for later. You will need it for the Appsmith API call.

Then you should create a Notion authorization token at the integration page.

Finally, you have to enable the Notion integration app with a specific page.

1. Open the page you wish to link to the app, and click on the 'share' button.
2. Then, click on the 'invite button' and select the integration app.

Note: If you don't use the share option, the secret token is not authorized to see your page.

When you've done the step above, you have to proceed to Appsmith.

Now go to the 'Datasources' section to create a new API.

In the header section, paste the authorization token, the content type, and the API version.

Then in the body paste a JSON, that is the representation of the table created in the Notion page, here's an example:

 {
	"parent": {
		"database_id": "<YOUR PAGE ID>"
	},
	"properties": {
		"Name": {
			"title": [{
				"text": {
					"content": "<THE CONTENT YOU WANT TO SAVE IN A NOTION CARD>"
				}
			}]
		},
		"Description": {
			"rich_text": [{
				"type": "text",
				"text": {
					"content": "<THE CONTENT YOU WANT TO SAVE IN A NOTION CARD>"
				}
			}]
		},
		"url": {
			"url": "<THE URL YOU WANT TO SAVE IN A NOTION CARD>"
		},
		"Status": {
			"multi_select": [{
				"name": "Approved"
			}]
		}
	}
}

To know more about configuring the body, check the documentation available on Notion.

Draw the app and make it work!

Now we start literally drawing our app.

With Appsmith, you can easily drag and drop pre-built UI elements and quickly plug data into these widgets to your data source and add actions that trigger POST API requests.

You can start by sketching a mockup, for example, with PowerPoint, including the following sections:

1. Title of the application
2. The image that explains how the workflow works
3. Pie chart with the information related to the status
4. Table with 'sailingvideotable' records
5. Section with information related to the video selected. Here the user can update the video's description or approve the video generating a card on Notion.
6. Where the user can change the status to ongoing or not approve and leave comments
7. List of comments left by users

Now that we have decided the layout let's build the app by dragging and dropping the widgets into the Edit page of our app.

For example, we can use the 'table' component to render Section 4 and 7 from our mockup.

To configure the components, you have to click on the gear button; on the right side of the Edit page, a list of options will appear.

If you choose the option 'Table data' , you can configure the table specifying the name of the API created before, in this case, the getVideoTable API.

Appsmith allows you to name the API created, and this name is a variable that is always available on the frontend Edit page.

Then you can map the data that you need, and you will see the list of data mapped below:

You can decide to show the columns as you want, create new ones, and change the column order. In this case, I decided to show only 'myid', 'Status', 'Name', 'Attachments', 'Description'.

Any row inside the shown table has a 'Selected value' property, and it can be used to play the video in another widget if the related row is selected. To do this, add another widget called 'player.'

Now configure it using the 'selectedRow' property related to the outgoing data coming from the table widget, where customColumn4 is the column's name and the URL link of the video.

It is possible to show the video description inside the input widget on the right with the same logic.

The visualized text inside the input widget matches with the table's selected row. To do this, you have to configure the option 'Default Text,' shown in the following image.

You can modify the text of the description inside the input widget. Clicking the 'Save Description' button, you save the modified text.

The 'Save Description' button calls the updateDescription API to Airtable to save the modified version in Airtable. You have to specify it inside the 'onClick' option.

The button 'Approve' does several things:

• Changes the status inside Airtable table 'sailingvideotable' (approve API).

• Updates the Appsmith frontend (getVideoTable API).

• Updates the status count on Airtable (countStatus API), create a notion card (postNotionBoard API).

  
  

Note: You must specify the related API inside the 'onClick' option, as you see in the following image.

To create the pie chart, use the chart widget and select the 'Pie Chart' type.

Inside the 'Series Data' option, you have to create a readable JSON for the pie chart with 'y' values downloaded by the relative API call 'countStatus'.

The comments section works similarly.

You can change the relative status with a dropdown menu widget when a video is selected. You can leave a comment inside the input widget, and finally, you can trigger the API call with the 'Send' button widget.

The 'Send' value triggers the API calls in the following sequence:

• update the status (updateStatus API).

• post a log record (createLog API).

• Get the values of the log table to see the updated values (get log API).

  
  

To pass values inside an API call, for example, in a post or a patch case, you can write variables in the body of the request. These variables are related to the frontend widget properties.

And that's how you can quickly build a video approval app with Notion and Airtable!

If you're stuck anywhere, [email protected] I'll be happy to help!

This article was written as part of the Appsmith Writers Program.

If you'd like to contribute, send an email to [email protected]

Co-published here.