Customizing WebViewer to have differently styled checkboxes

To update this solution for the current set of APIs, you can change createInnerElement on the widget instead. You can read a bit more here: https://www.pdftron.com/documentation/web/guides/form-field-styling/.


const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement;
Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function() {
if (this['captions']['Normal']) {
switch(this['captions']['Normal']) {
case '8':
const container = document.createElement('div');
container.width = container.height = 12;
container.style.backgroundColor = '#00a5e4';
container.style.padding = 0;
container.addEventListener('click', () => {
this.trigger('click');
if (this.value === 'On') {
container.innerHTML = `<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 50 50" xml:space="preserve">
<g transform="matrix(0.28 0 0 0.28 25 25)" id="db828402-3b59-4362-a9ca-f33ad34ee51a" >
<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(101,101,101); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-50, -50)" d="M 16.28 19.945 L 19.957 16.32 C 22.060000000000002 14.166 25.578000000000003 14.166 27.681 16.32 L 50.007000000000005 38.595 L 72.333 16.32 C 74.43599999999999 14.166 77.954 14.166 80.054 16.32 L 83.68 19.945 C 85.834 22.046 85.834 25.566000000000003 83.68 27.668 L 61.405 49.993 L 83.68 72.32 C 85.834 74.422 85.834 77.939 83.68 80.04299999999999 L 80.054 83.72099999999999 C 77.95400000000001 85.82 74.436 85.82 72.333 83.72099999999999 L 50.007 61.393 L 27.681 83.721 C 25.578 85.82000000000001 22.060000000000002 85.82000000000001 19.957 83.721 L 16.28 80.043 C 14.180000000000001 77.93900000000001 14.180000000000001 74.42200000000001 16.28 72.32000000000001 L 38.606 49.99300000000001 L 16.28 27.667 C 14.18 25.566 14.18 22.046 16.28 19.945 z" stroke-linecap="round" />
</g>
</svg>`;
} else {
container.innerHTML = '';
}
});
return container;
default:
const el = createInnerElement.apply(this, arguments);
return el;
}
} else {
const el = createInnerElement.apply(this, arguments);
return el;
}
};