Document Preview in a display form

Forms SharePoint Online
1

Is it possible to add a preview of a document in the Plumsail Form connected to a document library?

image
image878Ă—373 101 KB

2

Dear @Pieter,
It's very easy to do for PDF files as browser's can render them effortlessly, but not so easy to do for Word, and other Microsoft documents.

Which ones do you need?

3

Hi Nikita,

Thanks for your quick response. I need them both, PDF and Office Documents like Word, Excel and Powerpoint. We would like an interactive preview like you get when you open the details pane:

image
image919Ă—334 26.2 KB

4

Dear @Pieter,
As I've said, the PDF one is super easy - the rendering of a PDF document all handled by the browser. Simply add an HTML control with the following code to the form:

<iframe id='fd_docview' width='1366px' height='623px' frameborder='0'></iframe>

Then, add the following JavaScript to JS editor (change Document Library title to match yours):

fd.spRendered(function() {
    var library = pnp.sp.web.lists.getByTitle("Documents");
    library.items.select("FileLeafRef", "FileRef").filter("Id eq " + fd.itemId).get().then(function(items) {
      $("#fd_docview").attr("src", items[0].FileRef);                     
    });
});

Here's the result:

image
image831Ă—479 18.2 KB

As for MS Office documents - this will be trickier!

Our developers will have to research this question, and most likely spend some time to write the code. If you're interested and would consider paid support for this feature, write us at support@plumsail.com, we'll estimate the hours needed to make this possible.

5

Hi, did you manage to release updates to the product enabling preview of office files? I.e. Excel file?

6

Dear @SamirPateluk,
No such updates and no plans for it in the near future. If there's demand, we might be able to offer paid support, contact us at support@plumsail.com as mentioned above.

7

Thank you, I will discuss and follow your instructions if needed.

8

Hi Samir,

i have a solution.

  1. Set a “Html” Control on the Form. (Name = fd.docview)

grafik
grafik981Ă—381 12.4 KB

  1. Take this code to JavaScript-Editor an set the right name of the library.
fd.spRendered(function () {

    // lokale Variable fĂĽr das iframe-Element
    var docViewFrame = document.getElementById("fd_docview");

    if (!docViewFrame || !fd.itemId) {
        return;
    }

    var library = pnp.sp.web.lists.getByTitle("Datenschutzdokumente");

    library.items
        .select("FileRef")
        .filter("Id eq " + fd.itemId)
        .get()
        .then(function (items) {

            if (!items || items.length === 0) return;

            var fileUrl = items[0].FileRef;

            // WOPI-Preview-URL zusammensetzen
            var previewUrl =
                _spPageContextInfo.webAbsoluteUrl +
                "/_layouts/15/WopiFrame.aspx" +
                "?sourcedoc=" + encodeURIComponent(fileUrl) +
                "&action=embedview";

            // iframe src setzen
            docViewFrame.src = previewUrl;
        });
});

grafik
grafik1603Ă—992 76.8 KB