Dynamic PDF display using Embed WebPart SharePoint Online

Question

I'm trying to setup a embed webpart connected with a list of documents. I want to display pdf associated with the selected list record. The actual pdf are within a document library and there is a column (Link) in the document list with a link to the pdf for that record. The Link column is short text

If I include the url directly within the iframe code the pdf appears within the webpart as expected

<iframe width="700" height="700" src="https://xxxxxxxxx.sharepoint.com/sites/xxxxxxxxx/pa/Shared%20Documents/my_doc.pdf"></iframe>

BUT I want the pdf appearing in the webpart to dynamically change based on the record selected in the document list. The link to the pdf is within the Link column.

<iframe width="700" height="700" src=[$Link]></iframe>

Something odd that I cannot find any reference to anywhere is when I type the "[$" I get a drop down that includes most of the fields within my document list but not Link. Link is a short text field. Are there restrictions on the field type that can be used within the embed webpart?

I've tried using the items available in the dropdown without any luck. Does anyone know of a reference for what these values should be? FileDirRef, FileLeafRef, FileRef, ServerRedirectedEmbedURL, .serverRelativeListUrl. I've searched online quite a bit and can't seem to find a reference.

Other things I've tried:

• including the quotes within the iframe code around the link variable "[$Link]"
• including quotes in the text within the text value in the Link column of the document list

I'm not sure what else to try, anyone have any ideas? Thank you in advance

Answer 1

Before the script part starts embed the item and add a ID:

<embed src="/sites/1827056.pdf" id="pdf_content" width="500" height="375"></embed>

in the script section update the src of the ID with the variable data:

document.getElementById("pdf_content").src = IMAGEURL; 

It took me 3 hours to find that solution.

Answer 2

I fixed mine with the following:

<iframe width="700" height="700" src=[$ServerRedirectedEmbedUrl]></iframe>

To connect a library document to an embed web part. I couldn't use the file viewer as the default window is too small to display a document.