Saving custom properties on annotation

[Matt Parizeau]

Q:

I have a custom upvote downvote buttons appended to the popups via webviewer which you helped me with a month or so ago. I have the code working more or less and I want to know how I can have the button count be saved when I click the annotation "saved" button. Please see the code below and tell me what I need to do to keep the counts saved. If this isn't possible let me know why it isn't and an alternative.

var popupId = 0;

var popupId2 = 0;

var am = readerControl.docViewer.GetAnnotationManager();

    am.on('annotationPopupCreated', function(e, annotation, $popupel) {

    popupId++;

    popupId2++;

    $popupel.css('background', '#6d97a5');

    $popupel.find('textarea').css('font-family', 'Arial').css('font-size', '80%');

    $popupel.find('.popup-subject').text("");

    $('<div id="' + popupId + '" style="margin-left: 30px; float: left; font-weight: bold; color: white; font-family: Arial; margin-top: -4px;"></div>').appendTo($popupel);

    $('<div id="' + popupId2 + '" style="margin-right: 30px; float: right; font-weight: bold; color: white; font-family: Arial; margin-top: -4px;"></div>').appendTo($popupel);

        $('<div style="float: left; margin-left: 5px; margin-top: 5px;"><img style="cursor: pointer; margin-top: -13px;" src="/lib/up.png"></div>').appendTo($popupel).click(function() {

            var upcount = 0;

            upcount++;

            $("#" + popupId).html(upcount);

        });

        $('<div style="float: right; margin-right: 5px; margin-top: 5px;"><img style="cursor: pointer; margin-top: -13px;" src="/lib/down.png"></div>').appendTo($popupel).click(function() {

            var downcount = 0;

            downcount++;

            $("#" + popupId2).html(downcount);

        });

  });

A:

With WebViewer you can save and load custom properties on an annotation through xfdf. For an example of this take a look at diamond.js in the custom-annotations sample. Look for myCustomAttribute and see how it's serialized and deserialized on the annotation.

If you wanted to have a custom attribute on all annotation types then you could override the base Annotations' serialize/deserialize functions. The following code is doing basically the same thing as the sample

var annotProto = Annotations.Annotation.prototype;
var oldSerialize = annotProto.serialize;
var oldDeserialize = annotProto.deserialize;

annotProto.serialize = function(element, pageMatrix) {
    var el = oldSerialize.apply(this, arguments);
    $(el).attr("myattribute", this.myCustomAttribute);
    return el;
}

annotProto.deserialize = function(element, pageMatrix) {
    oldDeserialize.apply(this, arguments);
    this.myCustomAttribute = $(element).attr("myattribute");
}