Page Viewer Web Part to Show List Folder Contents

In this article, I will show the usage of a Page Viewer web part to show a list of folder contents.

The following is our list with 3 folders.

Problem

You need to configure a page that only shows the contents of Human Resources. 

How to do it?

Solution

We can use a Page Viewer web part.

Create a new page.

 

Choose Edit Page and Insert Page Viewer web part.

 

Construct the folder path in file-URL format.

file://hp/davWWWroot/Shared Documents/Human Resources

Please note that the preceding URL contains davWWWroot for accessing the folder contents and omitted the lists from the URL.

From the web part properties, choose Folder  and paste in the URL.

 

 
Click the "Ok" button and you should be ready with the Folder View.

 

Please note that we can connect to any SharePoint or Network folder in this way.

Next Challenge

Now your users will start asking for the Add Document link that is missing.

Solution

For the solution we can do the following:

1. Edit the page
2. Insert a Content Editor web part, hide the Chrome
3. Edit the web part
4. Edit the HTML
5. Create a link that calls JavaScript code
6. Insert the JavaScript code below

<a onclick="OpenDialog();" href="#">Add Document</a>

<script type="text/javascript">

    function OpenDialog() {

        var options = {

            url: "http://hp/_layouts/Upload.aspx?List={E4C76E09-2F22-4C18-A20E-C07E56F246D9}&RootFolder=%2FShared%20Documents%2FHuman%20Resources",

            width: document.body.offsetWidth,

            height: document.body.offsetHeight,

            dialogReturnValueCallback: DialogCallback

        };

        SP.UI.ModalDialog.showModalDialog(options);

    }

    function DialogCallback(dialogResult, returnValue) {

        location.reload();

    }

</script>

You can find the HTML Code window here.

 

You need to copy the URL from original list then select the folder then select "Add document" then click on  the "Copy" shortcut.

Click the "Ok" button and save the changes; you can refresh the page to "Add Document".

 

You can see that the folder automatically shows the Human Resources value.

Selecting a document and clicking the "Ok" button will take you through the previous page with a Refresh.

 

Summary

In this article we have explored how to use a Page Viewer web part along with the Add Document functionality.  I hope this will be useful in real-world scenarios.

Please find the JavaScript source attached.

References

How to use Content Editor web part?