Building a simple SharePoint Document Library browser

The latest version of the Camelot SharePoint Integration Toolkit provides some nice methods and classes for working with SharePoint document libraries, which simplifies integration from external websites and applications, for example in .NET. In this post I will show how to create a very simple document browser with download capability in ASP.NET based on this toolkit. As you will see, there is not that much work needed to get everything up running! You can easily extend this example with file upload and check-in/check-out functionality.

Requirements

  • The Camelot .NET Connector version 1.1.1. There is a free 90 days trial available.
  • The Camelot SharePoint Integration Toolkit. This is an open source product (New BSD License) that provides classes and services that simplifies integration with SharePoint from other platforms and applications. Install this on top of the Connector.

This example project can be downloaded here!

Building a web user control for document browsing

My aim was to create a common control that can be used on several sites so I decided to go with a ASP.NET web user control. This control takes two properties; ListName and ConnectionString. The first gives the name of a document library that should be displayed and the second the connection string used for connecting to SharePoint.

In Visual Studio 2010, add a new Web User Control (language C#) to your web site and call it DocumentBrowser.ascx. Ensure that “Place code in separate file” is checked.

DocumentBrowser.ascx

Replace the content of the markup file (DocumentBrowser.ascx) with the following lines. We have added a standard ASP.NET TreeView control. Because we want to provide our own image set, the ImageSet property is set to “Custom”. We have also attached custom event handlers to the OnSelectedNodeChanged and OnTreeNodeDataBound events. When the user clicks on one of the documents in the TreeView, the associated file should be sent to the client browser. The second event handler just allows us to set our own images for different type of nodes (folders, documents, etc) as shown later.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DocumentBrowser.ascx.cs" Inherits="DocumentBrowser" %>

<asp:TreeView ID="DocumentLibraryTreeView" runat="server" ExpandDepth="0" ImageSet="Custom" OnSelectedNodeChanged="DownloadFile" OnTreeNodeDataBound="DocumentDataBound" >
</asp:TreeView>

DocumentBrowser.ascx.cs

Now it is time to implement the code behind our control. In Page_Load we need to implement the code that fills the TreeView with our documents. To do so, we are using the CreateDocumentLibraryData method provided in the toolkit to retrieve the documents. This function returns an object of type DocumentLibraryData, containing all documents in a given SharePoint library together with some information about the document library itself. The Documents member holds the document collection. This member type implements the IHierarchicalEnumerable interface, meaning that we can simply databind our documents to our TreeView control as shown below.

To know which document library that should be listed we have added a public property named ListName. It should be initialized by the page to which the control is added. The Camelot .NET Connector requires a connection string for connecting to SharePoint so we need to provide a property for that as well. The connection string is assumed to be stored in the web.config. The following connection string template can be used in most cases but all options are descibed in the connector documentation.

<add name="sharepoint_sales" connectionString="Server=my.sharepointserver.com;Database=customers;User=myuser;Password=mypass;Authentication=Ntlm;TimeOut=60;" />

The DownloadFile method handles the click event for documents in the TreeView. In this method we use the DOWNLOAD procedure of the Camelot .NET Connector to fetch the document from the SharePoint server and then send it to the client. This procedure takes two arguments: first; the name of the document library and second; the path to the document in the library. The second argument happens to be the same as the value of ValuePath for each TreeView node.

Last but no least, the DocumentDataBound method sets appropriate images depending on the node type, i.e. document or folder. For simplicity, we have bundled all documents as one type but of course you could easily show different images for different files types, e.g. gif images, jpeg images, word documents, etc.

So, altogether, our code behind looks as follows.

using System;
using System.Configuration;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Camelot.SharePointIntegration;
using Camelot.SharePointIntegration.Client;
using Camelot.SharePointConnector.Data;

public partial class DocumentBrowser : System.Web.UI.UserControl
{
    public string ListName { get; set; }
    public string ConnectionString { get; set; }

    protected bool IsInitiated { get{return ViewState["IsInitiated"] != null ? (bool)ViewState["IsInitiated"] : false;} set {ViewState["IsInitiated"] = value;} }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsInitiated)
        {
            using (var connection = new SharePointConnection(ConfigurationManager.ConnectionStrings[this.ConnectionString].ConnectionString))
            {
                var data = DocumentLibraryDataUtility.CreateDocumentLibraryData(this.ListName, null, connection);
                DocumentLibraryTreeView.DataSource = data.Documents.GetRootDocuments();
                DocumentLibraryTreeView.DataBind();
                this.IsInitiated = true;
            }
        }
    }

    protected void DownloadFile(object sender, EventArgs e) 
    {
        var filePath = DocumentLibraryTreeView.SelectedNode.ValuePath;
        using (var connection = new SharePointConnection(ConfigurationManager.ConnectionStrings[this.ConnectionString].ConnectionString))
        {
            connection.Open();
            using (var command = new SharePointCommand("CALL DOWNLOAD('" + this.ListName + "', '" + filePath + "')", connection))
            {
                var bytes = (byte[])command.ExecuteScalar();

                Response.Clear();
                Response.ContentType = "application/octet-stream";
                Response.AddHeader("content-disposition", "attachment; filename="" + filePath.Split('/').Last() + """);
                Response.BinaryWrite(bytes);
                Response.End();
            }
        }
    }

    protected void DocumentDataBound(object sender, TreeNodeEventArgs e)
    {
        if (((DocumentLibraryNode)e.Node.DataItem).Type == "Folder")
        {
            e.Node.ImageUrl = "~/images/folder.gif";
            e.Node.SelectAction = TreeNodeSelectAction.None;
        }
        else
        {
            e.Node.ImageUrl = "~/images/document.png";
        }
    }
}

Creating a sample page

Add a new web page to your project (we are using default.aspx in this example) and replaced the content with the following markup code. On the top of the page, we register our new document browser control and later down we add an instance of this control to the page. Remember that we need to set the ListName and ConnectionString properties to initialize the control. The named ConnectionString must also be added to the web.config.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagName="DocumentBrowser" TagPrefix="camelot" Src="~/DocumentBrowser.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <camelot:DocumentBrowser ID="DocumentBrowser" runat="server" ListName="Shared Documents" ConnectionString="sharepoint_connection"></camelot:DocumentBrowser>    
    </div>
    </form>
</body>
</html>

Testing the page

Now, start your web site and browse to your page. If there everything goes fine and there are documents in the library, your document browser should show up. You should also be able to download documents by clicking on them.

 

This entry was posted in SharePoint. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>