Implementing the WidgetAnnotation's getCustomStyles function allows you to add styling changes to particular types of widget annotations.
WebViewer(...)
.then(instance => {
const { Annotations } = instance;
Annotations.WidgetAnnotation.getCustomStyles = widget => {
if (widget instanceof Annotations.TextWidgetAnnotation) {
// can check widget properties
if (widget.fieldName === 'f1-1') {
return {
'background-color': 'lightgreen'
};
}
return {
'background-color': 'lightblue',
color: 'brown'
};
} else if (widget instanceof Annotations.PushButtonWidgetAnnotation) {
return {
'background-color': 'black',
color: 'white'
};
} else if (widget instanceof Annotations.CheckButtonWidgetAnnotation) {
return {
'background-color': 'lightgray',
opacity: 0.8
};
}
};
});
WebViewer(...)
.then(instance => {
const { Annotations } = instance.Core;
Annotations.WidgetAnnotation.getCustomStyles = widget => {
if (widget instanceof Annotations.TextWidgetAnnotation) {
// can check widget properties
if (widget.fieldName === 'f1-1') {
return {
'background-color': 'lightgreen'
};
}
return {
'background-color': 'lightblue',
color: 'brown'
};
} else if (widget instanceof Annotations.PushButtonWidgetAnnotation) {
return {
'background-color': 'black',
color: 'white'
};
} else if (widget instanceof Annotations.CheckButtonWidgetAnnotation) {
return {
'background-color': 'lightgray',
opacity: 0.8
};
}
};
});
You can also extend the createInnerElement function on widget annotations. This allows you to use your own DOM elements for the display or just to add your own event handlers.
// in a config file
const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = () => {
const button = this;
const el = createInnerElement.apply(this, arguments);
el.addEventListener('click', () => {
console.log('check button clicked', button.fieldName);
});
return el;
};
