PrizmDoc Viewer v13.20 Release - Updated
Developer Guide / Viewer / How to Customize the Viewer / Work with Annotations / Work with Annotations Programmatically
In This Topic
    Work with Annotations Programmatically
    In This Topic


    The API offers methods to perform create, read, update, and delete operations on annotations. Other API methods available are for selection/de-selection of marks, obtaining selected annotations, re-ordering of annotation mark objects (within a z-order of a page), and loading and saving of annotations.

    Create & Update Annotations

    When adding annotations programmatically using the addMark method to distant pages of a large document, or if you are not sure if your annotation object will straddle the page width and height boundaries, it is recommended that you use the requestPageAttributes method to obtain width and height of a page. This will help you to remain within the confines of the image rectangle when specifying width and height of the annotation’s dimensions (rectangle or start point and end point).


    var pageNumber = 1;
    var promise = viewer1.requestPageAttributes(1);
                //create stamp annotation on page 1
                 var stampMark1 = viewer1.addMark(1,  PCCViewer.Mark.Type.StampAnnotation);
                 //update the created rectangle mark using the property setters
                 //use width and height obtained in the promise object to place the stamp annotation object
                 // assume the width obtained was 612 and height 792.
                stampMark1.setRectangle({x: 250, y: 50,  width :
                      pageAttributes.width - 300, height: pageAttributes.height - 500});
                //provide the label for the stamp mark
               //set the color to red
               // … add more annotations on this page 1 ….
              var rectangleMark1 = viewer1.addMark(1,  PCCViewer.Mark.Type.RectangleAnnotation);
              rectangleMark1.setRectangle({x: 250, y:  50,  width :
                     pageAttributes.width - 300, height: pageAttributes.height - 500});
             //set fill color to blue
                  alert("ERROR: " + e);
          function(rejectedReason) {
                 alert("Unable to add annotations because page attributes promise was rejected, error = " +

    Create Text-Based Mark from Search Result

    You can create a text-based mark from a search result by using addMarkFromSearchResult.

    Read Annotations Properties

    Property getters can be used to obtain current property values. It is not necessary to use requestPageAttributes method for these operations.


    var label = stampMark1.getLabel();
    var rectangle = stampMark1.getRectangle();

    Select Annotations

    The following example shows how to select annotations:


    //get all marks var marks = getAllMarks();
    //select  annotations returned by the above getAllMarks() call (marks is an array) viewer1.selectMarks(marks);

    The graphic below shows the previously created marks are selected after selectMarks call:

    Deselect Annotations

    The following example shows how to deselect annotations:


    //Get the selected marks var selectedMarks = viewer1.getSelectedMarks();
    if(selectedMarks.length > 0 ) {
        //deselect all the marks in all the pages
       //programmatically check if all marks were deselected
        var checkSelectedMarks = viewer1.getSelectedMarks();
       if(checkSelectedMarks.length === 0 ) {
             alert("All annotations marks were deselected");

    Reorder Annotations

    Reordering of marks applies to all marks on a single page. Reordering does not apply to Highlight annotations because these type of marks need to remain attached to the Text on the page.


    //use moveMarkToFront to bring mark to the front viewer1.moveMarkToFront(rectangleMark1);
    //use moveMarkToBack to the back viewer1.moveMarkToFront(stampMark1);
    //use moveMarkForward to bring the mark one slot forward viewer1.moveMarkForward(rectangleMark1);
    //use moveMarkBackward to move the mark one slot backward viewer1.moveMarkBackward(rectangleMark1);

    Delete Annotations

    The following example shows how to delete annotations:


    //In this example we will delete all the marks that are selected
    //Get the selected marks var selectedMarks = viewer1.getSelectedMarks();
    //delete if there were any selected if(selectedMarks.length > 0 ) {
        //delete all the selected marks

    Save Annotations

    You can save annotations created in the currently displayed document using saveMarkupLayer.

    Load Annotations

    Refer to the topic, Load Annotations from the Web Tier.