Sometimes it is useful to display only a subset of annotations in the notes panel. This guide talks about how the notes panel can be configured to hide certain annotations by using the annotation's Listable property or the setCustomNoteFilter API.
Sometimes it is useful to display only a subset of annotations in the notes panel. This guide talks about how the notes panel can be configured to hide certain annotations by using the annotation's Listable property or the setCustomNoteFilter API.
Listable
Listable is a property that exists on all types of annotations. It controls if an annotation should be shown in the notes panel. The following example shows how you can hide all rectangle annotations.
Listable is a property that exists on all types of annotations. It controls if an annotation should be shown in the notes panel. The following example shows how you can hide all rectangle annotations.
WebViewer({
// your constructor options here
}, viewerElement)
.then(instance => {
const { annotManager } = instance;
annotManager.on('annotationChanged', (annotations, action) => {
if (action === 'add') {
const rectangles = annotations.filter(annot => annot instanceof instance.Annotations.RectangleAnnotation);
rectangles.forEach(rectangle => {
rectangle.Listable = false;
});
annotManager.drawAnnotationsFromList(rectangles);
annotManager.trigger('annotationChanged', [rectangles, 'modify']);
}
})
});
WebViewer({
// your constructor options here
}, viewerElement)
.then(instance => {
const { annotationManager } = instance.Core;
annotationManager.addEventListener('annotationChanged', (annotations, action) => {
if (action === 'add') {
const rectangles = annotations.filter(annot => annot instanceof instance.Core.Annotations.RectangleAnnotation);
rectangles.forEach(rectangle => {
rectangle.Listable = false;
});
annotationManager.drawAnnotationsFromList(rectangles);
annotationManager.trigger('annotationChanged', [rectangles, 'modify']);
}
})
});
setCustomNoteFilter
An annotation will neither appear in thumbnails nor show in the printed document if it's not Listable. Sometimes we may just want to customize the notes panel and leave other components untouched. In this case, setCustomNoteFilter is the right choice.
An annotation will neither appear in thumbnails nor show in the printed document if it's not Listable. Sometimes we may just want to customize the notes panel and leave other components untouched. In this case, setCustomNoteFilter is the right choice.
WebViewer({
// your constructor options here
}, viewerElement)
.then(instance => {
// only show non-rectangle annotations
instance.setCustomNoteFilter(annot => !(annot instanceof instance.Annotations.RectangleAnnotation))
});
WebViewer({
// your constructor options here
}, viewerElement)
.then(instance => {
// only show non-rectangle annotations
instance.UI.setCustomNoteFilter(annot => !(annot instanceof instance.Core.Annotations.RectangleAnnotation))
});
