WebViewer Hosted on Office 365

[David Remillard]

Hi folks, 

I'm a PDFTron newbie and trying to get a POC working on Office 365 for a potential client.   I have a couple questions:

1.  Since Office 365 doesn't allow .html files to be rendered to the browser (only choice is to download the file, ugh), I saw that some have installed the WebViewer lib in SharePoint's _layouts directory on the server filesystem, but I don't have that option with O365.  So I've renamed the ReaderControl.html file to ReaderControl.aspx and added the "htmlPath:  html5/ReaderControl.aspx" option when I create the instance of WebViewer.  (I'm just focusing on HTML5 for now).  I can now display an XOD file, but still getting some errors about some object not supporting the .slider() method ... so I think I just have some JqueryUI library mismatch that I need to work out.  I'm wondering if anyone has already done a port of this that works on Office 365 that could share anything about what they learned. 

2.  Architecturally, Office 365 and SharePoint Online (and any shared tenant SharePoint environment), does not allow you to install any software on the server.  If you are hosting the SharePoint servers themselves and have access to the server directly (via telnet or RDP), then you have more options.  So I'm wondering if anyone can confirm that for setting up an annotation handler, we would need to install PDFTron ASP.Net software on the server.   If this is the case, then I'm assuming that the only solution to make annotation handling work with O365 or SharePoint Online would be to have a separate server that does the "annotation processing" and talks to SharePoint via their API to update the docs and annotation files that are stored there.   Please let me know if I have this right?  ... or if doing the annotation handling really requires a software install on the server or not?  

Thanks in advance for your help and insight!

Best regards,

Dave Remillard

[Richard Dupont]

Hello Dave,

I've been working with PDFTron in Sharepoint for the last couple months. My experience is for the On premise but maybe I can help you in some way.

To save time on start with the index.html in the Universal directory from the package. It's almost a straight forward conversion to an aspx file. Add the JS code to create the viewer instance. It will create a IFrame with the html file into it and by the same time it will be able to switch to the mobile browser if needed.

For the annotation part, you need a file to send/receive the xml data. In my case it's and aspx/cs file, but you can do the same thing with the JS SharePoint library

https://msdn.microsoft.com/en-us/library/office/jj163201.aspx#BasicOps_FileTasks

You always can override the "saveannotation" and "ImportAnnotationsAsync" in the ReaderControl.js.

Hope this can help you a bit..

Richard Dupont

[David Remillard]

Thanks, Richard.   Just wondering ... did you have to install any PDFTron software (e.g. a sharepoint solution or DLL) in order for the annotations to work?   Thanks, Dave

[Richard Dupont]

Hello Dave,

Technically you don't have to install any software if you want only to use the annotation. 

Everything you need is contained in the JS files of the lib directory.

In my case I needed to install some dll and deploy a sharepoint solution. I have merge the annotation to create a new PDF at the user request. I needed to install the DLL of the PDFNetSDK. And also the user wanted to keep the XOD on premise not in the cloud, if you use the storage of PDFTron PWS you won't need to install anything else.

Good Luck !!!

Richard

[Skip Gaede]

Hello,

I, too, am working trying to get this to work, but my exposure to SP is only about two weeks. Yesterday I stored the html5, universal, and resources subdirectories under lib in a private, non-indexed document library, and, for testing, created a GettingStarted folder in the same library containing modified index.html, GettingStarted.xod and settings.js.

Populating the lib folder went well, with the exception of the JSON-encoded language files in the resources/i18next-1.7.1 directory. This file type is blocked by Microsoft.

Loading the viewer went well, up to the point where the html5/ReaderControl.html needed to be loaded. At this point, loading it in the browser overwrote the initial web page. After doing some reading, I believe what is needed is something Microsoft calls Minimal Download Strategy (MDS). Implementing this requires a Master Page that supports AjaxDelta loads of html, css and JS targeted to specific regions of the web page: the AnnotationHandler region, the ReaderControl region, and an initial region with a Web Part to pick the XOD document (and accompanying xfdf file) to be downloaded.

I eventually need this to work in SharePoint Online. Being new, I may be barking up the wrong tree. I'm very open to suggestions on better ways of addressing this.

Thanks,

Skip

[Skip Gaede]

Hello,

This is an update on getting the WebViewer to work in the SharePoint Online  (SP) environment.

The WebViewer is now mostly working. Still to be done is the creation of a Content Editor Web Part that will list the xod files the user has access to for selection purposes, and writing some new code to load and store the annotations. I can force the mobile reader to be loaded in the Settings.js file and it works as expected, but I have not yet gotten it to load automatically on my iPad.

The creation and loading of the iframes seems to be working fine without any extra work on my part, but I have had to make the following changes:

1) SP blocks upload of the translation-*.json files in the lib/resources/i18next-1.7.1 and lib/html5/Resources/i18n directories. The files are encoded in UTF-8, and simply changing the extension to txt permits them to be uploaded and downloaded without the contents being altered. I had to also change the file extension in lib/universal/universal.js (line 175) and lib/html5/ControlUtils.js (line 99)

2) The filetype for lib/html5/{AnnotationPanel.html,MobileReaderControl.html,ReaderControl.html} needed to be changed to aspx, and a corresponding change in lib/WebViewer.js (lines 1759, 1760) and lib/html5/ReaderControl.js (line 735)

3) In ReaderControl.aspx and MobileReaderControl.aspx, I changed the relative path URIs to SP absolute paths. Basically I just prepended the value for the webViewerLibPath ("/sites/develop/Webparts/lib/" in my case) to the relative URIs.

The patched lib tree was then uploaded to a customized document library which I named Webparts.

This is posted hoping it will prove to be useful to other users of this fantastic product.

--Skip 

[Christine Wei]

Hi Richard/Skip and All,

I am pretty new to SharePoint and I am trying to make WebViewer work with SharePoint 2013. 

I followed steps in this page 

http://www.pdftron.com/webviewer/demo/tutorials/getting-started.html  

will my local IIS, WebViewer works well. The user interface is the same as below page

http://www.pdftron.com/webviewer/demo/tutorials/getting-started/index.html

Suppose I put WebViewer files in a SharePoint 2013 Server. If a user clicks on the getting-started/index.html from a web browser. How to display index.html page properly, so the user can see UI as shown in above link? 

I looking forward to hearing your response. Thank you very much for help in advance. 

Christine Wei

[Skip Gaede]

Christine,

What version of SharePoint are you planning on using? For SharePoint Foundation, the annotation handler written in PHP will not work, the internationalization files encoded in JSON cannot be stored on the server, and the html files in the html5 directory cannot be loaded into an iFrame unless they are renamed as aspx files. In addition to the WebViewer dependencies, there are SharePoint dependencies that also need to be satisfied (Ajax, SharePoint Runtime). The example file will not work without modification.

The preferred way of handling annotations is to add (javaScript) code to BaseReaderControl.js (located in lib/html5).  The general flow is something like this: Download a web page to the user containing a collection of XOD documents that he/she can open, the user then picks one of the documents, which then downloads a second webpage which contains the WebViewer, the XOD file and the XFDF file. If you're just getting started, you may want to purchase Brandon Atkinson's book, Custom SharePoint Solutions with HTML and JavaScript (Apress). All of the information in the book can be found on the net, but you can download the code samples and see how they work.

For just being able to load the Getting Started document, you can create a static web page with either a Content Editor Web Part or an XML Page Viewer Web Part with a link to your GettingStarted.html (or .aspx) file.  Here's my GettingStarted.aspx file:

[CODE]

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <!-- use latest browser mode for IE -->

        <title>WebViewer 2.0</title>

        <!-- WebViewer.js Dependencies -->

        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 

        <script type="text/javascript" src="http://system.powerround.net/test/Webparts/lib/WebViewer.js"></script>

        <!-- SharePoint Dependencies (used to save annotations) -->

        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

        <script type="text/javascript" src="http://system.powerround.net/test/_layouts/15/sp.core.js"></script>

        <script type="text/javascript" src="http://system.powerround.net/test/_layouts/15/sp.runtime.js"></script>

        <script type="text/javascript" src="http://system.powerround.net/test/_layouts/15/sp.js"></script>

        <script type="text/javascript">

            $(function() {

                var viewerElement = document.getElementById("viewer");

                var myWebViewer = new PDFTron.WebViewer({

   initialDoc: 'GettingStarted.xod',

   serverUrl:  'GettingStarted.xfdf',

   documentId: "/test",                                                 //SP SharePoint Server URL for REST calls

   enableAnnotations: true,

   annotationUser: 'admin',

   annotationAdmin: true,

   enableReadOnlyMode: false,

   path: '/test/Webparts/lib',

   config: '/test/Webparts/lib/PWRconfig.js',

   type: "html5,html5Mobile",

   mobileRedirect: false

                }, viewerElement);

            });

        </script>

        <style>

        html, body, #viewer {

        height: 100%;

        width: 100%;

        }

        </style>

    </head>

    <body>

<div id="viewer"></div>

    </body>

</html>

[/CODE]

--skip

[Christine Wei]

Hi Skip,

Thank you very much for the helpful information. About SharePoint environment, I installed SharePoint 2013 SP1 in two VMs. One is of Stand-alone server type which is for development; another one is of Complete (Farm) server type. both VMs have SQL 2012 Server and SharePoint 2013 server on the same machine. 

Thanks again,

Christine

[Christine Wei]

Hi Skip,

Followed the steps from your several messages, I can display getting-started/index.aspx on my farm site. Although Json translation has a bit problem, most function works. 

Thank you very much for such wonderful information!

Christine

On Monday, June 1, 2015 at 8:13:26 PM UTC-4, Skip Gaede wrote:

[Christine Wei]

Now in getting-started page, json translation works, too. 

-Christine