12 Days of Retool: Eleven Best FIFA World Cup Games

Today, we'll show you how to use the Table Component, Video Component, Temporary state, and YouTube’s API to build a custom video player to binge watch the highlights of the Top 11 ranked games of 2022 FIFA World Cup. We relied on this article from The Athletic to curate the most exciting games from the World Cup. It’s subjective of course, so if you don’t agree with the rankings, feel free to do your own version using this Retool app JSON export, and this CSV for the underlying data.

Here’s how the final app looks - you can also see the app in action here.

The Table component serves as the main navigation allowing the user to select a row, and load the video highlights for that game in the Video Component above the table. The data in the Table component is loaded from a custom Top 2022 World Cup Games REST API we created using this CSV to API Generator. The meta data in the right sidebar is loaded simultaneously using a combination of querying the custom API, and the YouTube API.

To kick things off, we create a Resource for our custom API using this endpoint as shown below.

Once we have the resource created, we can create a new Retool app to consume it. There, we will create a new query called getDataFromRESTAPI that connects to the Resource we created earlier.

We will now connect this query to the Table component by editing the Data property of the table to reference the data returned by this query - {{ getDataFromRESTAPI.data }}.

This will automatically load the table with the data from our REST API.

Next, we will use the URL field returned by the API for each of these games to load up the video in the Video Component. The behavior we are going for is that the user should be able to select a row in the table, and the highlights for the selected game should be loaded into the Video Component. To do that, we will edit the Video URL Property for the Video Component to - {{table1.selectedRow.data.url}}.

We are now done with the basic functionality for this app, but let’s add some metadata for the selected video in our right sidebar. To do that, we will use a Container Component, and nest a Text Component (to show the teams), Text Area (to show a description of the game), and another Text Component (to show the result of the game).

We will edit the value property of the Text component to - ## {{table1.selectedRow.data['ranking']}} using a bit of markdown to structure the content, and some custom text color configuration.

We will edit the Value Property of the Text Component to reference the team info from the selected row in the table, as shown below:

We will do the same for the Result.

Our custom API does not include the description of the game, so we decided to use YouTube API to get summary of the game from the video description.

To do that, we need the video ID of the selected row in the table, and then pass that to the YouTube API. We will create a temporary state to store the value of the Video ID currently selected in the table.

Set the Initial Value Property of the Temporary state variable - selectedVideoID to the Video ID extracted from the URL of the selected row - {{table1.selectedRow.data.url.split('=')[1]}} using JavaScript’s split() method.

Now that we have the Video ID of the selected row in our temporary state, we can query that using the YouTube API.

To get the description of a YouTube video using the YouTube API, we will use the videos.list method and specify the id parameter with the YouTube video ID of the video we want to get the description for. To do that, we will create a new resource for YouTube’s video endpoint.

We will then create a new query for this resource - getMetaDataFromYouTubeAPI, and add some URL parameters. We will set the id parameter to the temporary state variable we created earlier. We will also create a parameter called part, and set that to snippet.

That’s it. You can now hit Preview, and cycle through the top 11 games of 2022 World Cup in the comfort of your very own Retool app. Here's the live app again if you would like to give it a try now.

Today, we showed you how to use the Table Component, Video Component, Temporary State, and YouTube’s REST API to build a custom video player for watching the highlights of the 11 best FIFA World Cup games. Hopefully, you found this hack useful, and it helped you unlock some new use cases for your apps.

Below, you'll find a list of every post from the 12 Days of Retool. Make sure to swing by tomorrow for our final post in the 12 Days of Retool series.