HOWTO: Programmatically add Annotations to WebDocumentViewer


Our WebDocumentViewer (WDV) control differs from our WebAnnotaitonViewer (WAV) controls significantly. One such difference is programmatically creating annotations (creating an annotation without interactive user input ... such as placing an annotation of a given size at a specific location without the user having to select the location/size interactively as they do when using the clientside CreateAnnotation call)

With the WDV, you add an annotation programmatically client-side by first defining your annotation (see the Developers Guide PDF that comes with DotImage for the full WebDocumentViewer JavaScript API).

Once you've created it, you just add it to the desired pageIndex

<script type="text/javascript" language="javascript">
  function addAnno() {
    var textAnno = {
        'type': 'text',
        'x': 50,
        'y': 100,
        'width': 500,
        'height': 200,
        'fill': {
         'color': 'Ivory',
         'opacity': 1,
        },
        'outline': {
            'color': 'white',
            'width': 2,
            'opacity': 1,
        },
        'text': {
            'value': 'Example Text Here',
            'align': 'left',
            'font': {
                'bold': false,
                'color': 'black',
                'family': 'Arial',
                'size': 14,
            }
        }
    }; 
    // just for example here..
    var desiredPageIndex = 0;
    _viewer.annotations.createOnPage(textAnno, desiredPageIndex);
  }
</script>

Original Article:
Q10399 - HOWTO: Programmatically add Annotations to WebDocumentViewer