Microsoft Lists File and Live Previews - Fedes365/Microsoft-Lists-Templates GitHub Wiki

According to Microsoft Docs:

Use the special elmType filepreview in conjunction with the src attribute set to @thumbnail.< Size > to view thumbnails for files in your document library. If the thumbnail loads successfully, a small brand type icon is visible on the bottom left. If the thumbanil fails to load (or if the file type doesn't support thumbnails), a file type icon is shown instead. Generally speaking, filepreview has the following JSON structure:

"elmType": "filepreview",
"attributes": {
"src": "@thumbnail.medium"
}

Here's a responsive example of filepreview in a document library with @thumbnail.large setup:

If @thumbnail.< Size > attribute value is replaced with a file/digital content link, Microsoft Lists will display it as an iframe. Not all files and digital contents are supported. Furthermore, as illustrated below, it's important to use a specific link to make Microsoft Lists get and display a content inside an iframe. In this tutorial you'll find some examples I tested, with their respective link structure and visual result. Please, bear in mind this is an experimental usage of Microsoft Lists, given that it's not documented in Microsoft Docs yet.

The following examples are based on JSON column formatting. You can test them with a ready to use JSON code available here.

⚠️Important: all files must be stored in a SharePoint team/communication site document library (NO OneDrive for Business).

1. Open your file in Excel Online
2. In the address bar of your browser, replace the action URL parameter with embedview as shown below
3. Copy the link from the address bar and paste it into your Microsoft Lists JSON
4. If you want to get rid of the table header, just add this parameter at the end of your link: &wdHideHeaders=True

Here's the visual result in a 600px width and 400px height column:

---

1. Open your file in Word Online
2. In the address bar of your browser, replace the action URL parameter with embedview as shown below
3. Copy the link from the address bar and paste it into your Microsoft Lists JSON

Here's the visual result in a 600px width and 400px height column:

---

1. Open your file in PowerPoint Online
2. In the address bar of your browser, replace the action URL parameter with interactivepreview as shown below
3. Copy the link from the address bar and paste it into your Microsoft Lists JSON

Here's the visual result in a 600px width and 400px height column:

---

1. Open your file in Visio Online
2. In the address bar of your browser, replace the action URL parameter with embedview as shown below
3. Copy the link from the address bar and paste it into your Microsoft Lists JSON

Here's the visual result in a 600px width and 400px height column:

---

When it comes to PDFs, I found out two different ways to display them: you can use the direct link or the Office viewer link.

In this case, you can get the SharePoint file path by opening the information pane, as explained here. Once you copied the file path, you can paste it into your Microsoft Lists JSON.

Here's the visual result in a 600px width and 400px height column:

Alternatively, you can use the Office link viewer by copying the URL from address bar and pasting it into your Microsoft Lists JSON.

Here's the visual result in a 600px width and 400px height column:

---

You can embed a YouTube video too!
A little change is needed to make a YouTube link work:

From https://www.youtube.com/watch?v=eUa7AOX0_EQ ---> to https://www.youtube.com/embed/eUa7AOX0_EQ

Paste it into your Microsoft Lists JSON. Here's the visual result in a column with 600px width and 400px height:

---

To display an interactive map iframe, get the embedding link provided by Bing Maps or Google Maps and paste it into your Microsoft Lists JSON.

Here's the visual result in a 600px width and 400px height column:

---

If you want to display a Microsoft Forms module or quiz, here is the good news: no need of special links or tricks! Just copy your sharing link and paste it into your Microsoft Lists JSON to get a responsive iframe.

Here's the visual result in a column with 600px width and 400px height:

---

When it comes to Mp4 videos, I found out two different ways to display them: you can use the direct link or the Office viewer link.

In this case, you can get the SharePoint file path by opening the information pane, as explained here. Once you copied the file path, you can paste it into your Microsoft Lists JSON.

Here's the visual result in a 600px width and 400px height column:

Alternatively, you can use the Office link viewer by copying the URL from address bar and pasting it into your Microsoft Lists JSON. In this case, the iframe will display also the Office command bar above.

Here's the visual result in a 600px width and 400px height column:

⚠️ WARNING: videos displayed through iframes will autoplay all together, overriding any browser settings. If you are going to display multiple video iframes in a list, create a filtered view for each one or display them on custom hovercards