Build a Video Approval Tool on Appsmith with Airtable and Notion

giulibaroz — Fri, 04 Mar 2022 17:47:48 +0000

Video content rose even before the pandemic, but the pandemic certainly
has accelerated consumption. According to research, 82% of content generated in 2022 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:

The videomaker uploads a new video on Airtable
The marketing employee views it, writes notes for the supplier, and
changes its status.
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 'datasource' 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.

Airtable API connection	To what Airtable table	Call type	What it does
get log	log	GET	Get records
updateStatus	sailingvideotable	PATCH	Update a record field status
getVideoTable	sailingvideotable	GET	Get records
createLog	log	POST	Post a comment
approve	sailingvideotable	PATCH	Update the status to approve
countStatus	countRowStatus	GET	Get records
updateDescription	sailingvideotable	PATCH	update description field

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.

Notion Api connection	Notion page object	Call type	What it does
postNotionBoard	database_id	POST	Post a card in a table viewed as 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.

Open the page you wish to link to the app, and click on the 'share'
button.
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 datasource and add actions
that trigger POST API requests.

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

Title of the application
The image that explains how the workflow works
Pie chart with the information related to the status
Table with 'sailingvideotable' records
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.
Where the user can change the status to ongoing or not approve and
leave comments
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,
barozzi.giulia@gmail.com
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
writersprogram@appsmith.com

DEV Community: giulibaroz