Adding custom styles to read only checkboxes

Technical Support WebViewer
,
1

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?

2

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:

3

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:

4

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.

5

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.

7

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

8

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.

9

Ended up with the same problem. We have CheckBoxes that are marked as read only after a PDF is signed and saved.

Why are CheckBoxes white checkmarks on grey background by default? This is very, very hard to read.

@dfelix solution works in general (i changed the background to black, so that the white checkmarks are easier to read), it would be really great if:

  1. The default color of the marked CheckBox is black on white (or lightgray) background
    or
  2. We can change the color of the checkmark
10

Hello @chris

This was addressed since the time of the original post and, starting with WebViewer 8.3.0 (PDFTron Systems Inc. | Documentation), you can now change the color of the checkmark by using the following code snippet:

annotation.font.fillColor = new instance.Core.Annotations.Color(255, 0, 0, 1) // R, G, B, A format
11

Hello @dfelix,
thank you. I’ll give it a try!

12

Hello @dfelix

i tried it, but to be honest, it doesn’t work as excpected or at least i’m doing something wrong. I made a very simple example based on your webviewer-angular-example, with webviewer version 8.10.0.

I have a minimal example PDF with three checkboxes and two radiobuttons:

image
image638×527 3.03 KB

I know load the file into the WebViewer and it looks as expected:
image

As next step i wan’t the checkboxes and radiobuttons to be immutable. I thought it’s enough to set isReadOnly to true as follows:

    WebViewer({
      path: '../lib',
      initialDoc: '../files/example.pdf',
      isReadOnly: true
    }, this.viewer.nativeElement).then(instance => {
      this.wvInstance = instance;

This changes the menues, so that no Annontation-Functions are available, but the formfields are still mutable:

image

So i ended up setting the formfields readonly by myself as follows:

        fieldList.forEach(field => {
          field.flags.set('ReadOnly', true);
        });

Then i have the problem, that checkmarks and radiobuttons are hard to read:
image

I tried to change the color as you suggested, but ther is not “font” property in annotation and annotation.Color has no effect:

        annotationsList.forEach(annotation => {
          annotation.Color = new Annotations.Color(255, 0, 0);
        });

There is a field.font.fillColor = new Annotations.Color(255, 0, 0);, which indeed changes the color to red but only when the flag ReadOnly is not set.

Am i missing something here?

Thanks you

Christian

13

Any suggestions on this? I ended up to set the background of the checkboxes to black.

But when there is no checkmark in either of the boxes it looks like all boxes are filled and therefore “checked”.

I’d rather change the color of the X when the form field is set to read only …