Using custom formatters

[hbast]

Using custom formatters

[rsimon]

You need to supply the formatter function as the argument (not a string). E.g:

// E.g. to give a different background color to annotations with multiple bodies
var myFormatterFunction = function(annotation) {
  return (annotation.bodies.length > 1) ? "has-multiple-bodies" : "";
}

// ...
var r = Recogito.init({
  //...
  formatter: myFormatterFunction
});

[hbast]

Obviously, you'd be a bit smarter & more efficient in reality, but you get the idea :-)

I wouldn't be so sure about that ;-)

I set the color code as a JSON value when creating the annotation and then send it to the backend. On reload, the customformatter function grabs the code and renders the annotation in the appropriate color.

[hbast]

Ah, my bad. Thanks for helping.

Actually, I am looking for a way to set the annotation color based on the author information. The W3C annotations support style information, but I'm not sure if recogito supports that. Otherwise I could add this information in the backend and use the formatter function to customize the rendering.

https://www.w3.org/TR/annotation-model/#styles
Like in example 34 or 35.

How would you solve this?

[rsimon]

That's right. RecogitoJS doesn't support the W3C style props out of the box. (TBH, I always considered style to be more of an application concern, rather than a data model concern.) But, anyways: the formatter function receives the full annotation as the argument. So you can build the style using whatever annotation properties you want! E.g. if you want to style based on the author, you could simply do something like this:

var creatorFormatter = function(annotation) {
  if (annotation.creator === 'http://example.org/user1' {
    return { style: 'backgroundColor: red' };
  } else if (annotation.creator === 'http://example.org/user1' {
    return { style: 'backgroundColor: green' };
  } else {
    return { style: 'backgroundColor: green' };
  }
}

Obviously, you'd be a bit smarter & more efficient in reality, but you get the idea :-)