The popularity of video content rose even before the pandemic, but the pandemic certainly has accelerated consumption. , 82% of content generated this year is likely to be video. According to Forbes 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 ' ' is used to collect information related to
the videos that have to be approved, it has the following data
structure: sailingvideotable '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 ' ' 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: countRowStatus '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. 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 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: 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 API to
Airtable to save the modified version in Airtable. You have to specify
it inside the 'onClick' option. updateDescription 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, I'll be happy to help! barozzi.giulia@gmail.com This article was written as part of the Appsmith Writers Program. If you'd like to contribute, send an email to writersprogram@appsmith.com Co-published here.

Maker

Be Informed

Instantly

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Airtable: 26 Firms Offering Non-Dilutive Funding Options to Founders

Best No-code Tools for Product Managers

How to Build a SMS Surveys App with Twilio, Airtable and Standard Library

How I Built a Static Website with User Authentication and Dynamic Database for Free

How to Create a Job Board Using NoCode Approach

Airtable: 26 Firms Offering Non-Dilutive Funding Options to Founders

Best No-code Tools for Product Managers

How to Build a SMS Surveys App with Twilio, Airtable and Standard Library

How I Built a Static Website with User Authentication and Dynamic Database for Free

How to Create a Job Board Using NoCode Approach

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps