Box Developer Blog
Published in

Box Developer Blog

How to use Annotations in Box UI Previewer

Photo by D0N MIL04K@pexels

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.

flask html template

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.

Python render template

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.

flask html template

You’re done!

Box previewer w/ annotations
Annotations in the Box app

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:




News and stories for working with the Box APIs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store