PrizmDoc Viewer v13.19 - Updated
Developer Guide / Viewer / How to Customize the Viewer / Build a Custom User Interface
In This Topic
    Build a Custom User Interface
    In This Topic

    Build a Custom User Interface

    It is possible to build a custom Viewer UI by directly embedding the ViewerControl instead of embedding the Viewer using the jQuery plugin.

    There are several benefits to building a custom Viewer UI, including the ability to:

    • Design menus and button placement that is unique for your customer’s workflow.
    • Create custom UI elements/behavior.
    • Arrange UI elements distributed throughout a web page, rather than all Viewer UI elements in a single div.
    • Choose your own UI framework(s).
      • The ViewerControl (viewercontrol.js) does not have a dependency on any third-party frameworks/libraries

    Customization Example

    In the example below, the ViewerControl is embedded into a page and a simple UI is built around the ViewerControl. The Viewer created by the example code is shown in the figure below:

    The directory structure for this example is:

    • /
      • css/
        • viewercontrol.css (product)
        • simple.css (custom - shown below)
      • js/
        • viewercontrol.js (product)
          • viewerCustomizations.js (product)
          • simple.js (custom - shown below)
      • simple.html (custom - shown below)

    NOTE: This example uses jQuery for simplicity and because it is well known to many readers. jQuery is served from the Google Hosted Libraries CDN.

    HTML (simple.html)

      <!DOCTYPE html>
    <html>
    <head lang="en">
       <meta charset="UTF-8">
       <title>Custom Viewer UI Example</title>
       <!--resources for the viewer-->
       <link rel="stylesheet" href="css/viewercontrol.css">
       <script src="js/viewercontrol.js"></script>
       <script src="js/viewerCustomizations.js"></script>
       <!--Use jQuery to build the UI of the viewer-->
       <script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
       <!-- Script tag for simple.js, which creates and embeds the custom viewer. -->
       <script src="js/simple.js"></script>
       <!-- CSS for the page -->
       <link rel="stylesheet" href="css/simple.css">
    </head>
    <body>
    <!-- This div contains the custom viewer and UI elements. -->
    <div class="viewerWrapper">
       <!-- There are some buttons/tools in the viewer UI. These will be disabled until the ViewerReady event. -->
       <button id="prevPage" class="viewerButton" disabled>Previous</button>
       <button id="nextPage" class="viewerButton" disabled>Next</button>
       <button id="zoomOut" class="viewerButton" disabled>-</button>
       <button id="zoomIn" class="viewerButton" disabled>+</button>
       <!-- There is a status bar that shows the current and total page number. -->
       <div class="floatRight">Page <span id="currentPage">1</span> of <span id="totalPages">1</span></div>
       <!-- The ViewerControl is embedded in this element. -->
       <div id="viewerControlContainer">ViewerControl goes here</div>
    </div>
    </body>
    </html>
    
    

    JavaScript (js/simple.js)

    $(document).ready(function() {
       // Get the element where the viewer will be embedded.
       var element = document.getElementById("viewerControlContainer");
       // Create the options object for the viewer
       var options = {
           documentID : "a_valid_document_id",
           imageHandlerUrl: "my_pas_proxy",
           icons : viewerCustomizations.icons,
           language : viewerCustomizations.languages['en-US'],
           // printTemplate : "..."        // include a print template for printing to work
       };
       // Create the viewer control
       var viewerControl = new PCCViewer.ViewerControl(element, options);
       // It's best practice to wait for the "ViewerReady" event before calling the viewer API.
       viewerControl.on("ViewerReady", function() {
           // Display the page count when the estimated and actual page count are available.
           viewerControl.on("PageCountReady", displayPageCount);
           viewerControl.on("EstimatedPageCountReady", displayPageCount);
           function displayPageCount(ev) {
               $("#totalPages").html(ev.pageCount);
           }
           // Display the current page number when the page changes.
           viewerControl.on("PageChanged", function(ev) {
               $("#currentPage").html(ev.pageNumber);
           });
           // It's safe to enable the UI buttons during the ViewerReady event
           $(".viewerButton").prop("disabled", false);
           // ...and then hookup the UI buttons
           $("#nextPage").click(function() {
               viewerControl.changeToNextPage();
           });
           $("#prevPage").click(function() {
               viewerControl.changeToPrevPage();
           });
           $("#zoomOut").click(function() {
               viewerControl.zoomOut(1.25); // Zoom out 1.25x
           });
           $("#zoomIn").click(function() {
               viewerControl.zoomIn(1.25);  // Zoom in 1.25x
           });
       });
    });
    
    

    NOTE: The sample code that installs with the product demonstrates how to generate a document ID. The code is too large to be shown in this example.

    CSS (css/simple.css)

    .viewerWrapper {
       width: 600px;
       height: 600px;
       position: relative;
       border: 1px solid #aaa;
       background: #ddd;
    }
    #viewerControlContainer {
       position: absolute;
       top: 40px;
       bottom: 0px;
       left: 0px;
       right: 0px;
    }
    .floatRight {
       float: right
    }