Embedding the settings.js data within the web page itself

104 views
Skip to first unread message

Skip Gaede

unread,
May 26, 2014, 1:27:32 PM5/26/14
to pdfnet-w...@googlegroups.com
Hello,

I would like to embed the information defining the documentUrl, annotationUser and documentId (currently supplied by settings.js) within the web page that instantiates the WebViewer. I have read the two posts in this group that deal with this, but they only address supplying one custom value. I have found references on StackOverflow that show how to include JSON directly in the HTML

[URL]http://stackoverflow.com/questions/9320427/best-practice-for-embedding-arbitrary-json-in-the-dom[/URL]

If I were to put the information within the <script type="application/json" id="mysettings"></script> block could the data be retrieved and passed through to the creation of the viewer?

The motivation for this is to eliminate the need to create a temporary file.

Matt Parizeau

unread,
May 26, 2014, 6:42:34 PM5/26/14
to pdfnet-w...@googlegroups.com
Hi,

You actually should be able to get all of this information already without doing anything extra.

In a config file, to get annotationUser you can use: 
readerControl.getAnnotationUser();

To get the document URL and document Id you can access the values through ControlUtils, similar to custom.
var queryParams = ControlUtils.getQueryStringMap();
var documentUrl = queryParams.getString('d');
var documentId = queryParams.getString('did');

You can read about the different parameters on page 28/29 of the WebViewer Developer Guide. Btw with custom you can just pass a JSON object with as much information as you like.

Matt Parizeau
Software Developer
PDFTron Systems Inc.

Skip Gaede

unread,
May 26, 2014, 11:22:55 PM5/26/14
to pdfnet-w...@googlegroups.com
Thanks, Matt. Had I seen your post earlier, I might have saved a few hours!

This is a fantastic product.

Skip Gaede

unread,
May 29, 2014, 6:14:03 AM5/29/14
to pdfnet-w...@googlegroups.com
Matt,

After reading my initial post, I discovered that I did not state the problem correctly, or at least I think your answer answers a different question than the one I raised.

Since then, working with a static HTML page, a friend showed me it's possible to embed the contents of the settings.js file directly in the web page within <script></script> tags. This can be placed within the <head></head> tags, or at the top or bottom of the <body></body>  tags. Placing it in the body of the web page allows me to register and enqueue the css and js includes within the header in Wordpress (at least I think it will) and to add dynamic values for user, document, and path to the annotations before sending the page to the user.

--skip

Example (placing it after the HTML <body> tag) from a working proof-of-concept:

    <body>
<script>
    window.WebViewerUniversalInstance.model.set(
       {
           documentUrl: "DemoDoc.xod",      //url to the xod document to load on start
           documentId: "DemoDoc",
           serverUrl: "lib/html5/annotationHandler.php",    //server script for handling annotations
           annotationUser: new PDFTron.WebViewer.User("Pete", false),
           currentPageNumber: 0,
           pageCount: 0,
           zoomLevel: 0,
           fitMode: PDFTron.WebViewer.FitMode.Zoom,
           layoutMode: PDFTron.WebViewer.LayoutMode.SinglePage,
           toolMode: '',
           rotation: 0,
           webViewerLibPath: 'lib' //URL path to the WebViewer lib folder
       } );
</script>
        <div id="headerContainer">       
Reply all
Reply to author
Forward
0 new messages