Adding custom styles to read only checkboxes

WebViewer Version: 8.1

We’re using field flags to set some various fields to read-only when they’re being pre-populated with imported data.

We have some custom styling which is working fine for all fields except checkboxes that have been set to read-only. They’re having styling applied which we’re struggling to override. Simplified example of our custom styling code as follows;

const applyCustomStyles = (annotations) => {
    annotations.WidgetAnnotation['getCustomStyles'] = (widget) => {
      if (widget.fieldFlags.get('ReadOnly') === true) {
        if (widget instanceof annotations.CheckButtonWidgetAnnotation) { 
          return {
            fill: 'black',
            'background-color': 'white'
          }
        }
        return {
          color: 'black'
        }
      }
      return {
        'background-color': '#E6E6E6',
        color: 'black',
      }
    }
  }

None of the custom styles we set for read-only check boxes are being applied.

Any pointers?

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

I’ve tried another approach of not setting the field to read-only, but renaming them with a flag, so that we can style it as necessary. Then trying to override the createInnerElement method to disable checkboxes with the name flag, e.g.

      const createInnerElement = Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement
 Annotations.CheckButtonWidgetAnnotation.prototype.createInnerElement = function () {
        const button = this
        const el = createInnerElement.apply(this, arguments)
        if(button.fieldName.includes('_read_only_checkbox')){
          el.disabled = true
        }      
        return el
      }

doesn’t work either - the checkbox is still clickable :frowning:

Hello there.

Thanks for contacting WebViewer’s support.

The code snippet below changes the background color for readonly text widgets to red and not readonly text widgets background color to green.

const { Annotations } = instance.Core;

  Annotations.WidgetAnnotation.getCustomStyles = widget => {
    if (widget instanceof Annotations.TextWidgetAnnotation) {
      if (widget.fieldFlags.get('ReadOnly')) {
        return {
          'background-color': 'red'
        };
      }
      return {
        'background-color': 'green',
      };
    }
  };

Please let me know how this works for you and if you have any further questions.

Best Regards,
Diego Felix
Web Software Developer
PDFTron Systems, Inc.
www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.

Hi Diego,

Thanks for replying. As per my initial post and code sample, that’s the approach we’ve been using already. While it works in general, it isn’t working on Checkbox fields that have had their flags set to ‘ReadOnly’. It works on other checkbox fields, text fields, etc, but the styling seems to be overridden by something else when the readonly flag is set on a checkbox.

ended up going with the createInnerElement approach, and returning the button element within a container that had no click events :man_shrugging:

Hello there.

I missed the point that you were asking about checkboxes only. Sorry about that.

Here is the updated code snippet that works for checkboxes:

const { Annotations } = instance.Core;

  Annotations.WidgetAnnotation.getCustomStyles = widget => {
    if (widget instanceof Annotations.CheckButtonWidgetAnnotation) {
      const isReadonly = !!widget.fieldFlags.get(Annotations.WidgetFlags['READ_ONLY']);

      return {
        'backgroundColor': isReadonly ? '#FF0000' : 'inherits',
      }
    }
  };

Obviously, you would have to change ‘#FF0000’ to be the color you want.

Let me know how this works for you and if you have any further questions.

Best Regards,
Diego Felix
Web Software Developer
PDFTron Systems, Inc.
www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.