🧐 So, what's this all about?!

With the explosion in popularity of podcasts (I don't know about you, but I now look forward to long drives to get my episodes in!), it is becoming a more regular requirement for organisations to host their own internal podcasts 🎙️.

I typically see this from the CEO, CIO, and CTO level roles, but, I expect that to change soon as people become more comfortable with podcasting as a concept, especially now that the barrier to entry is so low (a recorded Teams meeting can be used to create one pretty simply!)

Anyway, one way or another (for better or worse), my podcast addiction has inspired me to undertake my latest SharePoint adventure.

❓❓What is the adventure, you ask?...

Well... we already built Netflix together... so now it's time for Spotify!

Yep, we are going to build our very own podcast network modelled on Spotify. 😁

🧭 Here's the solution outline

The solution is actually straightforward enough.

The bit that got me scratching my head was how to get a list of podcast episodes to display like they do on a podcast page within Spotify.

The answer... a custom JSON view within the site pages library (see below!).

SPOTIFY VERSION

Fig. Spotify Episode View

MY SHAREPOINT VERSION

SharePoint Episode View

Not bad... right?!

Don't panic if you're not a developer... I'm not either! But, with the help of my good pal ChatGPT, I managed to pull together a template (that I'll do my best to explain), which you can just copy and paste (you'll find that code down below 👇). - Easy peasy lemon squeezy! 🍋🍋🍋

Anyway, I digress... what we are building is...

• ** ✅ A Podcast Network Homesite (Hub Site)** This will be the entry point to our internal podcast empire. It will have:
  • A beautiful landing page where we can show podcast links and the most recent and trending podcast episodes across all our Podcast sites.
  • A theme applied to control the look and feel of all the individual podcasts sites
  • That's it! (it didn't need anything else)
• ✅ Individual Podcast Sites (Associated Sites) Our podcast empire will contain multiple podcasts, each will be contained within a dedicated site containing:
  • A Document Library to store our podcast media files
  • A restructured Site Pages Library to create our podcast user experience (including our fantastic custom JSON view 🧐)
  • A podcast homepage to display latest episodes and podcast information

So, for my visually motivated readers (I'm one of you 😉), we have the below site topology...

Solution Overview

Implementing this structure will allow us to create a really cool and engaging Podcast Network landing page which will pull in content from all our individual podcast sites.

SharePoint Podcast Network Homepage

... and each individual podcast site will have a homepage like this...

SharePoint Podcast Homepage

I know, awesome! 😎

What SharePoint stuff you will learn in this tutorial...

• ✅ Hub sites and Associated Sites - A core part of this solution is obviously the ability to have a SharePoint Hub site and, with it, multiple additional sites which we connect to it through site association.
• ✅ Aggregation of content - The landing page of our Hub site relies almost exclusively on the ability to pull content through from our podcast sites. We'll look at a few web parts that allow us to do this effortlessly
• ✅ Page layout and structure - We'll use site page sections and layouts to create a page structure that provides a great user experience using basic web parts
• ✅ How to create a custom JSON list/ library view - How you can use a little bit of repeatable code to create a super versatile list view that will leverage any metadata you would like to display. This makes up for the limited option we get with the news and highlighted content web part settings.

So, with all that being said... let's get started! 🚀

👷‍♂️ How to build a Podcast SharePoint Site

Our podcast sites (we'll have 5 of them), is the core of our solution, as that is where our podcast episodes will live and be accessed.

I'll outline how to build one, and the idea is, that you just repeat the process for however many you need.

🙋‍♂️ NOTE: If you only have a need for a single podcast and are not at the stage of needing a "Network", then you just complete this section and ignore the rest!

🐾 Step 1 - Get yourself a fresh SharePoint site!

We are going to use Communication sites exclusively for this solution, but if you need to use a Team site for whatever reason, that's cool... you do you... this will all still work! 🤟

Whatever type of site you use, I do recommend that you use that site exclusively (more or less) for the single purpose of the podcast. I recommend this as it keeps things tidier and means that you have less to do to sort 'podcast' content from any other type of content within the site.

So... get yourself a fresh SharePoint site, make sure you have Site Owner access to it, and move on to step 2 😁

Step 2 - Create a document library for our media files

Now that you have your site, the first thing we want to do is to create a document library for your actual podcast content.

By 'actual' podcast content, I mean the audio or video files which is your podcast episode. We will end up embedding this on a 'podcast page' where we have more control over what other content accompanies it (description, related content, links, call to actions etc.)

We could use the document library that comes with the site for this but, I chose to create a new one so I can give it a specific name.

So...

• 1. Access 'Site Contents'
• 2. Select 'New'
• 3. Choose 'Document Library' from the 'new' dropdown
• 4. Name it 'EpisodeContent'
• 5. Click 'Create'

Create a document library Step-by-step

Create a document library Step-by-step

Create a document library Step-by-step

Perfect, we'll come back to that later!

Step 3 - Structure the site pages library for podcasts

As I mentioned above, we will create a site page for each podcast episode. This will be how our users will experience the podcasts. And since we know that every page created within our site gets created within the 'Site Pages' library, that means we have some work to do here.

Specifically, we need to structure the site pages library with metadata columns so that we can add metadata to our episode pages so that we can then display it on our custom episode cards (which we will create with our fancy JSON view).

The default site pages library view is always set to 'By Author' so the first thing we will do is change this to 'All pages' (this is a much better starting point than 'By Author').

To do this...

• 1. Navigate to the 'Site Pages' library
• 2. Click the view dropdown
• 3. Select 'All Pages'
• 4. Select the view dropdown again
• 5. Select 'Set current view as default'

Structure the Site Pages library Step-by-step

Structure the Site Pages library Step-by-step

Structure the Site Pages library Step-by-step

Now we can edit the 'All Pages' view to include all the metadata columns we need.

Some of these metadata columns already exist and just need to be 'Shown', and some need to be created. I've outlined what is required in the table below...

Required Site Page metadata columns

For the columns marked as 'Show', you need to...

• 1. Click '+Add column'
• 2. Select 'Show or hide columns'
• 3. Check the boxes next to the columns you want to show
• 4. Click 'Apply'

Show library columns Step-by-step

Show library columns Step-by-step

For the columns marked as 'Create', you need to...

• 1. Click '+Add column'
• 2. Select the column type I've indicated
• 3. Click 'Next'
• 4. Give it the name I've indicated (this is important for when we get to the JSON)
• 5. Click 'Save'

Create library columns Step-by-step

Show library columns Step-by-step

An optional step is to re-arrange the columns by clicking and dragging the column labels to where you want to put them. I re-arranged mine as follows...

Show library columns Step-by-step

Step 4: Create our custom JSON view

Now for the fun stuff!

We need to create a new view that we can use to format with our JSON. We start this off by making a copy of our 'All Pages' view as it contains all the metadata columns we need.

Why don't we just use the 'All Pages' view? Well... we will use the 'All Pages' view for maintaining the pages and metadata. The JSON view will be purely for display purposes. It is best to keep them as separate views.

So... first things first. Create a new view (based on the 'All Pages' view) called 'CustomJson'.

To do this...

• 1. Make sure you are on the 'All Pages' view
• 2. Select 'Save view as'
• 3. Enter the name 'CustomJson'
• 4. Click 'Save'

Create a custom JSON list view Step-by-step

Create a custom JSON list view Step-by-step

Now for the custom JSON view code... here it is in all its shining glory...

{
	"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
	"hideSelection": true,
	"hideListHeader": true,
	"rowFormatter": {
		"elmType": "div",
		"style": {
			"display": "flex",
			"align-items": "stretch",
			"margin-bottom": "20px"
		},
		"attributes": {
			"class": "ms-bgColor-white"
		},
		"children": [
			{
				"elmType": "img",
				"attributes": {
					"src": "=if([$ImageThumbnail] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M',[$ImageThumbnail.serverRelativeUrl])",
					"title": "[$Title]"
				},
				"style": {
					"width": "200px",
					"height": "120px"
				}
			},
			{
				"elmType": "div",
				"style": {
					"padding-left": "10px"
				},
				"children": [
					{
						"elmType": "button",
						"customRowAction": {
							"action": "defaultClick"
						},
						"style": {
							"cursor": "pointer",
							"color": "#fff",
							"background-color": "#1A1918",
							"border": "none"
						},
						"children": [
							{
								"elmType": "span",
								"txtContent": "[$Title]",
								"style": {
									"font-weight": "bold",
									"font-size": "20px"
								}
							}
						]
					},
					{
						"elmType": "div",
						"txtContent": "[$Description]",
						"style": {
							"font-size": "16px",
							"padding-top": "5px"
						}
					},
					{
						"elmType": "div",
						"style": {
							"display": "flex",
							"padding-top": "10px"
						},
						"children": [
							{
								"elmType": "button",
								"customRowAction": {
									"action": "defaultClick"
								},
								"style": {
									"cursor": "pointer",
									"background-color": "#1A1918",
									"border": "none"
								},
								"children": [
									{
										"elmType": "img",
										"attributes": {
											"src": "https://[your domain].sharepoint.com/sites/[your site name]/SiteAssets/Playbutton.png",
											"title": "[$Title]"
										},
										"style": {
											"height": "32px",
											"width": "32px",
											"padding-right": "15px"
										}
									}
								]
							},
							{
								"elmType": "span",
								"txtContent": "=toDateString([$Created])",
								"style": {
									"font-size": "16px",
									"color": "#fff",
									"padding-right": "15px"
								}
							},
							{
								"elmType": "span",
								"txtContent": "[$Duration]",
								"style": {
									"font-size": "16px",
									"color": "#fff"
								}
							}
						]
					}
				]
			}
		]
	}
}

Remember... DONT'T PANIC...

I know it seems like a lot, but it actually makes sense if you can take the time to go through it and use a combination of Google and ChatGPT to help you understand the elements within it.

But... if you just want to copy it and paste it... that's fine too!... although you will need to be aware of certain parts that you may/will want to change to make it work for you.

I really suggest you take the time to undertand what this code is saying. This was new to me before I started working on this post/video but now I have a firm grasp on it and can see a lot of applications of it. Invest the time, and it will pay off!

First, let me show you where to paste this code and then i'll show you what to change... sound good?... ok, let's do it!

What you want to do is:

• 1. Make sure you are in our new 'CustomJson' view
• 2. Click 'Format current view'
• 3. On the next window, click 'Advanced mode' (because you're awesome and are now in the 1% of people in this world who will ever click this link 😎)
• 4. Delete the little bit of code that you can see and paste in the code, I have provided above in its place
• 5. Click 'Save'
• 7. Read on because you need to make some changes!

Note: You might be a little underwhelmed by the results of clicking save. That's fine. We haven't made the changes yet or really added any episode content, so trust the process for now, and you will be rewarded!

Create a custom JSON list view Step-by-step

Create a custom JSON list view Step-by-step

Create a custom JSON list view Step-by-step

So here's what you need to change:

👉 1. The styling of the title

This bit here...

{
					"elmType": "button",
					"customRowAction": {
						"action": "defaultClick"
					},
					"style": {
						"cursor": "pointer",
						"color": "#fff",
						"background-color": "#1A1918",
						"border": "none"
					},
					"children": [
						{
							"elmType": "span",
							"txtContent": "[$Title]",
							"style": {
							"font-weight": "bold",
							"font-size": "20px"
							}
						}
					]
				},

...controls the title of our podcast episode and how it displays.

The bit we are concerned about if the "style" part. I am using a dark theme for my site, so I have set the text colour of the title to white ("color": "#fff"). If you are also using a dark theme, you can leave this as-is. Otherwise, change the "#fff" value to "#000" which will make it black.

Then you want to look at the background colour of the title area. I have it set to a dark colour which matches the background colour of the site ("background-color": "#1A1918") but, if you use a light theme, you should change the "#1A1918" value to "#fff" which will make it white.

👉 2. The Play button

This fella...

SharePoint Podcast Play Button

You'll need to create your own play button and save it as a .png. Alternatively, save one of the variations I have displayed below and use one of them...

SharePoint Podcast Play Button Green

SharePoint Podcast Play Button Black

SharePoint Podcast Play Button Grey

SharePoint Podcast Play Button Blue

SharePoint Podcast Play Button Red

Once you have your play button image ready, we need to upload it to our podcast site so that we can reuse it within our custom JSON view.

To do this...

• 1. Go to 'Site contents'
• 2. Open the 'Site Assets' library
• 3. Upload your play button

SharePoint Podcast Play Button

SharePoint Podcast Play Button

Once you have done that we need to grab the URL of the play button image on our site so we can reference it within our code (this is trickier than it sounds).

The handiest way to do this is to go to the homepage of your site and copy the url. It will be something like this

https://{your-domain}.sharepoint.com/sites/{your-site-name}

Then you want to add the following to that...

/SiteAssets/playbutton.png

Putting these two together, the URL for your button will be...

https://{your-domain}.sharepoint.com/sites/{your-site-name}/SiteAssets/playbutton.png

Now go back to your JSON code and within this section...

"elmType": "img",
									"attributes": {
										"src": "https://[your domain].sharepoint.com/sites/[your site name]/SiteAssets/Playbutton.png",
										"title": "[$Title]"
									},
									"style": {
										"height": "32px",
										"width": "32px",
										"padding-right": "15px"
									}

update the "src" URL to your button URL. Then click save.

And that's it!

Note: within the code, where you see [$Title], [$Created], [$Duration] etc., these relate directly to our column names. If you want to repurpose this layout for some other purpose that requires different metadata to be displayed, simply swap out the column name. You must have the column shown within the 'CustomJson' view (using the 'Show/Hide columns' option we looked at above) in order for it to be displayed in when the Json renders.

We can now create some episode pages which will make this really come to life!!

Step 4 - Create our First Episode Page

Actually, let's address the theme applied to our site first. I'm going to go with a dark theme to align closer to Spotify. If you'd like to do the same, you can copy these steps (if not, just skip this bit).

• 1. Click the cog icon and
• 2. Select the 'Change the look' option
• 3. Select 'Theme'
• 4. Select 'Dark Yellow' and then click 'Customize'
• 5. Choose green as your main colour (or any colour you like really)
• 6. Click 'Save'

Change the site theme step-by-step

Change the site theme step-by-step

Change the site theme step-by-step

Change the site theme step-by-step

That's better 😁!

Ok, now on with the episode page!

We'll keep the episode page simple enough. We'll just display the audio/video of the podcast, a description of the podcast and also the duration. But remember, this is just a SharePoint page, you can add any other content to it that you want!

So what we are aiming for is this...

SharePoint podcast episode page step-by-step

Now, before we build the page, let's upload our podcast episode content to our 'EpisodeContent' document library (we'll need this to embed it on our page).

• 1. Go to 'Site Contents'
• 2. Select the 'EpisodeContent' document library
• 3. Upload your episode

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

Great! Now, let's actually build this page (finally!)

• 1. Go to your site Homepage
• 2. Select 'New'
• 3. Select 'Page'
• 4. Choose 'Blank'
• 5. Select 'Create page'

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

• 6. Give your page a title
• 7. Set the header layout to 'Plain'

SharePoint podcast episode page step-by-step

• 8. Add a 'One-third right' section layout
• 9. Add a 'File and Media' web part to the left area and select the episode file we just uploaded from within the pop-up
• 10. Click anywhere on the video, and click the 'Video settings' option
• 11. Click the Thumbnail dropdown and upload a thumbnail image for your podcast episode (don't forget to click the 'Done' button once your thumbnail has uploaded!)

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

That's the most important content added to the page. After that, you can add whatever you want. I chose to add a description with the 'Text' web part and also display the video duration by using the 'Page properties' web part and selecting 'Duration' from the property dropdown.

I'll leave it to you to decide what is best for your episodes!

Once you have the "on-page" content added we have a final step for this page and that's to edit the page details where we can update the metadata which is used by our custom Json view.

To do this...

• 12. Select 'Page details'
• 13. Add a description to the 'Description' field. This is the preview description that will appear in our episodes list (the CustomJson view)
• 14. Upload your image thumbnail to the 'ImageThumbnail' field (again, this is the thumbnail that will be displayed in the episodes list)
• 15. Set the 'PageType' to 'Episode'
• 16. Enter a duration for the episode (I use the format 'Xhr Xmin')
• 17. When you are happy with all of that, click 'Publish'
• 18. Click 'Post as News on this site'. Note: this last step is only required if you are going to create multiple podcast sites and want to go down the 'Hub - Podcast Network route' as we use the news as a way to roll up the content there.

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

SharePoint podcast episode page step-by-step

Congratulations 🎉🎉🎉, you have just published your first podcast episode. Give yourself a pat on the back! 🥳

Step 5 - Create a few more episode pages

Now, add a few more episodes if you have them or else just keep adding them over time.

Tip! To save yourself a load of work, the handiest way to create your next episode page is to to to the page you just created and click the 'New' drop-down and select 'Copy of this news post'. Then, it's just a case of editing the content and page details. The structure will already be there.

Step 6 - Update the site Homepage

Now we can create the homepage of our podcast site and finally make use of that pretty custom JSON view!!

Our podcast site homepage will consist of 3 main areas (as shown below):

• ✅ 1. Header Section - This will contain the title of our podcast and "introduce" it
• ✅ 2. Episode Feed - This will contain a feed of all podcast episodes on our site and display them using our custom JSON view
• ✅ 3. Other Podcasts - This is where we will link to all other podcast sites within our "Network"

SharePoint podcast episode page step-by-step

👉 Let's start with the Header Section

This section is actually pretty simple. It only uses a 'One-Column Layout', with a background set to 'Strong'.

SharePoint podcast episode page step-by-step

Within this section we use a single image web part to add all of the content.

Just type in your content and format the font sizes to what works best for you. To add the image, simply drag and drop it into the text box and align it left. You can then play with the text till it looks just right. 👌

SharePoint podcast episode page step-by-step

👉 Now for the Episode Feed

Create a new section below the header with a 'One-third left' layout.

Our episode feed will be placed within the bigger right-hand section using the 'Document Library Web part'.

SharePoint podcast episode page step-by-step

Once you have added the Document Library web part, you will want to configure it as follows:

SharePoint podcast episode page step-by-step

This should result in your custom Json view being displayed and all the podcast episodes you have created looking absolutely stunning!!! 😎 🥳 👌

👉 And finally, we will add the links to our other podcast sites

Note: If you only intend to have one Podcast site, you can skip this bit and change the layout above from 'One-third left' to 'One column'

So, in the left-hand section, you want to add the 'Sites' web part. This is what we will use to display all our other podcast sites.

SharePoint podcast episode page step-by-step

Once you have added the Sites web part, you will want to configure it as follows (basically, just select the sites you want to display links to!):

SharePoint podcast episode page step-by-step

And now all that's left to do is to publish your page, and you are done!

Podcast Hub Site

I am going to have to split this post into a part 1 and part 2 (with this being part 1 😁)

BUT... I would never leave you hanging like that!! So, if you can't wait for part 2 because your excitement levels are just through the roof at this point... you can watch the step-by-step walkthrough of this build (including the Hub Site part) on YouTube. Here's the video again...

💡 Summary

So there you have it. You can now wow all your colleagues and friends with your very own version of Spotify within SharePoint Online. Who would have thought it was so easy! 🍾🍾🍾

Again, the podcast use case was just used as an example of how you can create another unique (to SharePoint) user experience based on applications that live out in the wild.

I really encourage you to get to grips with the JSON as once you do, you will be able to re-use it again and again for any number of use cases. I know I have a few more post ideas which will feature it heavily!!

So until our next SharePoint adventure, take it easy and keep experimenting! 👨‍🔬 🧪

Dan