1

I am using SharePoint Online. On a classic SharePoint web part page, I have added a document library and page viewer web parts. Desired behavior is for the user to select an item and then have the selected item display in the PVWP. Problem is, there is no connection capability included with PVWP for passing the selected item for viewing.

Is there a way to pass the selected item's file URL to the PVWP Link element on the fly? Any coding examples are welcomed.

I would also like the PVWP to display a "blank" preview when no file is selected or when multiple files are selected - pie in the sky bonus item. :-)

I would be grateful for any assistance.

1 Answer 1

0

So this is how I did it before, not sure if it will work for you, but you can surely give this a try:

To pass the selected item's file URL to the PVWP Link element on the fly, you can use JavaScript and jQuery to create a custom solution. Here's an example code snippet that demonstrates how this can be achieved:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
</script>
<script>
    $(document).ready(function () {
      // Get a reference to the document library web part and attach a click event listener to the items
      var listWebPart = $('#documentlibrarywebpartid');
      listWebPart.on('click', 'a.ms-listlink', function () {
      // Get the file URL of the clicked item
      var fileUrl = $(this).attr('href');
      // Update the Link element of the Page Viewer web part with the file URL
      $('#pageviewerwebpartid').attr('src', fileUrl);
  });
});
</script>

Replace "documentlibrarywebpartid" with the ID of the document library web part and "pageviewerwebpartid" with the ID of the Page Viewer web part on your page. This code will attach a click event listener to the items in the document library web part and update the Link element of the Page Viewer web part with the selected file's URL.

To display a blank preview when no file is selected or when multiple files are selected, you can modify the code above to add a check for the number of selected items before updating the Page Viewer web part's Link element. If no items are selected or multiple items are selected, you can set the Link element to a blank URL or a default preview image.

8
  • Thanks so much for your prompt response - I feel that I'm close to a working solution. Am I using the correct web part id info? For example, I plugged in the following for my list ID, with no result: var listWebPart = $('MSOZoneCell_WebPartWPQ5');
    – RonDC
    Commented May 2, 2023 at 19:19
  • Certainly, that sounds good. However, I would still recommend checking the console to verify if the object is retrieved successfully.
    – Pradip R.
    Commented May 2, 2023 at 19:33
  • I verified the web part IDs are correct and still no result. When I select the list item, nothing happens. I tried many things with formatting of the web part ID, like adding # to front and using double quotes instead of single quotes. Not sure what I am doing wrong.
    – RonDC
    Commented May 2, 2023 at 22:25
  • I forgot to mention that I placed the code in a script editor web part. Not sure if that matters.
    – RonDC
    Commented May 3, 2023 at 1:36
  • You can try running this code in console first to see you are able to get listWebPart and then try further, if code is in Script editor webpart it should be fine.
    – Pradip R.
    Commented May 3, 2023 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.