How To Open Selected List Item Image, Video Or Location To Connect An Embedded Web Part To A List Web Part - Part Three

Introduction

In my previous article, I already explained how to open selected Modern List item details in List Properties Viewer.

• How To Open Selected Document In File Viewer (Word, Excel, PowerPoint, and PDF) In SharePoint Modern Sites - Part One
• How To Open Selected List Item Details In List Properties Viewer - Part Two
  

Here, let us see about using modern web parts, and how we can view the selected list item without any customization using Embed Web Part to view the video, image, and location.

 

In SharePoint online modern site, Embed web part was different from the Link Web Part, which will only display a preview of an image, video or location. Microsoft added the ability to embed things on a SharePoint online modern site page.

 

Scenario

 

The requirement is to open the selected List item like Video, Image or location without opening it in a new tab of the browser window and Popup window of the model dialog box and without using custom code.

 

This should be achieved using Modern in OOB web parts.

 

Objective

 

The below OOB web parts will be used in this solution.

1. List web part
   Connect to List & select Item
   
   
2. Embed web part
   The web part will connect to list web part on this page to dynamically display a selected item in the list. With embed web part, you can enter links or embed code that uses variables, allowing you to show a wide variety of items depending on what your page viewer selects. Here are three examples of how you could show selected video, image, and location.

Images

 

I have created the “ImageShowcase” list. In this list we created two columns, Title and ImageURL. 

 

 

 

When a user chooses an image from the list web part, show a selected image in Embed web part.

 

Follow the below steps.

 

Step 1

 

Navigate to your SharePoint 2013 site -> Create Modern Page in Site Pages.

 

Step 2

 

From this page,

• Edit the page.
• Hover over the canvas where you would like to add layout section.
• Click on the “+” Sign.
• Add a new section, “Two Column” from the Section layout.
  
  

Step 3

 

You will see two sections to add web parts,

 

 

• In the first column-section1,
• Click on the “+” sign.
• Select “List” from the web part toolbox.
• Select relative List; then the below screen appears.
  
  
  
  
• After the final selection of your selected List, the below screen will appear.
  
  

Step 4

• In the second Column-section2,
• Click on the “+” sign.
• Select “Embed” from the web part toolbox.
  
  

• After you select the Embed Web part, the below screen appears
• Click Edit web part  on the left side of the Embed web part.
• Click the ellipses (...) at the top right of the property pane, and then click Connect to the source.
  
  
  
  
   

Step 5

• Under Connect to the source, select the relative list Name from the drop-down.
• Under Web site address or embed code, add your embed code. In this example, 
• the embed code is,
  

  <iframe width="693" height="390" src="[$ImageURL]" frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

• where [$ImageURL] is the variable that represents the column name for the Image URL's path.
  
  

• Click Republish at the top of the page.

Final Step

• Select any List item from the left side List
• The file should be opened in the right-side Embed web part

Without Selected List Item Screen

 

 

 

With Selected List item

 

 

 

Video

 

I have Created the “Video Gallary” List. In this list we created two columns, Title and Video ID. In Title column set the video Title and in the Video ID column set the YouTube Video Key.

 

 

 

When a user chooses a Video Title from the list web part, show a selected Title Video in Embed web part.

 

Follow the same steps 1 to 4 of Image Section.

 

Step 5

• Under Connect to the source, select the relative list Name from the drop-down.
• Under Web site address or embed code, add your embed code. In this example,
• the embed code is, https://www.youtube.com/watch?v=[$VideoID]

• where [$VideoID] is the variable that represents the column name for the Video ID of the YouTube key.
  
  

• Click Republish at the top of the page.

Final Step

• Select any List item from the left side List
• The file should be opened in the right-side Embed web part

Without Selected List Item Screen

 

 

 

With Selected List item

 

 

 

Location

 

I have Created the “CountriesLatitudeLongitude” List. In this list we created three columns, Title, Latitude, and Longitude. In Title column set the country Title and in the Latitude and Longitude column set the country latitude and longitude.

 

 

 

When a user chooses a Video Title from the list web part, show a selected Title Video in Embed web part.

 

Follow the same steps 1 to 4 of Image Section.

 

Step 5

• Under Connect to the source, select the relative list Name from the drop-down.
• Under Web site address or embed code, add your embed code. In this example,
• the embed code is,

<iframe width="500" height="400" src="https://www.bing.com/maps/embed?h=400&amp;w=500&amp;cp=[$Latitude]~[$Longitude]&amp;lvl=13&amp;typ=d&amp;sty=r&amp;src=SHELL&amp;FORM=MBEDV8" frameborder="0" scrolling="no"> </iframe>

• where [$Latitude] and [$Longitude] variable represents the countries list in latitude longitude column value.
  
  

• Click Republish at the top of the page.

Final Step

• Select any List item from the left side List
• The file should be opened in the right-side Embed web part

Without Selected List Item Screen

 

 

 

With Selected List item

 

 

 

Click here to get all countries latitude longitude.

 

Note

Feature of the Embed web part

• You can display content using a website address
• Display content using embed code
• Display dynamic content by connecting to another web part 

<<Prev Part