Integrate Autodesk Viewer with SharePoint

By Adam Nagy

All the files created while writing this article are available on github and they also contain comments that provide further information. 

This blog post goes through the steps of integrating the Autodesk viewer technology with SharePoint, i.e. use the viewer to visualize your files inside SharePoint. The parts that need to be implemented: 

• log in 
• upload the file for translation
• start the translation process
• monitor the process
• show the translated file in the viewer

1) Install SharePoint and Microsoft SharePoint Designer

First of all I needed to install the SharePoint environment. It's useful to install Microsoft SharePoint Designer, that I will also be using.

2) Add extra file property

In order to keep track of if the document has already been uploaded and translated, we can attach each file the urn of the translated file. If that is not set then we start the upload/translate process, otherwise just simply show the file that has the urn. 

You could make things a bit more sophisticated by e.g. deleting the urn property of the document each time it is checked in, or you would automatically start the upload/translation process then, but that's not part of this blog post.

From the main page of your SharePoint site you can go Libraries > Documents > Library [tab] > Library Settings 

Then under the Columns section you'll find Create column:

We can simply name this column "urn".

3) Create the viewer page

This is a simple aspx page that will be using the viewer to show the file whose urn is passed to it. This can be easily integrated into other web pages using an iframe. It will expect two parameters in the URL: the urn of the file to show and the access token you got after authentication. 

MyViewerPage.aspx?accessToken=<access token>&
urn=<urn of the file to view>
e.g.: MyViewerPage.aspx?accessToken=ljvWwXkzF3zxCVfLUZhP1Q8Qk66S&
urn=dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXl0ZXN0YnVja2V0L2NoYXNzaXMuZHdm

You can have a look at the tutorial to see how to create such a page: 
https://developer.autodesk.com/api/view-and-data-api/#stepbystep

The only thing that has been added beyond what the tutorial talks about is the part that retrieves the urn and accessToken parameters from the URL when this html page is opened:   

var urn = Autodesk.Viewing.Private.getParameterByName("urn");
var accessToken = Autodesk.Viewing.Private.getParameterByName(
  "accessToken");	

Open Microsoft SharePoint Designer, go to Site Pages and right-click in the list and select New > ASPX

Now you can add the rest of the html page for the viewer. See MyViewerPage.aspx on github.

4) SharePoint Web Part 

When you install SharePoint it also installs some Visual Studio project templates that will help with this part.  Inside Visual Studio select File > New > Project > Visual Web Part:

You need to start Visual Studio with the "Run as administrator" option, so that the compiled project can be deployed to your SharePoint site.

The project we've just created contains a VisualWebPart1UserControl.ascx file and its cs part that we need to edit in order to list all the SharePoint documents.

First of all we need to add a GridView to the page (named GridView1). We need to hook it up to the Documents library of SharePoint so that we can list all the documents that were uploaded to SharePoint. Inside the Page_Load function of our page we need to add the following:

  var web = SPContext.Current.Web;
  SPListCollection coll = web.GetListsOfType(SPBaseType.DocumentLibrary);
  DataTable dt = coll["Documents"].Items.GetDataTable();
  GridView1.DataSource = dt;
  GridView1.DataBind();

We also add a button (called View) to each row that the user can click to see the document in the viewer:

We need to modify the VisualWebPart1UserControl.ascx file for it. We add a template for the columns that will contain the button and the iframe that we can show when we want to view the document:

<Columns>
  <asp:TemplateField>
    <HeaderTemplate>
      Extra
    </HeaderTemplate>
    <ItemTemplate>
      <asp:Button ID="SendButton" OnClick="SendButton_Click" 
        runat="server" Text="View" 
        ToolTip='<%#DataBinder.Eval(Container.DataItem, "ID")%>'>
      </asp:Button>
      <iframe runat="server" ID='ViewerPart' 
        style="width:500px; height: 300px; display:none"> 
      </iframe>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
  </asp:TemplateField>
</Columns>

In this case we'll store the ID of the Document in the button's ToolTip, so that when it's clicked we can easily find that item to get the current urn value or update it with the newly created file's urn - see the DataBinder.Eval part above.

This is how we get back the Document we want to view inside the button's click event handler:

protected void SendButton_Click(object sender, EventArgs e)
{
  Button btn = (Button)sender;
  HtmlControl viewer = (HtmlControl)btn.Parent.FindControl("ViewerPart");

  var web = SPContext.Current.Web;
  SPListCollection coll = web.GetListsOfType(SPBaseType.DocumentLibrary);
  SPList list = coll["Documents"];
  _item = list.GetItemById(int.Parse(btn.ToolTip));
  // etc.

By default we do not show the iframe part with the embedded viewer. When the View button is clicked then once we have the urn of the file created for viewing the document, we can show the iframe - if it's already visible then we hide it:

private void ShowInViewer(HtmlControl viewer)
{
  string encToken = HttpUtility.UrlEncode(_accessToken);
  string encUrn = HttpUtility.UrlEncode(_base64URN);

  // Show in iframe.
  // If it's already showing something, then make it disappear,
  // otherwise make it appear and show the file
  if (viewer.Style["display"] == "block")
  {
    viewer.Style["display"] = "none";
    viewer.Attributes["src"] = "";
  }
  else
  {
    viewer.Style["display"] = "block";
    viewer.Attributes["src"] = "MyViewerPage.aspx?accessToken=" + 
      encToken + "&urn=" + encUrn;
  }
}

The project is using RestSharp Signed (the signed version since it can only use signed assemblies). This can be installed through NuGet Package Manager that can be added to Visual Studio from Tools > Extension Manager. You will probably have to install RestSharp assembly in the GAC in order to make thigs work.

For debugging purposes I also added a TextBox at the top of the page so that I can easily see all the messages I log at certain points in the code. See MyVisualWebPart C# project on github.

5) SharePoint page

Now that we have the Web Part, we can create a SharePoint page that will use it.   

From the main page of your SharePoint site you can go Site Actions > More Options > Page > Web Part Page  

Then we can add the Web Part we previously created: 

See MyWebPart.aspx on github.

That's it. Now we have our web page inside SharePoint that will list our documents and enables us to view those documents with the Autodesk viewing service.

 

Comments

[Kevin Barnett]

:( Broken Link ...

You can have a look at the tutorial to see how to create such a page:
http://developer.api.autodesk.com/documentation/v1/viewers/tutorial-quick_start.html

[Adam Nagy]

Thanks for the note. I have updated the link.

[webdev90]

Hey Adam,
Can you re up the github link?

[Dre_tas]

Great post Adam!
The link to GitHub at the very top is not working...any chance you can fix it? It'd be very useful to check the code.
Thanks!