Teams Real Simple with Pictures: Let’s build a Playlist Portal in Teams using Stream and Lists – and bringing Lists to a Personal App

Written: 07/06/2022 | Updated: N/A

What is cool about Microsoft 365 is the synergy between applications. Standalone they are strong apps in and of themselves – but as a former architect there is a real enjoyment about making them work together to produce something which is greater than the sum of it’s parts. Now, the last few evenings I have been focusing on Microsoft Stream – long overdue given I used to write about it quite a bit back in the day. I talked about redirecting to the new Stream Web App experience, I talked about the fundamentals of building a video portal and surfacing that in Teams. A little bit before that I wrote on the new chapter functionality and how this will make videos more easily searchable. Now, I am going to take a different tack and bring another app into the fold which is Microsoft Lists. Like Stream, Lists is another app in 365 which I love, and which I use often. Now what this can be used for is to make a Playlist. A Playlist by definition is ‘a list of pieces of music chosen by someone to listen to on their computer, phone, etc.’ So a playlist could easily apply to video. Let’s see if we can make one up.

Let’s go.

This blog will cover

  • Getting the content
  • Deploying and Preparing the SharePoint Site
  • Creating the List
  • Deploying into Microsoft Teams

NOTE: This blog will have abridged steps and will assume some familiarity with Microsoft 365 and the Teams, SharePoint and Stream services

Prerequisites

  • Global Administrator, or Teams and SharePoint Administrator (POLP) permissions
  • Teams, SharePoint and Stream Licence (Within Microsoft 365 Licence) for testing

GETTING THE CONTENT

Ok, let’s start at the beginning. I am going to create a playlist portal which has multiple playlists within it and I am going to surface that in Teams.

1.) The first thing is getting all the content together which will constitute and seed the initial playlists. For me this is going to constitute

  • Videos which are stored in SharePoint Online (.mp4 files, 720p)
  • Thumbnail images and links for Podcasts
  • Thumbnail images and links for Videos on YouTube

These can be arranged in a local folder, or in OneDrive for Business

Out of this I am going to create 3 playlists

  • One on Microsoft Technology
  • One on the Intrazone Podcast by Mark Kashman
  • One on Philosophy

DEPLOYING AND PREPARING THE SHAREPOINT SITE

Now I have some content to seed my playlists, I am going to deploy the SharePoint Site which will be the foundation, and storage

1.) Login with administrator credentials to https://login.microsoftonline.com

2.) From the left app rail, or via the waffle (top left) select SharePoint

3.) Select Create Site

4.) Select Communication Site

5.) Give the Site a Name (Here called Playlists) which produces the URL of the site, a Description and a Language then select Finish

6.) The site is now deployed

7.) Now the first thing I am going to do is change the Theme. I want this to look like a Stream portal so I select Cog in the top right and then and then Change the Look

8.) I choose the Red Theme and then select Save

9.) Now select New and then select Document Library

10.) Call the first document library a Playlist name for one of the groups of videos. Here Microsoft Technology will be used. Then select Create

11.) Rinse and repeat for the second document library for the second group of videos – again call it the name of another playlist. Here Philosophy has been used. The end result is that I have created two document libraries – Microsoft Technology and Philosophy based on what will be two different playlists and two sets of videos which will be uploaded into them

12.) From the content which has been previously collected, Upload the videos (.mp4’s) to each document library based upon their subject matter. You do not need to upload the Thumbnails, or the links at this time – although you may want to put the assets you use into another library at this point if you are storing them locally. In short, this is just sorting out the video files into cloud storage

We are now ready to create our list

CREATING THE LIST

We are now in a position where the content (videos, thumbnails and links) and ready to go, and the videos (.mp4’s) which were a part of that content are housed in the SharePoint Communication Site under separate document libraries.

We now have everything we need to begin creating the list, of which the playlists will be part

1.) From the app launcher in Office.com select Lists

2.) In the Microsoft Lists web app select New

3.) Select Blank List

4.) Give the list a Name, Description (Here both Playlists), Colour, Icon and then – important – Save to the SharePoint Communication Site just created (Here Playlists). Tick Show in Site Navigation and then Create

5.) The List is created

6.) Create the following columns

  • Thumbnail based on Image column type
  • Link based on the Hyperlink column type
  • Added by based on the Person column type
  • Added on based on the Date and Time column type
  • Playlist based on the Choice column type

7.) Now it is time to bring it all together and create all the list items from your content – the videos, the thumbnails and the links. This will be your content stored locally, in the cloud and in the case of the videos from the SharePoint Site. Rinse and repeat until all items are created.

8.) Now, we organise the items by A-Z via the Title column

9.) Now, let’s Group by Playlist via the Playlist Column

10.) Finally, let’s change the view from List to Gallery. Looks great.

11.) Now, save the view as All Items which sets it as the default view of the list

12.) Click on Play Now on any one of the videos takes it to where that video is, whether it is housed in SharePoint, in YouTube, or any other site. With all the videos stored in SharePoint these play with the new Stream player which is great

13.) Now select Open in SharePoint

14.) Everything is looking great in SharePoint. Make a note here of the URL for later

The Playlists are now created. Let’s finish this off and get this into Teams

DEPLOYING INTO MICROSOFT TEAMS

Ok so we have deployed our site and our playlists built upon Microsoft Lists. In Teams we could always easily add this as a Lists Tab or as a SharePoint Pages Tab and using the appropriate URL of either the List in Microsoft Lists, or the SharePoint Page

But how do I add it as a personal tab?

1.) In Teams select More Options (…) from the left app rail and then search for and select Developer Portal

2.) Select App Studio

3.) Select Create a New App

4.) Add the details as follows within App Details

  • Short Name: Short Name for the App (Here will be called ‘Playlists’
  • Full Name: Full Name for the App (Here will be called ‘Playlists’
  • Identification: Select Generate and generate an ID for the app
  • Package Name: As required (Here will be called ‘package.playlists.app’)
  • Version: App Version (Here 1.0.0)
  • Short Description: Description of the App (Add as required)
  • Full Description: Description of the App (Add as required)
  • Developer Name: Name of App Developer (Here ‘Contoso’)
  • Website: Website of Developer (Here ‘https://www.microsoft365pro.co.uk’)
  • Partner Information: Optional
  • Privacy Statement: URL (Here ‘https://www.microsoft365pro.co.uk’)
  • Terms of Use: URL (Here ‘https://www.microsoft365pro.co.uk’)

The logos and branding for the app are optional. Follow the brand guidelines in that transparent png’s are recommended. As we are trying to approximate Stream I have added the Stream logo.

5.) Under Tabs select Add a Personal Tab

6.) Add the following

Name: Playlists
Entity: Unique Entity of the Tab. Example 100001 used here

Content URL: The content URL is very important. In order for the SharePoint Site to render, it needs to be written as follows. Take everything after the dest= from the URL of the List in SharePoint and remove the allitems.aspx. As in –

https://m365x843980.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/Playlists/Lists/Playlists

Website URL: Leave Blank, unless you want to a click out to the browser in the top right of the tab. If so, then use the URL of the SharePoint Site

7.) Ensure the domain of the SharePoint site is added under Domains and Permissions. What is also important – otherwise it may not render in the Teams Desktop App, is to add the AAD App ID and the Single Sign On as follows

8.) Once done select Test and Distribute and then Download

9.) The app package downloads

10.) Go to the Teams Admin Centre and under Teams Apps select Manage Apps and then Upload

11.) Select Upload

12.) Select the app package and then open. The new app has been added. Check the Teams Admin Centre that the app appears in the app list

13.) Go back into the Teams Client and from the left hand app rail select Apps

14.) Select Built for your Org

15.) Select The App

16.) Select Add

17.) And there it is, in Teams Web and Desktop

2 thoughts on “Teams Real Simple with Pictures: Let’s build a Playlist Portal in Teams using Stream and Lists – and bringing Lists to a Personal App

Comments are closed.