PrizmDoc Viewer v13.13 Release - Updated
Developer Guide / Viewer / How to Customize the Viewer / Customize the Markup
In This Topic
    Customize the Markup
    In This Topic

    All of the markup in the Viewer is customizable.

    Templates

    You can change the markup of the Viewer UI components by editing the templates. The templates are HTML files ending in *.Template.html. The primary navigation tabs and menus are located in viewerTemplate.html.

    Adding/Removing Template Files

    To create your own version of the Viewer template you will need to update the template name where it is being loaded in viewer.js. For instance, if you copy viewerTemplate.html to a new file called customTemplate.html you would change:

    Example
    Copy Code
    element.html(_.template(options.template.viewer, ...
    

    To:

    Example
    Copy Code
    element.html(_.template(options.template.custom, ...
    
    Currently in the samples "Template" is removed from the name of the template property in the template object. For example,  viewerTemplate.html becomes template.viewer.

    Template Syntax

    The templates are consumed using the Underscore.js Template utility function. Variables and JavaScript conditions can be used within the templates using ERB syntax. For more information, refer to the Underscore documentation at http://underscorejs.org/#template.

    Example
    Copy Code
    <!-- An example of a variable -->
    <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"
         title="<%= rotate %>"></button>
    

    Custom Attributes

    Throughout the templates, on many elements, there are data attributes starting with data-pcc-. These are used to identify elements and bind them to functionality defined in viewer.js:

    Example
    Copy Code
    <!-- This button will rotate the current page when clicked -->
    <button data-pcc-rotate class="pcc-icon pcc-icon-rotate"></button>
    
    <!-- Other elements can perform the same function -->
    <div data-pcc-rotate class="customClass"></div>
    

    Using the above example, this attribute is used as a selector for a $rotatePage jquery object in viewer.js:

    Example
    Copy Code
    this.viewerNodes = {
            $rotatePage: viewer.$dom.find("[data-pcc-rotate]") ...
    

    This attribute is then bound to a click event which rotates the current page:

    Example
    Copy Code
    // Rotate Page button
    viewer.viewerNodes.$rotatePage.on('click', function () {
        viewer.viewerControl.rotatePage(90);
    });
    

    Mouse Tools

    The named mouse tools, like this one, are provided by viewercontrol.js:

    Example
    Copy Code
    <button
        data-pcc-mouse-tool="AccusoftSelectToZoom"
        class="pcc-icon pcc-icon-rectanglezoomtool"></button>
    

    Using a Custom Mouse Tool in the Viewer UI

    A named mouse tool can be used in the default UI of the Viewer. This allows one or more tools to be pre-configured. Setting the data-pcc-mouse-tool attribute to false will prevent the context menu from opening if the mouse tool is an annotation or redaction.

    Enabling a custom tool in the Viewer UI requires modification of the viewerTemplate.html, as shown in the example below:

    Example
    Copy Code
    <!-- The following markup will create a button that enables use
         of the mouse tool named "MyLineTool". -->
    <button
        data-pcc-mouse-tool="MyLineTool"
        data-pcc-context-menu="false"
        class="pcc-icon pcc-icon-annotate-line"
        title="My Line Tool"></button>