How to use Annotations in Box UI Previewer
Since v16, the Box Platform UI Element Previewer supports Annotations v4, tightening the integration between Box and your application.
Getting started
The first step is to load the JavaScript.
You can get the previewer element from the Box CDN, and you’ll need v16 or above.
For the annotator, you’ll need to get it from GitHub, or do a npm i box-annotations. Since I’m determined to use a pure JavaScript approach as opposed to REACT/node, I’m loading the annotations.js from the dist folder I got from the npm i manually. For other options, check out the previewer and annotations documentation or this example using import.
The engineering team intends to bundle the annotator library in the previewer.
Next, you need to set the previewer options to enable the annotations.
You need to enable both the side bar and the annotations on the previewer, via the options, and also enable the annotations comments on the side bar via contentSidebarProps.
Finally you instantiate both the previewer and annotator.
You’re done!
What about events and methods?
There are many events and methods available to you, check out the annotations specific documentation.
Event listeners can be attached to viewers (via the previewer) or annotators, here are a few examples of possible implementations:
As usual a full working demo using Python and JavaScript is available in this GitHub repo.
We also have a codepen example:
Enjoy!
