Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand

Page Viewer web part to show List folder contents

Posted by Jean Paul on February 17, 2014

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

Following is our List with 3 folders.


You need to configure a Page which only shows the contents of Human Resources.  How to achieve it?


We can use Page Viewer web part.

Create a new page.


Choose Edit Page & Insert Page Viewer web part.


Construct the folder path in file-url format.

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

Please note that the above url contains davWWWroot for accessing the folder contents & omitted the Lists from the url.

davWWWRoot is a special keyword that alerts the WebDAV client that you are referring to the root of a WebDAV server.

From the web part properties, choose Folder  & Paste the URL.c


Click the Ok button & 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 which is missing.


As a 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>

function OpenDialog(){
        var options = {
            width: document.body.offsetWidth,
            height: document.body.offsetHeight,
            dialogReturnValueCallback: DialogCallback


function DialogCallback(dialogResult, returnValue)


You can find the HTML Code window here.


You need to copy the URL from original list > folder > Add document > Copy shortcut action.

Clicking the Ok button & Saving the changes you can refresh the page to Add Document.


You can see that Folder automatically shows Human Resources value.

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



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


How to use Content Editor web part?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s