Document Preview Web part in display form

Question

My questions refers to this article, document preview in edit form (Add document preview to Document library form)

I want to use this script in my display form (DispForm.aspx), but the variables will not get filled, they are still undefined.

Thats the code.

$(document).ready(function () { var strDocNameEncoded = encodeURI($('input[id^="FileLeafRef"]').val()); var strDocExt = $('input[id^="FileLeafRef"] + span').html(); if (strDocExt=='.doc' || strDocExt=='.docx' ||strDocExt=='.xls' || strDocExt=='.xlsx' ) {

var strDocUrl = "https://yourdomain.sharepoint.com/sites/dev/_layouts/15/WopiFrame.aspx?sourcedoc=https://yourdomain.sharepoint.com/sites/dev/PreviewFormDocLib/" + strDocNameEncoded + strDocExt + "&action=default"; } else { var strDocUrl = "https://yourdomain.sharepoint.com/sites/dev/PreviewFormDocLib/" + strDocNameEncoded + strDocExt; } $('#LSViewDocInTask').prop('src', strDocUrl ); });

I guess the field names are not available in display form.

This is the browser source code from the Page. I think the easiest way or one possiblitly is to extract the direct link to the document is the existing link (yellow marked).

Could you help me to extract URL /sites/showroom/teamseite/Prozesse/Prozess%20Beispiel%2002.docx from screenshot source code?

I tried it again with ctx.CurrentItem.FileLeafRef.FileUrl as variable, but no success :(

SOLVED

Here is a solution for the code (like Add document preview to Document libary form)

$(document).ready(function () { var strDocNameEncoded = encodeURI($("a[rel|='sp_DialogLinkNavigate']" ).text()); var strDocExt = strDocNameEncoded.split('.').pop(); if (strDocExt=='.doc' || strDocExt=='.docx' ||strDocExt=='.xls' || strDocExt=='.xlsx' ) {

var strDocUrl = "https://yourdomain.sharepoint.com/sites/_layouts/15/WopiFrame.aspx?sourcedoc=https://yourdomain.sharepoint.com/sites/dev/" + strDocNameEncoded + strDocExt + "&action=default"; } else { var strDocUrl = "https://yourdomain.sharepoint.com/sites/dev/" + strDocNameEncoded "+ "." + strDocExt; } $('#LSViewDocInTask').prop('src', strDocUrl ); });

Answer 1

The problem is that the script is looking for "input" fields which by definition does not appair in display forms (As you cant edit anything in the displayform).

You would need to get the correct element from the DOM. Now the issue here being that fields aren't labelled with an (Unique) ID so you would need some other way to get the element you're trying to modify.

The easiest way I can think of right now would be to look for any <a>-tags which name propperty ends on your fields name (Like this: SPBookmark_Title). Then traverse up to the nearest <td>-tag (Usually two steps up). Then get the next sibling and finally get the value from that element.

I'm not super experienced in javascript/jquery so it could be there's an esier way to do it that I don't know of.

Answer 2

I solved it by editing the code from (Add document preview to Document library form) to this:

$(document).ready(function () { var strDocNameEncoded = encodeURI($("a[rel|='sp_DialogLinkNavigate']" ).text()); var strDocExt = strDocNameEncoded.split('.').pop(); if (strDocExt=='doc' || strDocExt=='docx' ||strDocExt=='xls' || strDocExt=='xlsx' ) {

var strDocUrl = "https://winitux.sharepoint.com/sites/showroom/teamseite/_layouts/15/WopiFrame.aspx?sourcedoc=https://winitux.sharepoint.com/sites/showroom/teamseite/Prozesse/" + strDocNameEncoded + "&action=default"; } else { var strDocUrl = "https://winitux.sharepoint.com/sites/showroom/teamseite/Prozesse/" + strDocNameEncoded; } $('#LSViewDocInTask').prop('src', strDocUrl ); });

"a[rel|='sp_DialogLinkNavigate']" )

helps me to get the FileLeafRef name and the document title (URI).