Developing a Connectable PDF Viewer Web Part – A Simple Way to Publish Corporate Newsletters on Sharepoint (Part 1)

Developing a Connectable PDF Viewer Web Part – A Simple Way to Publish Corporate Newsletters on Sharepoint (Part 1)

Please find the Source Code here

A while ago, one client placed a request that they wanted to publish their corporate newsletters through Sharepoint instead of distributing their paper-based newsletters to their offices in and out UK. When I just heard this request, the sharepoint publishing page layout immediately popped up into my mind. However, I then realised that the page layout approach was not a suitable choice to meet the client’s requirements for two reasons. Firstly, the current newsletter authors are using Office Publisher to create the newsletters and they are not willing to change to another authoring tool. Secondly, there is not a fixed format/style/template of the newsletters, so there would be no way to define the sharepoint page layouts.

As the newsletters created by Office Publisher can be saved as PDF format, a simple solution to meet the client’s requirement is to manage and show the PDF-based newsletter on a Sharepoint page through a PDF viewer. Therefore, I created a custom connectable PDF viewer web part to show the newsletters, and this web part can be connected to other web part (e.g. a List View Web Part which shows the full list of archived newsletters).

As the following snapshot shows, when a user select a newsletter from the left-side newsletter list, the selected newsletter would be rendered on the PDF viewer.

This blog post consists of two parts. The first part (as you are reading) goes through the detailed steps to create the connectable PDF viewer web part, and the second part demoes how to use the web part to build the newsletter site.

Below is the list of steps to create the connectable PDF viewer web part. Please find the Source Code from my Codeplex project

Step 1: Open Visual Studio 2010, create a new solution and add a new project using “Empty Sharepoint Project” template.

clip_image004

Step 2: Add a “Web Part” (not Visual Web Part) to the Sharepoint project.

clip_image006

clip_image007

Step 3: Add the created SPPDFWebPart item to the feature.
clip_image009

Step 4: Add Web Part Properties. Three configurable properties are defined, including PDFUrl, PDFWidth, and PDFHeight.

private string pdfUrl = "http://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf";

[Personalizable(PersonalizationScope.Shared)]
[WebBrowsable(true)]
[WebDisplayName("PDF Url")]
[SPWebCategoryName("PDF Settings")]
[WebDescription("Url of the target PDF file")]
public string PDFUrl
{
    get { return pdfUrl; }
    set { pdfUrl = value; }
}

private string pdfWidth = "700";

[Personalizable(PersonalizationScope.Shared)]
[WebBrowsable(true)]
[SPWebCategoryName("PDF Settings")]
[WebDisplayName("PDF Width")]
[WebDescription("Width of the PDF")]
public string PDFWidth
{
    get { return pdfWidth; }
    set { pdfWidth = value; }
}

private string pdfHeight = "800";

[Personalizable(PersonalizationScope.User)]
[WebBrowsable(true)]
[SPWebCategoryName("PDF Settings")]
[WebDisplayName("PDF Height")]
[WebDescription("Height of the PDF")]
public string PDFHeight
{
    get { return pdfHeight; }
    set { pdfHeight = value; }
}

After the the configurable properties have been defined, users can set those properties on the web part edit panel.

clip_image010

Step 5: Overwrite the “RenderContents” method and render a HTML <Object> to the output. The HTML <Object> is set with the PDFUrl as source and PDFWidth/PDFHeight as size attributes. As <Object> tag is not allowed by wordpress, I post the snapshot of the code segment as below.

To this point, you have created a simple PDF viewer web part which can render PDF file on Sharepoint page.

 

Step 6: Make the PDF Viewer Web Part connectable. You could find detailed explanation about the methods to create connectable web parts and also some very useful sample code from MSDN.

Firstly, define a connection point that enables the PDF Viewer Web Part as a consumer.

public class FieldConsumerConnectionPoint : ConsumerConnectionPoint
{
    public FieldConsumerConnectionPoint(MethodInfo callbackMethod,
      Type interfaceType, Type controlType, string name, string id,
      bool allowsMultipleConnections)
    : base(callbackMethod, interfaceType, controlType,
           name, id, allowsMultipleConnections)
      {
      }
    public override bool GetEnabled(Control control)
    {
        return ((SPPDFWebPart)control).ConnectionPointEnabled;
    }

}

Also you need define a property “ConnectionPointEnabled” inner the web part class

public bool ConnectionPointEnabled
{
    get
    {
        object o = ViewState["ConnectionPointEnabled"];
        return (o != null) ? (bool)o : true;
    }
    set
    {
        ViewState["ConnectionPointEnabled"] = value;
    }
}

Secondly, set connection interface. As we only want the PDF viewer web part receives one single field value (i.e. Document Url), the “IWebPartField” interface rather than “IWebPartRow” is used. The “IWebPartRow” can be used when you want pass a data row from the provider web part to the consumer web part.

private IWebPartField connectionProvider;

[ConnectionConsumer("FieldConsumer", "Connpoint1",
typeof(FieldConsumerConnectionPoint), AllowsMultipleConnections = true)]
public void SetConnectionInterface(IWebPartField provider)
{
    connectionProvider = provider;
}

Then, get the field value (Document Url in our case) on the page pre-render event and store it in a local variable “passedInValue”


private object passedInValue;
private void GetFieldValue(object passedInValue)
{
    this.passedInValue = passedInValue;
}

protected override void OnPreRender(EventArgs e)
{
    if (connectionProvider != null)
    {
        connectionProvider.GetFieldValue(new FieldCallback(GetFieldValue));
    }
    base.OnPreRender(e);
}

Lastly, change the “RenderContents” method, and set the PDF Url as the document url passed from provider webpart.

Now, the connectable PDF Viewer Part has been created. In the Part 2 of this blog post, I will introduce how to use the PDF viewer and a OOTB list view web part to setup the newsletter page.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s