Page Viewer Web Part to Show List Folder Contents

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?